V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
fe2018
V2EX  ›  JavaScript

这个是不是 JS 高程 3 的一个错误?

  •  
  •   fe2018 · 2019-03-03 12:05:05 +08:00 · 3355 次点击
    这是一个创建于 2074 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天在看高程 3 的时候,271 页写到:

    如果这个文本节点当前存在于文档树中,那么修改文本节点的结果就会立即得到反映。另外,在修改文本节点时还要注意,此时的字符串会经过 HTML (或 XML,取决于文档类型)编码。换句话说,小于号,大于号或引号都会被转义。

    即:div.firstChild.nodeValue = "Some <strong>other</strong> message";

    的输出结果是:"Some &lt;strong&gt;other&lt;/strong&gt; message"

    但我在浏览器里试了下面的代码,无论是页面还是控制台,输出的都是:Some <strong>other</strong> message,这是不是高程 3 的一个错误?

    代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<id id="app">v</id>
    	<script>
    		window.onload = function() {
                            document.getElementById('app').firstChild.nodeValue = 'Some <strong>other</strong>message'
                            console.log(document.getElementById('app').firstChild.nodeValue)
    		}
    	</script>
    </body>
    </html>
    
    10 条回复    2019-03-03 13:23:23 +08:00
    fe2018
        1
    fe2018  
    OP
       2019-03-03 12:21:31 +08:00
    求前端大牛看一下
    SuperMild
        2
    SuperMild  
       2019-03-03 12:29:04 +08:00
    你在网页里看见方括号,就证明被转义了,如果不转义,你看不见方括号,而是看见加粗效果。
    zyEros
        3
    zyEros  
       2019-03-03 12:32:41 +08:00
    我看了下标准,标准上并没有说转义的问题,只是告诉你这是一个 DOMString,而 DOMString 只是一个 UTF16 的字符串。所以这可以算个别浏览器自己定义的行为。

    Spec:
    nodeValue: https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080
    DOMString: https://www.w3.org/TR/DOM-Level-2-Core/core.html#DOMString
    fe2018
        4
    fe2018  
    OP
       2019-03-03 12:45:17 +08:00
    @SuperMild
    @zyEros 也就是说,因为内容是插入到文本节点里的,为了显示的和字符串内容一样,浏览器在显示的时候进行了转义。对于 XSS 攻击,文本节点里的内容不需要后端做转义。
    zyEros
        5
    zyEros  
       2019-03-03 12:48:30 +08:00
    最简单的,把你那个例子改一下:
    nodeValue = `<div style="width:100px;height:100px;background:red;"></div>`;

    你就发现实际上不会显示一个红色块了。

    这东西规范没有说,浏览器行为而已。
    SuperMild
        6
    SuperMild  
       2019-03-03 12:55:48 +08:00
    @fe2018 你在网页里使用了 JS 和 DOM 的 api,恰好该 api 有转义功能,因此对于该部分内容后端确实不需要做转义。至于该 api 是不是稳定的,我就不知道了。

    另外,如果后端传过来的字符串里有单引号、双引号、换行符,有可能出问题哦。
    morethansean
        7
    morethansean  
       2019-03-03 12:57:26 +08:00
    这些 html 里有特殊含义的字符串要在 html 上 "正确" 显示,是需要经过转义的。
    你设置 nodeValue 他就自动转义了,你要看原值找父节点的 innerHTML 就知道了。
    Yvette
        8
    Yvette  
       2019-03-03 12:57:45 +08:00
    貌似确实是错了,innerHTML 才涉及到转义,textContent 和 node 里的 nodeValue 都可以直出 text
    fe2018
        9
    fe2018  
    OP
       2019-03-03 13:21:50 +08:00
    @zyEros
    @SuperMild
    @morethansean
    @Yvette 感谢大牛的解答
    fe2018
        10
    fe2018  
    OP
       2019-03-03 13:23:23 +08:00
    @Yvette 作者描述的不太完善吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1054 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:28 · PVG 03:28 · LAX 11:28 · JFK 14:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.