How do you prevent XSS in React applications?

React is safe-by-default for the most common XSS vectors, but the protection has known gaps. The interview question is: what are the gaps, and how do you close them at scale?

What React handles for you.

• {value} in JSX auto-escapes <, >, &, ", ' when rendering text content and attributes. <div>{userInput}</div> is safe.
• Attribute injection via JSX is escaped — <a title={user.bio}> can't break out.

The seven holes in React's safety.

1. dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: userHtml }} />

Bypasses escaping entirely. Required for CMS / rich-text rendering. Sanitize first with DOMPurify:

import DOMPurify from "dompurify";
const safe = DOMPurify.sanitize(userHtml);
<div dangerouslySetInnerHTML={{ __html: safe }} />

Grep your repo: grep -rn "dangerouslySetInnerHTML" src/. Each instance is a security review.

2. Attacker-controlled URLs in href / src.

<a href={user.profileUrl}>...</a>  // user.profileUrl = "javascript:alert(1)"

React 16.9+ blocks javascript: URLs and warns. Don't rely on it — versions in production may differ, and the rule isn't applied to all attribute contexts (xlink:href, dynamic SVGs, <iframe srcdoc>). Validate:

function safeUrl(u: string) {
  try {
    const url = new URL(u, location.origin);
    return ["http:", "https:", "mailto:"].includes(url.protocol) ? u : "#";
  } catch { return "#"; }
}

3. eval, new Function, setTimeout(string), setInterval(string).

setTimeout(userCode, 100);  // executes user-controlled string as code

Ban via ESLint (no-eval, no-implied-eval). CSP script-src without 'unsafe-eval' makes them throw at runtime.

4. Direct DOM manipulation via refs.

ref.current.innerHTML = userContent;

Bypasses React entirely. Same sanitization rule as dangerouslySetInnerHTML. Lint for .innerHTML =.

5. SSR / hydration mismatches.

When server renders user content into the HTML and client re-hydrates, an attacker-supplied value that's valid HTML but bad JS context can run. Server-side escaping has the same rules as client.

6. JSON in script tags (SSR bootstrap data).

<script>window.__STATE__ = {{state}}</script>

If state contains </script><script>, it breaks out. Encode < as \u003c:

JSON.stringify(state).replace(/</g, "\\u003c")

7. Markdown / template / templating libraries.

The renderer must be configured to sanitize output (most don't by default). react-markdown allows HTML pass-through unless you disable it. Audit every renderer.

The defense-in-depth layer: Content-Security-Policy.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{server-random}';
  object-src 'none';
  base-uri 'self';
  frame-ancestors 'self';

Even if XSS gets through sanitization, the injected <script> can't run without the matching nonce. Adopt:

• 'nonce-{random}' per response, attached to your own scripts.
• No 'unsafe-inline', no 'unsafe-eval'.
• object-src 'none' blocks Flash/PDF embeds (legacy XSS vectors).
• base-uri 'self' prevents base-tag injection.
• For new Chromium: require-trusted-types-for 'script' — refuses any string-to-sink write that doesn't go through a vetted policy.

Trusted Types. The 2026 mechanical answer.

const policy = trustedTypes.createPolicy("default", {
  createHTML: (s) => DOMPurify.sanitize(s),
});
element.innerHTML = policy.createHTML(userHtml);
// Without the policy, the browser refuses the write.

Once enabled via CSP, EVERY innerHTML / document.write / etc., must accept only TrustedHTML. Eliminates entire categories of XSS by construction.

Programmatic enforcement.

• eslint-plugin-react + eslint-plugin-security — flag dangerouslySetInnerHTML usage and eval patterns.
• Type a wrapper: type SafeHtml = { __brand: "safe" } & string and require DOMPurify output to produce it.
• CodeQL / Semgrep in CI for XSS sinks across the codebase.

Senior framing. The candidate should name (1) React's defaults, (2) the seven holes, (3) DOMPurify on the unsafe path, (4) CSP + Trusted Types as defense-in-depth, (5) lint + audit tooling as the scale strategy. Sanitization at input AND output is a trap — pick one boundary.