Chapter 1 · Practice 1 of 4
Know where XSS still gets into framework apps
Why it matters
React, Vue, Angular and server templates escape text by default, which removed the classic "print the query string into the page" bug. OWASP's XSS Prevention Cheat Sheet points at what is left: the places where a framework hands you raw DOM access.
| Source | Example |
|---|---|
| Escape hatches | React dangerouslySetInnerHTML, Vue v-html, Angular bypassSecurityTrustHtml |
| DOM sinks in your own code | innerHTML, outerHTML, insertAdjacentHTML, document.write |
| URLs | <a href={userUrl}> with a javascript: URL |
| Code sinks | eval, new Function, setTimeout with a string |
| Third-party widgets | a markdown renderer or rich text editor with raw HTML enabled |
| Server-rendered JSON | state embedded in a <script> tag without escaping < |
A source is where attacker data comes from (URL, postMessage, API data, storage); a sink is the API that interprets it as HTML or code. DOM XSS happens entirely in the browser, so server-side scanners often miss it.
Search your codebase for the sinks above. Each match is either removable, or a place that needs sanitization and a review comment explaining why it is safe.
Do
- Search the codebase for innerHTML, v-html and dangerouslySetInnerHTML
- Treat URL params, postMessage data and API responses as sources
- Escape < when embedding JSON state in a script tag