security/raw-html-sink

Dlaczego

Frameworks escape text for you; these escape hatches switch that off. A comment, a profile field or a CMS value that contains <img src=x onerror=…> then runs script in your users' sessions: it can read data on the page, act as the user and steal tokens that script can reach.

Poprawka

Render data as text ({value}, {{ value }}, textContent). When the content must be HTML (CMS rich text, Markdown output), sanitize it on the way in with DOMPurify (DOMPurify.sanitize(html)) and do not modify it afterwards; better, sanitize on the server too. In Angular keep [innerHTML] (it sanitizes) and treat every bypassSecurityTrust* call as a security review item.

Przykłady

// bad
<div dangerouslySetInnerHTML={{ __html: comment.body }} />
// good
<p>{comment.body}</p>
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(article.html) }} />

Źródła

• MDN, Cross-site scripting (XSS)
• React, dangerouslySetInnerHTML
• Vue.js, Security (HTML injection)
• MDN, Element innerHTML (security considerations)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain security/raw-html-sink