XSS in React — dangerouslySetInnerHTML and the specific bugs we see

What it is

Cross-site scripting lets an attacker inject JavaScript that runs in other users' browsers. In React, the default text interpolation is safe. XSS requires opting out of the defaults.

Vulnerable example

// Pattern 1: dangerouslySetInnerHTML with untrusted content
<div dangerouslySetInnerHTML={{ __html: userBio }} />

// Pattern 2: javascript: URL in href
<a href={userLink}>{userLink}</a>
// user submits: javascript:alert(document.cookie)

// Pattern 3: React children from JSON.parse
<div>{JSON.parse(serverData).children}</div>

Fixed example

// 1. Sanitize HTML input with DOMPurify
import DOMPurify from "isomorphic-dompurify";
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userBio) }} />

// 2. Validate the URL protocol
function safeHref(u: string) {
  try { return /^https?:$/.test(new URL(u).protocol) ? u : "#"; }
  catch { return "#"; }
}
<a href={safeHref(userLink)}>{userLink}</a>

// 3. Never render JSX from user-controlled structures
<div>{String(serverData).slice(0, 1000)}</div>

How Securie catches it

// 1. Sanitize HTML input with DOMPurify
import DOMPurify from "isomorphic-dompurify";
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userBio) }} />

// 2. Validate the URL protocol
function safeHref(u: string) {
  try { return /^https?:$/.test(new URL(u).protocol) ? u : "#"; }
  catch { return "#"; }
}
<a href={safeHref(userLink)}>{userLink}</a>

// 3. Never render JSX from user-controlled structures
<div>{String(serverData).slice(0, 1000)}</div>

Checklist

• dangerouslySetInnerHTML only used with DOMPurify-sanitized content
• URL props validated for http/https protocols
• User-controlled data never builds React element structures
• Strict Content-Security-Policy present (defense in depth)
• Server-rendered JSON escaped to avoid closing </script> injection

FAQ

Related guides