使用DOMParser解析HTML是否安全，可以避免XSS攻击吗？

Question

我在代码中使用DOM解析器：

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

阅读文档后，我有些担心跨站脚本攻击(XSS)仍然可能存在，因为正如文档所述：

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

然而，它也指出它返回

根据mimeType参数返回Document或XMLDocument。

因此，使用这种方法来保护您的网站免受XSS攻击是否可行？

- Marc Rasmussen

---

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

Answer 1

DOMParser创建的文档是禁用脚本的；脚本被解析，但不会运行，因此它应该是安全的，可以抵御XSS攻击。然而，如果你在服务器端进行这个操作，并将结果提供给客户端，客户端将不知道“noscript”上下文，所以在一些情况下可能会存在漏洞风险。

- ShadowRanger

---

谢谢您的回答，您能举个“正确上下文”（Right Context）的例子吗？ :) - Marc Rasmussen

@MarcRasmussen：另一篇回答 给出了一个例子，你可以使用解析后的 HTML 将其注入页面，从而调用编程行为。 - ShadowRanger

Answer 2

在这篇关于trusted-types的介绍性文章中，我们可以看到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);

<div></div>

---

如何对HTML进行清理？

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

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

console.log(clean);

<script src="https://unpkg.com/dompurify@2.2.2/dist/purify.min.js"></script>

- customcommander

---

谢谢您的回答，那我应该如何避免 XSS 攻击呢？ - Marc Rasmussen

只要将不受信任的节点远离窗口DOM（仅用于数据处理），DOMParser就是安全的。事实上，DOMPurify在幕后使用DOMParser来帮助处理不安全的HTML。（不要误解，不要使用DOMParser来净化HTML，而且不要将其结果视为可信的HTML添加到主文档中） - Maciej Krawczyk

以下是有关编程的内容，英文到中文的翻译。仅返回翻译后的文本：相关上下文：https://github.com/GoogleChrome/web.dev/issues/6890#issuecomment-979148946 - Thomas Orlita