解析 HTML 的 JavaScript / Lit-element 安全方法

Question

I am getting some html from my server that I want to put into my page. However I want it to be sanitized (just in case).

However I am not quite sure how to do this.

So far I've tried:

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

Since that should parse it as HTML but I am not 100% sure that this is the best way.

I have also looked at online sanitizers but haven't been able to find any that match my project ( Lit-element web component).

Is there a better way to parse HTML and if so how?

Answer 1

看一看DOMParser接口API

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

Answer 2

It's not clear whether you want to render the html as html or as text.

I seem to remember that 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 .

In that 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 .

Here's a quick example:

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

This renders a button which produces an alert when you click on it. In this example the JavaScript code is harmless but it's not hard to imagine something way more dangerous.

However this simply renders the code as string. The content is somehow escaped and therefore totally harmless.

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

In fact similar to React's 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>

---

About DOMParser#parseFromString

In this introductory article about trusted-types we can see that this method is a known XSS sink.

Sure it won't execute <script> blocks but it won't sanitise the string for you. You are still at risk of XSS here:

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