lit
[docs] Add info on automatic XSS-prevention / escaped characters
Description
In this article, it mentions that 'lit-html' includes XSS-prevention. That's what lead me to this library. https://benfrain.com/html-templating-with-vanilla-javascript-es2015-template-literals/
Naturally, I wanted to verify that before using lit-html so I searched for 'escape' and 'XSS' in the documentation, but I wasn't able to find any mention of that functionality anywhere.
By trial and error, I found out that lit-html automatically removes tags when using the html tagged template literal.
I also could not find info about the unsafeHTML directive in the docs although it is included in the source code.
lit-html works by building a DOM tree, so injection of whole script elements is not an issue, but there are others.
The known XSS risks are:
- attacker controls value for the unsafeHTML directive; the string
<img src=bogus onerror=alert(document.origin)>can inject code even though straightforward<script>injection fails. - attacker controls text in sensitive locations:
html`<script>${ x }</script>` - attacker controls values for sensitive attributes like
html`<iframe srcdoc=${ x }>`orhtml`<script src=${ x }></script>` - attacker controls values assigned to sensitive properties like
html`<div .innerHTML=${ x }>` attacker controls string that reaches event handlers likehtml`<button @onclick=${ x }>`- attacker controls CSS which in other contexts has leaked information about page content.
The team is aware of those risks and is working on addressing them.
On diving deeper, it turns out html`<button @onclick=${ x }>` is not problematic.
Will edit my summary.
Is there any official documentation on the security/threat model of lit-html? I feel this is very important information and would be very useful to include as a section on the official website: https://lit-html.polymer-project.org
@lastmjs https://github.com/Polymer/polymer-resin#readme captures my threat modelling when I wrote resin. I don't speak for the Polymer project though.
