webc/lit-unsafe-html

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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