setAttribute 会自动转义 HTML 字符吗？答案

【问题标题】：Does setAttribute automatically escape HTML characters?setAttribute 会自动转义 HTML 字符吗？
【发布时间】：2018-05-02 18:08:18
【问题描述】：

我正在调查我们系统中的一个错误，其中链接的标题属性被设置为类似于click if value &gt; 400 的东西，但实际显示的工具提示是click if value &gt; 400。这个标题值是由用户输入定义的，因此原始工程师对文本进行了转义，因此不会导致 XSS 漏洞。 click if value &gt; 400 变为 click if value &gt; 400。

这个额外的转义步骤似乎导致 HTML 特殊字符被过度转义，因此它们的转义值被逐字呈现。

为了更加彻底，我检查了 HTML 规范，根据这一行，setAttribute 函数似乎必须自动转义属性的值字符串。

https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082

"如果元素中已经存在具有该名称的属性，则将其值更改为 value 参数的值。此值是一个简单的字符串；它在设置时不会被解析。所以任何标记（例如被识别为实体引用的语法）都被视为文字文本，并且在写出时需要由实现进行适当的转义。”

据我了解，这一行意味着 setAttribute 函数应该转义 HTML 特殊字符。这是正确的解释吗？

【问题讨论】：

“通过实现”我认为是指 Web 浏览器或 DOM API，而不是客户端。
是的，我认为“实现”是浏览器/DOM 的一个花哨的包罗万象的词

标签： javascript html

【解决方案1】：

该引用的简单英文解释是setAttribute() 不会将值解析为 HTML。这样做的原因是因为您根本没有编写 HTML。该值是纯文本，而不是 HTML，因此通常 HTML 中的特殊字符在纯文本中没有特殊含义，并且将它们转义为 HTML 实际上会具有破坏性。

&gt; 是> 的 HTML 表示形式。您只需将其编码为 HTML，而不是纯文本。

【讨论】：

【解决方案2】：

不完全是。

HTML 是一种数据格式。

浏览器将解析 HTML 并从中生成 DOM。正是在这一点上，字符引用（如&gt;）被转换为它们所代表的字符（如>）。

当您使用setAttribute 时，您直接更改 DOM。

这完全绕过了 HTML 数据格式，因此 HTML foo="&amp;" 和 JavaScript setAttribute("foo", "&") 将给您相同的最终结果。

【讨论】：

但是为什么< 没有被转义？试试a.setAttribute('a', 'a<s');console.log(a.outerHTML);
@VytautasJakutis — 你不能在属性值的中间开始一个标签，所以< 并不意味着“开始一个标签”，所以它不需要被转义.
试试这个，看看outerHTML的不一致：<div id="a" a="&amp;"></div> <div id="b" b="&gt;"></div> <script> const attr = (name, escaped) => { const div = document.getElementById(name) let out = [name, div.getAttribute(name), div.outerHTML, '\n'] div.setAttribute(name, div.getAttribute(name)) out += [name, div.getAttribute(name), div.outerHTML, '\n'] div.setAttribute(name, escaped) out += [name, div.getAttribute(name), div.outerHTML, '\n'] return out } console.log(attr('a', '&amp;') + attr('b', '&gt;')) </script>
@VytautasJakutis — 抛出异常：jsbin.com/bebuzazuwi/1/edit?html,output
@VytautasJakutis — XMLLint 不知道也不关心您使用旨在生成 HTML 的工具生成数据。它将它视为 XML，因为它是 XML 的 linter。