webc/lit-unsafe-html

Why

A Lit expression such as ${comment} is always rendered as text. unsafeHTML(comment) parses it as markup instead: a comment, a product description or a URL parameter that contains <img src=x onerror=…> runs script in the page with the user's session.

Fix

Render data with a normal expression (${comment}) and build structure with templates. When rich text must be shown, sanitize it first (unsafeHTML(DOMPurify.sanitize(html)), or the Sanitizer API's setHTML() where supported) and keep that in one helper. Use unsafeStatic only with constants, such as a tag name chosen from a fixed list.

Examples

// bad
render() { return html`<div class="comment">${unsafeHTML(this.comment.body)}</div>` }
// good
render() { return html`<div class="comment">${this.comment.body}</div>` }

Sources

• Lit, Built-in directives (unsafeHTML, unsafeSVG)
• Lit, Expressions (static expressions and unsafeStatic)

Read it in the terminal

npx github:dawidolko/frontend-skills explain webc/lit-unsafe-html