使用 DOMParser 解析 HTML 对 XSS 安全吗？答案

【问题标题】：Is parsing HTML with DOMParser safe from XSS?使用 DOMParser 解析 HTML 对 XSS 安全吗？
【发布时间】：2020-11-10 15:57:58
【问题描述】：

我在我的代码中使用DOMParser：

 html`${this.domParser.parseFromString(this.richText, 'text/html').body.children}`

阅读文档后，我有点担心Cross site Scripting attacks 仍然可能，因为正如文档所述：

您可以使用 XMLSerializer 接口执行相反的操作——将 DOM 树转换为 XML 或 HTML 源代码。

但它也声明它返回

Document 或 XMLDocument 取决于 mimeType 参数。

那么使用这种方法可以很好地保护您的网站免受XSS 的侵害吗？

【问题讨论】：

html 在做什么？您是否将此解析文档的结果附加到主文档中？如果是这样，DOMParser 不提供任何针对 XSS 的保护。

标签： javascript xss domparser

【解决方案1】：

DOMParser created documents are created with scripting disabled;该脚本已解析，但未运行，因此它应该可以安全地抵御 XSS。也就是说，如果您在服务器端执行此操作并将结果提供给客户端，则客户端将不知道“noscript”上下文，因此它可能是正确上下文中的漏洞来源。

【讨论】：

感谢您的回答，您能否举例说明“正确的上下文”？ :)
@MarcRasmussen: The other answer 给出了一个示例，您使用生成的解析 HTML 将解析的 HTML 注入调用程序行为的页面。

【解决方案2】：

在trusted-types 上的这个introductory article 中，我们可以看到DOMParser#parseFromString 是一个已知的XSS 接收器。

<script> 块不会执行，但解析器无法判断什么构成 XSS 威胁。

您不能使用它来安全地将 html 注入页面：

const parser = new DOMParser();
const html = '<img onerror="alert(`gotcha`)" src="">';
const new_node = parser.parseFromString(html, 'text/html').body.firstChild;
document.querySelector('div').appendChild(new_node);

&lt;div&gt;&lt;/div&gt;

如何清理 HTML？

您可以使用专门构建的库，例如dompurify：

const dirty = '<img onerror="alert(`gotcha`)" src="">';
const clean = DOMPurify.sanitize(dirty);

console.log(clean);

&lt;script src="https://unpkg.com/dompurify@2.2.2/dist/purify.min.js"&gt;&lt;/script&gt;

【讨论】：

感谢您的回答，那我应该如何避免 XSS 呢？
DOMParser 是安全的，只要您将不受信任的节点与窗口 DOM 隔离开（纯粹用于数据处理）。事实上，DOMPurify 在后台使用 DOMParser 来帮助处理不安全的 html。（不要误会，不要使用 DOMParser 清理 html，同样，不要将其结果视为可以添加到主文档中的可信 html）
相关上下文：github.com/GoogleChrome/web.dev/issues/…