从XSS使用DOMParser解析HTML是否安全？ 如何清理HTML？

如何解决从XSS使用DOMParser解析HTML是否安全？ 如何清理HTML？

我在代码中这样使用DOMParser：

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

阅读文档后，我有点担心Cross site Scripting attacks仍然可行，因为文档指出：

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

但是它也声明它会返回

取决于mimeType参数是Document还是XMLDocument。

使用这种方法对保护您的网站不受XSS不利吗？

解决方法

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

,

在introductory article上的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>