JavaScript / Lit-element 安全解析方式 HTML

Question

我正在从我的服务器获取一些 html，我想将它们放入我的页面。但是我希望它被消毒（以防万一）。

但是我不太确定该怎么做。

到目前为止我已经尝试过：

<div .innerHTML="${body}"></div>

因为应该将其解析为 HTML 但我不能 100% 确定这是最好的方法。

我也查看了在线消毒剂，但未能找到与我的项目（Lit-element 网络组件）匹配的任何消毒剂。

是否有更好的方法来解析 HTML，如果有的话如何？

Answer 1

Take a look at the DOMParser interface API

document.getElementById('my-target').append(new DOMParser().parseFromString(data, 'text/html').body.children);

Answer 2

不清楚您要将 html 呈现为 html 还是文本。

我好像记得lit-html does some things behind the scenes to produce secure templates but surprisingly I cannot find official content to back up that statement. Others have asked about this before.

在那GitHub issue we can see that Mike Samuel mentions that what you're doing is not secure.
You can trust Mike Samuel: he's worked in the security field at Google and I had the privilege to listen to one of his talks on the topic two years ago.

这是一个简单的例子：

<p .innerHTML=${'<button onclick="alert(42)">click</button>'}></p>

这会呈现一个按钮，当您单击它时会产生一个警报。在此示例中，JavaScript 代码是无害的，但不难想象更危险的东西。

然而，这只是将代码呈现为字符串。内容以某种方式被转义，因此完全无害。

<p>${'<button onclick="alert(42)">click</button>'}></p>

其实类似于React的dangerouslySetInnerHTML attribute you need to "opt out" from secure templating via lit-html unsafeHTML directive:

Renders the argument as HTML, rather than text.

Note, this is unsafe to use with any user-provided input that hasn't been sanitized or escaped, as it may lead to cross-site-scripting vulnerabilities.

<p>${unsafeHTML('<button onclick="alert(42)">click</button>')}></p>

关于DOMParser#parseFromString

在这个introductory article about trusted-types中我们可以看出这个方法是一个已知的XSS sink。

当然它不会执行 <script> 块，但它不会为您清理字符串。您在这里仍然存在 XSS 风险：

<p .innerHTML="${(new DOMParser()).parseFromString('<button onclick="alert(42)">click</button>','text/html').body.innerHTML}"></p>

JavaScript / Lit-element 安全解析方式 HTML

JavaScript / Lit-element safe way to parse HTML

html

javascript

xss

lit-element