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

Question

在使用innerHTML时，有没有一种方法可以防止xs？

一个例子：

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。

根据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>