如何避免innerHTML中的脚本执行以防止xss

Question

有没有办法在使用 innerHTML 时防止 xss？

一个例子：

elem.innerHTML = "Hello <span style='color:red'>There!</span><img src=x onerror=confirm('xss') />");

可能还有更多这样的场景，我们只想在上述情况下只显示纯视图部分

Hello <span style='color:red'>There!</span><img src=x />

Answer 1

您正在寻找textContent。

As per MDN:

Element.innerHTML 如其名称所示，返回 HTML。有时人们使用 innerHTML 在元素内检索或写入文本，但 textContent 具有更好的性能，因为它的值不被解析为 HTML。

此外，使用 textContent 可以防止 XSS 攻击。

elem.textContent = "Hello <span style='color:red'>There!</span><img src=x onerror=confirm('xss') />";

<pre id="elem"></pre>