4 ms·
lit-html, a similar HTML templating with template literals library, achieves /mostly/ XSS-safe by default by never interpolating dynamic data before parsing, bu
by spankalee 8y ago
lit-html, a similar HTML templating with template literals library, achieves /mostly/ XSS-safe by default by never interpolating dynamic data before parsing, but interpolating after parsing and DOM construction and then using textContent, not innerHTML.
That means that user-provided text can't inject markup into the page.
There are still a number of sensitive attributes that we want to be automatically sanitized for you, like src/href/on*, but we have the hooks needed for that and just need to add the contextual sanitizer.
- franciscop 8y agoDoes it throw if a template returns a string? While it's a cool feature to be able to do this, it's also quite dangerous (specially when dealing with beginners for this library) to have these two behaving almost the same but one being safe and the other not: // Safe version const header = title => html`<h1>${title}</h1>`; // Unsafe version, but it "works" as expected const header = title => `<h1>${title}</h1>`;
- spankalee 8y agoIt doesn't throw, the unsafe version is just escaped by the browser: Let's consider a container where a function like `header` would be used: const page = (title, body) => html` ${header(title)} <p>${body}</p> `; If you use the safe version, you might get: <h1>Foo</h1> <p>Bar</p> but if you use the unsafe version, you'd get: <h1>Foo</h1> <p>Bar</p> See a demo here: https://stackblitz.com/edit/lit-html-escaping?file=index.js https://stackblitz.com/edit/lit-html-escaping?file=index.js
- franciscop 8y agoAh cool, that works as well from a security point of view. I slightly prefer throwing, but that is highly opinionated.