Is it possible to preserve case on attributes when filtering XSS?

[ok-martin]

Is there a way to preserve the case of whitelisted attributes when using filterXSS?

Given this code:

const svgText = "<svg id="Art" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.621 248.055"></svg>"

const WHITELIST = {
    svg: ['id', 'xmlns', 'viewBox', 'preserveAspectRatio'],
};

const cleanText = filterXSS(svgText, { whiteList: SVG_TAGS_WHITELIST });

cleanText comes back as <svg viewbox="0 0 209.621 248.055"> instead of <svg viewBox="0 0 209.621 248.055">

I cannot run a specific query that will convert viewbox back to viewBox because it is not the only instance that I need. I have more whitelisted fields and mapping all of them is not feasible.

[lionel-rowe]

It's kinda hacky, but I'm currently handling this by passing an empty attribute list for the XML elements, then handling those elements/attributes separately within onIgnoreTagAttr.

import xss, { escapeAttrValue, getDefaultWhiteList } from 'xss'

/** HTML attributes are case insensitive */
const htmlWhiteList = {
	...getDefaultWhiteList(),
	kbd: [],
	a: ['target', 'href', 'title', 'rel'],
}

/** XML attributes are case sensitive */
const xmlWhiteList = {
	svg: ['width', 'height', 'aria-hidden', 'xmlns', 'viewBox', 'preserveAspectRatio'],
	path: ['d'],
	g: [],
}

const whiteList = {
	...htmlWhiteList,
	...Object.fromEntries(Object.keys(xmlWhiteList).map((tag) => [tag, []])),
}

const xmlAttrCaseMap = new Map(
	Object.entries(xmlWhiteList).map(([tag, attrs]) => [
		tag,
		new Map(attrs.map((attr) => [attr.toLowerCase(), attr])),
	]),
)

function sanitize(input: string) {
	return xss(
		input,
		{
			whiteList,
			onIgnoreTagAttr(tag, attr, value) {
				const caseMap = xmlAttrCaseMap.get(tag)
				if (caseMap != null) {
					const originalAttr = caseMap.get(attr)
					if (originalAttr != null) return `${originalAttr}="${escapeAttrValue(value)}"`
				}
			},
		},
	)
}