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

Question

我在我的代码中这样使用 DOMParser：

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

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

You can perform the opposite operation—converting a DOM tree into XML or HTML source—using the XMLSerializer interface.

但是它也声明它 returns

Either Document or XMLDocument depending on the mimeType argument.

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

Answer 1

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

Answer 2

在这个 introductory article on 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>

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

Is parsing HTML with DOMParser safe from XSS?

javascript

xss

domparser

如何消毒 HTML？