DOM XSS, Trusted Types and HTML sanitizers

Cross-site scripting is first in MITRE’s 2025 CWE Top 25, and one kind of it can run without your server ever seeing the text: in DOM XSSDOM XSS: Cross-site scripting in which the page's own script reads text from a source such as the address or a message and writes it into the page through a sink such as innerHTML, so the server never sees it. the page’s own script takes text from the address, a message or storage and writes it into the page with a call such as innerHTML. Three habits close it. Write text with calls that cannot make markup. Make the browser refuse plain strings at the risky calls with Trusted TypesTrusted Types: A browser feature that makes risky sinks accept only values made by a named policy, such as TrustedHTML, and throw a TypeError for a plain string. A Content Security Policy directive switches it on.. And run the few pieces of HTML that people must supply through HTML sanitizers that you did not write.

You will find the sources and sinks of a small page script, rewrite the sinks, test a Trusted Types policy and its rollout, choose between text, a small markup and a sanitizer for rich notes, and check who sends your page a message.

DOM XSS is a source reaching a sink, and three habits close it

A notes viewer shows a title from the query string and a note from the part of the address after the # sign. Both are sources, places where text can enter the page’s script from outside its own code. The address, document.referrer, window.name, messages from other windows, web storage and responses from the server are the usual ones. A sinksink: A place in code where text is handed to an interpreter: a query, a page, a command, a header, an export, a log line or a template. Each sink needs a safe API, parameters or that interpreter's own encoding. More in “Injection: keep data out of code” is a call that turns text into something the browser acts on: innerHTML, outerHTML, insertAdjacentHTML, document.write, eval, a timer given a string, or an address assigned to href, src or location. DOM XSS is cross-site scripting where the browser’s own script, not the server, writes the harmful text into the page. The server never sees the part after the # sign, so no filter or log on the server can catch text that arrives there. The program below is a first sink inventory for browser code. It notes which variables hold text from a source and reports each place where that text reaches a sink:

// A first sink inventory for browser code. It reads a page script line by line, notes which variables hold text from a
// source (the address, a message, storage), and reports each place where such text reaches a sink. Real tools follow
// the data through functions and files; this one matches names, which is enough to show the shape of the problem.
const SOURCES = [
  [/location\.(?:hash|search|href)/, 'the address'],
  [/params\.get\(/, 'the query string'],
  [/document\.referrer/, 'the referrer'],
  [/window\.name/, 'window.name'],
  [/event\.data/, 'a message'],
  [/(?:local|session)Storage\.getItem\(/, 'web storage'],
];
const SINKS = [
  [/\.(?:innerHTML|outerHTML)\s*=/, 'HTML', 'textContent, or createElement and append'],
  [/\.insertAdjacentHTML\(/, 'HTML', 'insertAdjacentText, or createElement'],
  [/document\.write(?:ln)?\(/, 'HTML', 'DOM methods'],
  [/\b(?:eval|new Function)\(/, 'code', 'JSON.parse, or a function'],
  [/set(?:Timeout|Interval)\(\s*['"`]/, 'code', 'a function, not a string'],
  [/\.(?:href|src|action)\s*=/, 'URL', 'an allowlist of schemes'],
];

function scan(name, lines) {
  const tainted = new Map(); // variable -> the source it came from
  const found = [];
  const reviews = [];
  lines.forEach((line, i) => {
    const source = SOURCES.find(([re]) => re.test(line))?.[1];
    const declared = /^(?:const|let|var)\s+(\w+)\s*=/.exec(line)?.[1];
    const viaVariable = [...tainted].find(([v]) => new RegExp(`\\b${v}\\b`).test(line.replace(/^(?:const|let|var)\s+\w+\s*=/, '')))?.[1];
    const origin = source ?? viaVariable;
    if (declared && origin) tainted.set(declared, origin);
    const sink = SINKS.find(([re]) => re.test(line));
    if (!sink) return;
    const wrapped = /\bsafe\w*\(/.test(line);
    const kind = { HTML: 'an HTML', code: 'a code', URL: 'a URL' }[sink[1]];
    if (origin && !wrapped) found.push(`line ${i + 1}: ${origin} reaches ${kind} sink; use ${sink[2]}`);
    else if (wrapped) reviews.push(`line ${i + 1}: ${kind} sink behind a checking function; read the function`);
  });
  console.log(`${name}: ${found.length} flow${found.length === 1 ? '' : 's'} from a source to a sink, ${reviews.length} to review`);
  for (const text of [...found, ...reviews]) console.log(`  ${text}`);
}

const weak = [
  "const params = new URLSearchParams(location.search);",
  "const title = params.get('title');",
  "const note = decodeURIComponent(location.hash.slice(1));",
  "heading.innerHTML = '<h2>' + title + '</h2>';",
  "body.insertAdjacentHTML('beforeend', note);",
  "link.href = params.get('next');",
  "setTimeout('refresh(' + params.get('id') + ')', 1000);",
  "window.addEventListener('message', (event) => { preview.innerHTML = event.data; });",
  "status.textContent = 'Loaded ' + title;",
];
const fixed = [
  "const params = new URLSearchParams(location.search);",
  "const title = params.get('title');",
  "const note = decodeURIComponent(location.hash.slice(1));",
  "heading.textContent = title;",
  "body.append(note);",
  "link.href = safeUrl(params.get('next'));",
  "setTimeout(() => refresh(Number(params.get('id'))), 1000);",
  "window.addEventListener('message', (event) => { if (event.origin === APP) preview.textContent = String(event.data); });",
  "status.textContent = 'Loaded ' + title;",
];
scan('weak page script', weak);
scan('fixed page script', fixed);

weak page script: 5 flows from a source to a sink, 0 to review
  line 4: the query string reaches an HTML sink; use textContent, or createElement and append
  line 5: the address reaches an HTML sink; use insertAdjacentText, or createElement
  line 6: the query string reaches a URL sink; use an allowlist of schemes
  line 7: the query string reaches a code sink; use a function, not a string
  line 8: a message reaches an HTML sink; use textContent, or createElement and append
fixed page script: 0 flows from a source to a sink, 1 to review
  line 6: a URL sink behind a checking function; read the function

The weak script has five flows, and each line of the report names the call that does the same job safely. The fixed script has none, and one sink behind a checking function for a person to read. Real analysers follow data through functions and files; this one only matches names. Three habits close what a scan finds. The first is to write text with textContent, which makes a text node and no markup. The second is Trusted Types, a browser feature that makes the risky sinks accept only values made by a named policy and throw on a plain string. The third is for the case where people must supply formatting. HTML sanitizersHTML sanitizer: A library or browser feature that parses HTML and rebuilds it from an allowlist of tags and attributes, so formatting can stay while script is removed. It filters markup and does not sandbox script. parse the markup and rebuild it from an allowlist of tags and attributes. Use a maintained one, because a sanitizer is the kind of code that new browser behaviour breaks. The first habit is the easiest to see, so step through one note that travels from the address to the page, first through innerHTML and then through textContent.

In the second run the note arrived as characters and no element was made, which is all the first habit has to do.

Rewrite each unsafe sink with the safe call that does the same job Pro: opens with a Pro, Premium or Ultimate pass