一般来说，在javascript中，使用innerHTML不是一个[in]安全问题吗？

Posted 2023-02-26

【中文标题】一般来说，在javascript中，使用innerHTML不是一个[in]安全问题吗？

【英文标题】：in general, in javascript, isn't using innerHTML an [in]security issue?

【发布时间】：2015-05-27 09:23:45

【问题描述】：

使用DOM 和reactjs 等酷炫的新工具，innerhtml 是否应该在javascript 程序中使用？

使用它很像让自己面临 SQL 注入攻击，但在这里它是一个跨站点脚本等。在使用之前需要检查和清理所有内容。

在我看来 innerHTML 与 eval() 存在相同的安全问题，出于安全原因应避免使用。

（在美学上也是如此，但这只是我。）

【参考方案1】：

是的，innerHTML 经常被滥用，并且是客户端 HTML 注入 (DOM-XSS) 安全漏洞的常见来源。

通常最好使用对象样式的创建方法，例如createElement、textContent 和设置直接DOM 属性。同样在 jQuery 中，更喜欢使用 .text() 和 .prop() 而不是 .html() 设置可变内容，或者将 HTML 标记传递给允许它的操作方法。

但也有一些例外：

如果您使用的是自动为您处理 HTML 转义的客户端模板语言（例如带有 <%- 的 lodash 模板），将输出写入 innerHTML 是安全的。

如果您将许多同级元素附加到单个元素并且性能是优先考虑的（通常的示例是具有大量行的 <table>），那么 HTML 标记创建可能是值得的，您只需要小心手动对所有文本进行 HTML 转义

内容实际上应该是 HTML 的地方，例如您有从 Markdown 处理的数据。

【讨论】：

第一种和第三种情况是一样的：你依赖（别人的）代码清理器来保证你的安全。在降价的情况下，它似乎更像是一个错误而不是输出是 html 的功能。第二种情况似乎是浏览器异常：当前 html 文本的渲染速度比 DOM 操作更快，随着页面变得更加动态，这种情况应该会变得更好。