svg elements that not contained in <svg> been removed after 2.2.6

[NateScarlet]

This issue proposes a bug which...

Background & Context

I use DOMPurify to sanitize innerHTML of <g> element

Bug

Input

DOMPurify.sanitize('<polyline points="0 0"></polyline>', { USE_PROFILES: { svg: true } })

Given output

2.2.4: <polyline points="0 0"></polyline>

2.2.6: empty string

Expected output

same as 2.2.4

maybe related to #495, but i can not find a option to specify root namespace.

[cure53]

Hmmm, this should indeed be caused by the referenced PR.

Do you see any way of fixing this with a hook per chance? Not sure if we want to risk more mXSS with a core-patch :)

[NateScarlet]

Need a way to change parent node default

DOMPurify/src/purify.js

Lines 508 to 513 in e1c19cf

	if (!parent || !parent.tagName) {
	parent = {
	namespaceURI: HTML_NAMESPACE,
	tagName: 'template',
	};
	}

wrap input with <svg></svg> then remove it from output can work, but i am not sure this is the right way.

[cure53]

I think wrapping is the way to go for a quick fix - while we think about a secure way of parent name-spacing.

[cure53]

After having looked into this a bit more, I don't think we can patch the core for this to work better with pure SVGs.
For you it'd be two lines of code via a hook, for us its be a whole library rewrite and massive new mXSS risks :D

Unless you have any ideas, maybe?

[NateScarlet]

I found the IN_PLACE option can be used to specify parent element

import DOMPurify, { Config } from 'dompurify';

export default function sanitizeSVG(
  source: string,
  config: Config = {}
): string {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.innerHTML = source;
  DOMPurify.sanitize(svg, { ...config, IN_PLACE: true });
  return svg.innerHTML;
}

Is this secure?
No, </svg><img src="x" onerror="alert(1)"><svg> can bypass this

[NateScarlet]

string wrapping can work in pure svg.

import DOMPurify, { Config } from 'dompurify';

export default function sanitizeSVG(
  source: string,
  config: Config & { RETURN_DOM_FRAGMENT?: false; RETURN_DOM?: false } = {}
): string {
  return DOMPurify.sanitize(`<svg>${source}</svg>`, config).slice(5, -6);
}

But returns wrong result when html tag is allowed, (should return empty string for <p></p> but returns </svg>< )