防止使用 innerHTML 进行脚本注入

Prevent script injection with innerHTML

本文关键字：脚本注入 innerHTML 更新时间：2023-09-26

我编写了一个微模板实用程序，它使用innerHTML根据用户输入（纯文本字符串或html字符串）在网页中注入html片段。

我主要担心的是恶意脚本注入的风险。脚本可以通过脚本标签或在内联事件（例如 img onload、div onmouseover）中注入。

有没有办法清理 html 字符串以防止此类注入？另外，我应该注意其他脚本注入方法吗？

为了安全起见，您需要在客户端和服务器上清理模板。不要编写自己的反 XSS 库，因为恶意用户必然知道您尚未考虑的漏洞;有太多的细微差别，除非您是XSS专家，否则您一定会错过一个。

在客户端，Google Caja有一个非常好的HTML清理实用程序，它将对HTML字符串执行强大的清理，清理恶意属性或其他讨厌用户可以做讨厌事情的区域，例如通过注入script标签进行XSS攻击。它们还可以擦除属性和各种其他XSS注入点（例如object和applet标签），因此您可以感到相当安全。

虽然您应该在服务器上进行清理以防止恶意用户简单地禁用javascript或覆盖Caja的清理器，但您可以使用Caja清理输入和输出，以尝试尽可能多地捕获。

（前面有实验功能！要插入未经净化的 HTML，首选使用 Element.setHTML（）

^{（来源：MDN）}
元素接口的 setHTML（）方法用于解析和清理一个 HTML 字符串，然后将其作为子树插入到 DOM 中的元素。应该使用它而不是 Element.innerHTML 用于将不受信任的 HTML 字符串插入元素。

document.querySelector("#test").setHTML(someUnsanitizedString);

PS：兼容性通知：在 Chromium 浏览器中可用，但仍在火狐 ^（2023.）