跨站点脚本问题答案

【问题标题】：Cross Site Scripting Issue跨站点脚本问题
【发布时间】：2013-09-23 14:37:55
【问题描述】：

我想用我们的代码防止 XSS，问题是它可能需要 JS 和 html 转义，并且可能有点棘手。

以下示例代码与我们的代码类似

 <script>
  var CURRENT_VALUE = '<img src=1 onerror=alert(1)>';
  document.getElementById("valueBox").innerHTML = CURRENT_VALUE;
 </script>

让我们假设 CURRENT_VALUE 是动态插入的。那么在这种情况下我应该怎么做，我知道简单的 HTML 编码可能不起作用，因为攻击者可能会传递 unicode 转义值，并且当 JS 解析器清除它时，它可能会被转储到文档中。

那么正确的方法是什么，

我应该先进行 JS 转义，然后在 document.getElementbyID 之前进行 html 转义吗？这将如何运作？

假设 CURRENT_VALUE 是十六进制编码并包含 /x027img... 等等

【问题讨论】：

我看不出这与 XSS 有什么关系（？）防止 XSS 更多是关于清理输入服务器端的内容。如果点击“查看源代码”，上面会隐藏，但它并不能防止恶意代码插入输入框或文本区域。
我会认为任何客户端在安全方面都是徒劳的。您必须假设它可以被操纵并处理服务器端正确/预期值的验证。
可以使用服务器端JS转义，但是如果我也必须使用服务器端HTML转义，那么我需要按照先html转义，然后是JS转义的顺序进行，因为html是最后解释，但在非 html 上下文中解释时可能会出现问题，因此我可能必须先进行服务器端 JS 转义，然后再进行客户端 javascript 转义，但我对此不确定。
@davidkonrad 如果没有正确转义，整个恶意脚本将被加载到文档中，因此是一个 xss
@davidkonrad 这是关于防止基于 DOM 的 XSS：owasp.org/index.php/DOM_Based_XSS

标签： javascript html security scripting xss

【解决方案1】：

现在我认为我了解您的前进方向 - 将内容作为 TextNode 插入会进行一些格式化：

var CURRENT_VALUE = '<img src=1 onerror=alert(1)>';
var node = document.createTextNode(CURRENT_VALUE);
var valueBox = document.getElementById("valueBox");
valueBox.appendChild(node);

console.log(valueBox.innerHTML);

如果您查看控制台输出，插入的 HTML 现在是：

&lt;img src=1 onerror=alert(1)&gt;

【讨论】：

是的，谢谢:)，但是我需要明确何时应该进行转义，如果 CURRENT_VALUE 已经使用 JS 十六进制编码进行了转义，我们所拥有的只是 /x026/x034 一种权利?那么该输入的 createtextnode 是否会被正确地 html 转义？谢谢你的回答
@Kalyan 如果是 JS 十六进制转义，那么 createTextNode 将正确解释为未转义值，一切都会好起来的。
感谢有道理，它现在也可以在非 html 上下文中使用 createTextNode