在 DOM 中插入 HTML 时编码 HTML 属性答案

【问题标题】：Encode HTML attributes when inserting HTML in the DOM在 DOM 中插入 HTML 时编码 HTML 属性
【发布时间】：2012-08-26 05:42:37
【问题描述】：

我对防止 XSS 攻击有疑问。

1) 问题：

我有一个 HTML 模板作为 Javascript 字符串（受信任）并插入来自服务器请求的内容（不受信任）。我将 HTML 模板字符串中的占位符替换为不受信任的内容，并使用 innerHTML/Text 将其输出到 DOM。

我特别插入了我在模板 HTML 字符串和表单元素值中已经存在的 <div> 和 <p> 标记中输出的文本，即输入标记的 value 属性、select option 和 textarea 标记中的文本。

我是否理解正确，我可以将上面提到的每个插入文本视为 HTML 子上下文，因此我只像这样编码：encodeForJavascript(encodeForHTML(inserted_text))。还是我必须对插入到 HTML 属性子上下文的输入字段的值属性中的文本进行编码？

在 OWASP 上阅读此问题后，我倾向于认为后者仅在我通过 Javascript 设置具有不受信任内容的属性时才需要，如下所示：document.forms[ 0 ].elements[ 0 ].value = encodeForHTMLAttribute，对吗？

2) 问题：

服务器端编码服务器响应通过 Ajax 进入客户端并得到处理（如问题 1）的附加价值是什么。另外，我们在对内容进行双重编码时不会有问题吗？

谢谢

【问题讨论】：

【解决方案1】：

您需要针对相关上下文进行编码，因此插入到 html 上下文中的数据需要针对 html 进行编码，并且插入到 html 属性中的数据应该是 html 属性编码。这是您提到的 javascript 编码的补充。

我会为传输进行 javascript 编码，然后为正确的上下文客户端进行编码，我知道哪个上下文是正确的。

【讨论】：

您好，Erlend，感谢您的回复，但是，恐怕我仍然不清楚我是在处理 html 上下文还是 html 属性内容。让我再试一次，使用以下代码：var html = "<p><input value='(untrusted_1)'/>(untrusted_2)</p>"; innerHTML = html; 我是只处理 HTML 上下文还是必须将 (unstrusted_1) 作为 HTML 属性上下文处理？毕竟我插入了一个不直接处理属性的 HTML 片段？
通过直接操作 DOM 从 javascript 设置值时，您不必编码。所以 document.forms[0].elements[0].value = someValue 和 document.forms[0].elements[0].innerText = someValue 可以用同样的方式处理。您只需要确保 someValue 在定义它的 javascript 上下文中被转义。 HTML 编码和 HTML 属性编码允许 HTML 解析器正确构建 DOM。因此，在您构建 HTML 时，您的示例中需要它们。
非常感谢 Erlend，所以我最初的假设是不正确的。正确的做法是这样的：var htmlAttribute = encodeForJS( encodeForHTMLAttribute( unstrusedInputValue ) ) var htmlText = encodeForJS( encodeForHTML( unstrusedTextValue ) ) var html = "<p><input value='"+ htmlAttribute+ "'/>"+ htmlText +"</p>"; node.innerHTML = html;