Add trusted types support to lit html

[Siegrift]

Trusted Types

Trusted Types (spec, introductory article) is a new experimental DOM API implemented within the WICG, with a working Chrome implementation.

The API creates a few new objects available on the global object in the browser, like most other web APIs (impl in TS and in Closure compiler).

Under certain conditions, controlled by a HTTP header (analogous to Content-Security-Policy behavior), the API can enable the enforcement - then it changes the signature of several DOM API functions and property setters, such that they accept specific object types, and reject strings. Colloquially, DOM API becomes strongly typed.

For example, with Trusted Types Element.innerHTML property setter accepts a TrustedHTML object.

Trusted Type objects stringify to their inner value. This API shape is a deliberate choice that enables existing web applications and libraries to gradually migrate from strings to Trusted Types without breaking functionality. In our example, it makes it possible to write the following:

const policy = TrustedTypes.createPolicy('foo', { 
  createHTML: (s) => { /* some validation*/; return s} 
});

const trustedHTML = policy.createHTML('bar');
anElement.innerHTML = trustedHTML

anElement.innerHTML === 'bar'

The above code works regardless if the Trusted Types enforcement is enabled or not.

Reading from the DOM is unaffected, so Element.innerHTML getter returns a string. That's for practical reasons -- web applications read from DOM more often than they write to it, and only writing exposes the application to DOM XSS risks. Typing only the setters allows us to secure web applications with minimal code changes.

Adding Trusted Types to Polymer

Polymer is one of the most popular frameworks for building frontend applications. It uses Lit Element and Lit HTML for rendering components.

Lit Element - manipulates dangerous DOM sink only in updating-element.ts (setAttribute, line 543). This place is however under control of user. This means that if user wants to set value for an attribute which can potentially cause XSS and he has enabled Trusted Types enforcement he can use Trusted Value instead of string. That means, that there are no changes required for this module.

Lit HTML - Is a templating library, which converts the template to DOM. There are a few places which need to be changed to enable Trusted Types.

1. Attribute values interpolated in the template are stringified during rendering which forces the Trusted Type value to be stringified (and later be assigned to DOM sink as string). This can be prevented, because we can check whether the value in the template is trusted (without any concatenated values at the beginning or end).
2. When assigning the result of interpolation (string) to innerHTML of template element which will cause an error if Trusted Types are enforced. There is no way user can convert this value to Trusted Type. Instead, we will create a policy for Lit HTML called lit-html and convert this value to Trusted Type internally. Users using polymer only need to add lit-html to the CSP header of Trusted Types.

There is also an option to use unsafeHTML. This however expects users which have Trusted Types enforcement enabled to provide a Trusted Value.
Lastly, place which toggles an boolean attribute which is safe, as boolean attributes can't cause xss and will never require Trusted Values.

[rictic]

This is looking good, and is the way we'd like to implement DOM sanitization long term.

I'd like to see some tests of attribute setting because that can be fairly tricky. Might be good to test property setting too, though I can't see any reason why that wouldn't work.

We'd also be ok having a development dependency on the trusted types polyfill and including that in security tests.

Compare with #750

[rictic]

All right! The resin sanitization hooks have landed. I think this PR should be good to go once the changes in parts.ts are aligned with the similar changes in master

[Siegrift]

@rictic Super excited now :)
I have aligned the changes, is there anything else that I need to update?

[rictic]

Just one suggestion, then I think this is good to go!

@justinfagnani do you want to do a final pass?

[rictic]

A couple more super minor things

[Siegrift]

@rictic @justinfagnani Can you please have a look? I think I resolved all of the comments :)

[rictic]

Great work!

[TimvdLippe]

I think one of these should have been w.TrustedTypes?

[rictic]

Yeah, fixed in #1003