使用 DOMParser 解析 HTML 是否可以避免 XSS？

Question

我在代码中使用DOMParser，如下所示：

\n

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

\n

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

\n

\n

您可以使用 XMLSerializer 接口执行相反的操作\xe2\x80\x94将 DOM 树转换为 XML 或 HTML 源\xe2\x80\x94。

\n

\n

然而它也声明它返回

\n

\n

Document 或 XMLDocument，具体取决于 mimeType 参数。

\n

\n

那么使用这种方法是否有助于保护您的网站免受攻击XSS？

\n

Answer 1

DOMParser创建的文档是在禁用脚本的情况下创建的；该脚本会被解析，但不会运行，因此它应该可以安全地防御 XSS。也就是说，如果您在服务器端执行此操作并将结果提供给客户端，则客户端将不知道“noscript”上下文，因此它可能是正确上下文中的漏洞来源。

Answer 2

在这篇关于可信类型的介绍性文章中，我们可以看到这是一个已知的 XSS 接收器。DOMParser#parseFromString

这些<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>