XSS & safe DOM updates

What XSS means

Cross-site scripting, usually shortened to XSS, happens when untrusted data reaches a browser feature that treats it as code. A search query, comment, profile field, API value, URL hash, stored draft, or message event should stay data. If your code puts that value into an HTML, URL, or JavaScript sink without checking the context, the browser may create elements, run handlers, navigate to a script URL, or evaluate a string.

This lesson teaches the attacker mindset only for defense. Ask, “If this string were chosen by someone hostile, where could it enter, which sink would parse it, and what would stop it?” Never test on real sites without permission. The safe demos here set flags inside a sandbox or print text so you can prove behavior without harm.

Why it matters: script running in a user’s page can read data the page can read, send actions as that user, change the DOM they trust, or steal tokens that were placed where JavaScript can reach them. The fix is the same principle throughout this module: never trust input; validate, encode, sanitize, and restrict what the browser is allowed to run.

XSS analysis starts by drawing a line from a source to a sink. Sources are places untrusted data can enter: URL query parameters and hashes, form fields, API responses, postMessage data, localStorage, copied rich text, or anything saved by another user. Sinks are browser APIs that parse strings as HTML, URLs, or JavaScript.

1// Sources: places untrusted data can enter your code.2const fromUrl = new URLSearchParams(location.search).get("q");3const fromHash = location.hash.slice(1);4const fromStorage = localStorage.getItem("draft-comment");5const fromMessage = event.data; // only after checking event.origin6const fromApi = await response.json();7 8// Dangerous sinks: strings become code or markup.9output.innerHTML = fromUrl;10card.outerHTML = fromApi.html;11panel.insertAdjacentHTML("beforeend", fromStorage);12document.write(fromHash);13link.href = fromUrl; // dangerous when the scheme is javascript:14setTimeout(fromMessage, 0); // string form evaluates code

The three classic categories name where the source-to-sink path lives. Reflected XSS bounces a value from the request into the response, such as a search term. Stored XSS saves the value first, such as a profile bio or comment that later readers load. DOM-based XSS happens in client-side JavaScript, often from location.hash, postMessage, storage, or API data. In every case the bug is still “untrusted data reached an unsafe sink.”

1const payload = '<button onclick="window.xssRan = true">Run handler</button>';2const host = document.querySelector("#comment-output");3 4window.xssRan = false;5host.innerHTML = payload;6host.querySelector("button")?.click();7console.log("innerHTML handler ran:", window.xssRan === true);8 9window.xssRan = false;10host.textContent = payload;11host.querySelector("button")?.click();12console.log("textContent handler ran:", window.xssRan === true);13 14window.scriptRan = false;15host.innerHTML = "<script>window.scriptRan = true;<\/script>";16console.log("script inserted with innerHTML ran:", window.scriptRan === true);

Chrome, like other modern browsers, does not execute <script> elements inserted through innerHTML. That fact does not make innerHTML safe. Event handler attributes such as onclick or onerror, dangerous URL schemes, SVG/MathML edges, and markup that changes the page can still matter. The demo uses a synchronous onclick and .click() so the proof is deterministic; a classic <img onerror> payload is asynchronous and less reliable for tests.

If you are rendering plain text into an HTML string, escape the characters that have meaning in that context. For an HTML body or a quoted HTML attribute, that means at least &, <, >, double quotes, and single quotes. Escape ampersands first so you do not double-interpret entity text.

1const htmlEscapes = {Run2  "&": "&amp;",3  "<": "&lt;",4  ">": "&gt;",5  '"': "&quot;",6  "'": "&#39;",7};8 9function escapeHtml(value) {10  return String(value).replace(/[&<>"']/g, (character) => htmlEscapes[character]);11}12 13const comment = 'Tom & <img src=x onerror="console.log(\'XSS ran\')">';14console.log(escapeHtml(comment));

1const htmlEscapes = {2  "&": "&amp;",3  "<": "&lt;",4  ">": "&gt;",5  '"': "&quot;",6  "'": "&#39;",7};8 9function escapeHtml(value) {10  return String(value).replace(/[&<>"']/g, (character) => htmlEscapes[character]);11}12 13const comment = 'Tom & <img src=x onerror="console.log(\'XSS ran\')">';14console.log(escapeHtml(comment));

Escaping is context-specific. HTML body text, quoted attributes, URLs, JavaScript string literals, and CSS values all have different rules. Do not use one helper everywhere and call the page safe. Prefer DOM APIs that avoid string contexts entirely: textContent for text, setAttribute for known-safe attributes, classList for classes, and event listeners for behavior.

1const user = '<img src=x onerror="console.log(1)">';2 3// HTML body context: encode markup characters.4message.innerHTML = escapeHtml(user);5 6// Attribute context: quote the attribute and escape quotes.7card.setAttribute("aria-label", user);8 9// URL context: parse and allow only expected schemes.10link.href = safeUrlAttribute(userUrl);11 12// JavaScript and CSS contexts: do not build code or style text with user data.13button.addEventListener("click", () => save(user));

URLs need parsing, not string prefix checks. Use the URL object with a known base and allow only schemes your feature needs. For ordinary links in this lesson, the allowlist is http:, https:, and mailto:. Reject javascript:, data:, unknown protocols, and parse errors.

1function safeUrlAttribute(raw, base = "https://completefrontend.com/javascript/xss") {2  try {3    const url = new URL(raw, base);4    if (["http:", "https:", "mailto:"].includes(url.protocol)) return url.href;5  } catch {6    return "about:blank";7  }8  return "about:blank";9}10 11console.log(safeUrlAttribute("/profile?user=ada"));12console.log(safeUrlAttribute("mailto:help@example.com"));13console.log(safeUrlAttribute("javascript:console.log('XSS ran')"));

Sometimes the product really does allow markup: rich-text comments, CMS snippets, formatted help text, link previews, or a profile bio with bold and links. In that case, escaping would show the tags instead of formatting. A sanitizer parses the HTML, keeps a small allowlist, removes unsafe attributes, validates URL schemes, and serializes the clean result.

1import DOMPurify from "dompurify";2 3const clean = DOMPurify.sanitize(dirtyHtml, {4  USE_PROFILES: { html: true },5  ALLOWED_TAGS: ["b", "i", "a", "p", "ul", "li"],6  ALLOWED_ATTR: ["href"],7});8 9preview.innerHTML = clean;

DOMPurify’s documented API is DOMPurify.sanitize(dirty), with an optional configuration object such as { USE_PROFILES: { html: true } }. It is a maintained library and the production answer for broad browser support. It is not installed in this workspace, so the snippet is intentionally non-runnable.

1const target = document.querySelector("#rich-output");2const dirty = '<b>Hello</b> <img src=x onerror="console.log(1)">';3 4if ("setHTML" in Element.prototype) {5  target.setHTML(dirty);6  console.log("setHTML output:", target.innerHTML);7} else {8  console.log("setHTML unavailable: use DOMPurify or another sanitizer");9}

Regex-based “sanitizers” fail because HTML is not a regular language in the way browsers parse it. Attributes, entity decoding, nested tags, namespace rules, and broken markup all change the tree the browser builds. This links back to when not to use a regex: parsing languages with nested structure is the wrong job for a quick pattern.

1const dirty = '<img src=x onerror="console.log(1)"><scr' + 'ipt>console.log(2)</scr' + 'ipt>';2const withoutScripts = dirty.replace(/<script.*?>.*?<\/script>/gi, "");3console.log(withoutScripts);

1const allowedTags = new Set(["B", "I", "A"]);Run2const allowedSchemes = new Set(["http:", "https:", "mailto:"]);3const sample = 'Hello <b onclick="x()">bold</b> <a href="javascript:alert(1)">bad</a> <a href="https://example.com">ok</a>';4 5function sanitizeTeachingHtml(html) {6  const parsed = parseToNodes(html);7  const cleanNodes = parsed.flatMap(cleanNode);8  return cleanNodes.join("");9}10 11console.log(sanitizeTeachingHtml(sample));12 13function parseToNodes(_html) {14  return [15    { type: "text", text: "Hello " },16    { type: "element", tag: "B", children: [{ type: "text", text: "bold" }] },17    { type: "text", text: " " },18    { type: "element", tag: "A", href: "javascript:alert(1)", children: [{ type: "text", text: "bad" }] },19    { type: "text", text: " " },20    { type: "element", tag: "A", href: "https://example.com", children: [{ type: "text", text: "ok" }] },21  ];22}23 24function cleanNode(node) {25  if (node.type === "text") return [node.text];26  if (!allowedTags.has(node.tag)) return node.children.flatMap(cleanNode);27  const href = node.tag === "A" && allowedUrl(node.href) ? ` href="${node.href}" rel="noopener noreferrer"` : "";28  const body = node.children.flatMap(cleanNode).join("");29  return [`<${node.tag.toLowerCase()}${href}>${body}</${node.tag.toLowerCase()}>`];30}31 32function allowedUrl(value) {33  try {34    return allowedSchemes.has(new URL(value, "https://example.com/").protocol);35  } catch {36    return false;37  }38}

1function isSafeUrl(value) {2  try {3    const url = new URL(value, "https://example.com/");4    return ["http:", "https:", "mailto:"].includes(url.protocol);5  } catch {6    return false;7  }8}9 10function sanitizeTeachingHtml(dirtyHtml) {11  const allowedTags = new Set(["B", "I", "A"]);12  const dropWithChildren = new Set(["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "SVG", "MATH"]);13  const parser = new DOMParser();14  const parsed = parser.parseFromString(dirtyHtml, "text/html");15  const output = document.createElement("template");16 17  function cleanInto(node, parent) {18    if (node.nodeType === Node.TEXT_NODE) {19      parent.append(document.createTextNode(node.textContent ?? ""));20      return;21    }22    if (node.nodeType !== Node.ELEMENT_NODE) return;23    if (dropWithChildren.has(node.tagName)) return;24    if (!allowedTags.has(node.tagName)) {25      node.childNodes.forEach((child) => cleanInto(child, parent));26      return;27    }28 29    const clean = document.createElement(node.tagName.toLowerCase());30    if (node.tagName === "A") {31      const href = node.getAttribute("href")?.trim() ?? "";32      if (isSafeUrl(href)) {33        clean.setAttribute("href", href);34        clean.setAttribute("rel", "noopener noreferrer");35      }36    }37    node.childNodes.forEach((child) => cleanInto(child, clean));38    parent.append(clean);39  }40 41  parsed.body.childNodes.forEach((child) => cleanInto(child, output.content));42  const wrapper = document.createElement("div");43  wrapper.append(output.content.cloneNode(true));44  return wrapper.innerHTML;45}46 47const dirty = 'Hello <b onclick="x()">bold</b> <i>friend</i> ' +48  '<a href="javascript:alert(1)" onclick="x()">bad</a> ' +49  '<a href="https://example.com">ok</a>' +50  '<' + 'script>console.log("x")</' + 'script><img src=x onerror="x()">';51console.log(sanitizeTeachingHtml(dirty));

Trusted Types is a browser guardrail for DOM XSS. With the CSP directive require-trusted-types-for 'script', dangerous sinks such as innerHTML reject plain strings. Code must pass a TrustedHTML object made by a named policy, usually after sanitizing.

1if (!window.trustedTypes) {2  throw new Error("Trusted Types are not available in this browser");3}4 5const target = document.querySelector("#trusted-target");6try {7  target.innerHTML = "<b>plain string</b>";8  throw new Error("Trusted Types enforcement is not active");9} catch (error) {10  console.log(error.name);11  throw error;12}

1if (window.trustedTypes) {2  const policy = trustedTypes.createPolicy("lesson", {3    createHTML(value) {4      return value;5    },6  });7 8  const target = document.querySelector("#trusted-target");9  target.innerHTML = policy.createHTML("<b>Trusted Types policy output</b>");10  console.log(target.textContent);11} else {12  console.log("Trusted Types unavailable: keep escaping and sanitizing");13}

Policies are review points. A production policy should call a sanitizer and return the sanitized string. Avoid a default policy that blindly trusts every string; that only hides mistakes. A web check for this lesson found broad current support in Chromium-based browsers, with current Firefox and Safari status improving, but older browsers and embedded webviews vary. Always feature-detect window.trustedTypes and keep your escaping and sanitizing defenses.

Content Security Policy, or CSP, is a browser policy delivered as an HTTP header or a limited meta tag. It tells the browser which scripts, frames, objects, bases, and connections are allowed. CSP is defense in depth: it reduces impact when a rendering bug slips through, but it does not replace escaping, URL validation, sanitizing, or code review.

1Content-Security-Policy:2  default-src 'self';3  script-src 'nonce-r4nd0m' 'strict-dynamic';4  object-src 'none';5  base-uri 'self';6  frame-ancestors 'none';7  require-trusted-types-for 'script';8  trusted-types lesson dompurify;

default-src is the fallback. script-src should use nonces or hashes for scripts you intentionally ship; 'strict-dynamic' lets nonce-trusted scripts load their own trusted descendants in modern browsers. object-src 'none' removes old plugin surfaces. base-uri 'self' blocks injected <base> tags from rewriting relative URLs. frame-ancestors controls who may embed your page. require-trusted-types-for 'script' turns on the Trusted Types sink checks.

Real-world patterns

Comment widgets, search result pages, rich-text editors, link previews, support inboxes, notification templates, and analytics dashboards all render data that someone else can influence. The pattern is boring on purpose: identify the source, choose the safest sink, validate URLs, sanitize only when markup is required, and add Trusted Types plus CSP so mistakes are easier to catch.

1// React escapes text in JSX by default.2function Comment({ author, body }) {3  return <article><h3>{author}</h3><p>{body}</p></article>;4}5 6// Escape hatches put you back in charge of sanitizing.7function RichComment({ sanitizedHtml }) {8  return <article dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;9}10 11// Vue's {{ message }} escapes. v-html renders HTML and needs sanitized input.

Frameworks help but do not make you invincible. React escapes text in JSX. Vue’s mustache syntax escapes text. But React’s dangerouslySetInnerHTML, Vue’s v-html, Svelte’s {@html ...} block, raw DOM refs, and string templates put you back in charge. Review template literals, eval and dynamic code, postMessage origin checks, web storage, and the concurrent tiny reactive UI lesson when you build renderers.

Common misconceptions

• “Scripts inserted with innerHTML do not run, so innerHTML is safe.” Event handler attributes, dangerous URLs, and other active markup still matter.
• “Escaping once makes data safe everywhere.” Escaping is context-specific. HTML, URL, JavaScript, and CSS contexts are different.
• “Sanitizing means removing script tags.” A sanitizer needs an allowlist for tags, attributes, and URL schemes. Regex removal is not enough.
• “Trusted Types sanitizes for me.” Trusted Types rejects plain strings. Your policy must still sanitize or construct safe HTML.
• “CSP fixes XSS.” CSP limits what can run and reports violations. It is a backstop, not the primary rendering defense.
• “Frameworks eliminate XSS.” Auto-escaping helps until you use escape hatches, raw DOM APIs, unvalidated URLs, or unsafe templates.

Key takeaways

• XSS is a data-to-code bug. Start every review by tracing untrusted sources to parsing or execution sinks.
• Use textContent, safe bindings, and DOM construction for plain text. Avoid HTML strings when you can.
• Escape for the exact context; validate URLs with new URL() and a scheme allowlist.
• When user HTML is required, use a maintained allowlist sanitizer. The teaching sanitizer shows the decisions, not a production guarantee.
• Trusted Types makes dangerous DOM sinks reject plain strings, and CSP limits what can run. They are defense in depth, not replacements for safe rendering.

One-line summary: keep untrusted data from running as code by choosing safe sinks first, sanitizing only when markup is required, and adding browser policies as guardrails.

Up next: CSRF, cookies, and tokens. That lesson protects authenticated requests after this one keeps the page from running attacker-controlled code.