问题描述
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>