Safely render dynamic HTML and prevent XSS

XSS happens when attacker-controlled data is rendered as code. The whole defense is: never let strings cross from data into the executable surface (HTML / JS / event handlers) without a transformation that strips the executable parts.

Three contexts, three rules.

1. HTML body text — escape <, >, &, ", '. textContent, React's {value}, Vue's {{ value }}, and template engines with auto-escaping (Handlebars, Jinja) do this. Stay in this lane by default.

1. HTML attributes — escape the same characters plus the matching quote. Never build attributes by string concatenation; use element.setAttribute or framework binding (<a href={url}> in JSX).

1. JS / URL contexts — <a href="{user}"> is dangerous if user is javascript:alert(1). Allow-list URL schemes (http, https, mailto). Same for src, formaction, xlink:href.

When you must render rich HTML (CMS, comments with formatting, email rendering): sanitize.

import DOMPurify from "dompurify";

const safe = DOMPurify.sanitize(userHtml, {
  ALLOWED_TAGS: ["p", "br", "strong", "em", "a", "ul", "ol", "li", "code"],
  ALLOWED_ATTR: ["href", "title"],
  ALLOWED_URI_REGEXP: /^(https?|mailto):/i,
});

element.innerHTML = safe;            // vanilla
<div dangerouslySetInnerHTML={{__html: safe}} />  // React

Why DOMPurify, not regex. HTML parsing is non-regular. <<script>script>, malformed nesting, SVG namespaces, mutation XSS — all bypass regex filters. DOMPurify uses the browser's HTML parser then walks the tree and removes anything not on the allow-list.

Sanitize once, on the trusted boundary. Store the sanitized form, or sanitize on the way out of the database render path. Never sanitize on the way in AND on the way out — they can disagree and one will lose. Pick a boundary.

The senior layer: Content-Security-Policy. Even if XSS gets through, a strict CSP makes it unexploitable:

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

'nonce-{random}' (re-generated per request) lets your own inline bootstrap scripts run but blocks injected ones. Avoid 'unsafe-inline' and 'unsafe-eval'. Adopt Trusted Types (require-trusted-types-for 'script') on Chromium for an extra mechanical guarantee that nothing can write a string to a sink like innerHTML without going through a vetted policy.

React's "safe by default" — and its gaps.

• {value} is always escaped. dangerouslySetInnerHTML is the explicit opt-out — search your codebase for it.
• <a href={url}> does NOT validate the URL scheme. If url = "javascript:...", React 16+ blocks it; earlier versions don't. Verify the version or validate explicitly.
• href={/path/${id}} is fine; href={user.profileUrl} is suspicious.

XSS sinks to grep for. innerHTML, outerHTML, document.write, insertAdjacentHTML, eval, new Function, setTimeout(string,...), location, element.src for scripts, dangerouslySetInnerHTML, v-html, {@html}.

Storage vs reflected vs DOM-based. Storage XSS persists (DB → page); reflected bounces off a URL parameter; DOM-based runs entirely client-side from a sink like location.hash. Sanitization handles storage and reflected. DOM-based requires audit of the sinks above.