Validate custom elements in configuration

[0xedward]

When the user specifies set allowCustomElements to true in sanitizer configuration, we want to allow list all custom elements.

When allowCustomElements === false, we want to remove all custom elements from allowElements.

When allowCustomElements === true, we want to check all elements in allowElements are part of https://wicg.github.io/sanitizer-api/#baseline-elements and keep all custom elements in allowElements. We can construct a regex from https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name to determine if an element is a custom element

For example:

config = { "allowElements" : ["a", "script"], "allowCustomElements" : true}

_normalizeConfig(config) // should throw an error because script is not a custom element and is not in DEFAULT_ALLOWED_ELEMENTS

safeConfig = { "allowElements" : ["a", "mycustomelement"], "allowCustomElements" : true}

_normalizeConfig(config) // should return a config with ["a", "mycustomelement"] for allowElements

[thernstig]

@0xedward does this mean that this polyfill does not work at all now if using Custom Elements? So this issue needs to be implemented before it can be used in projects using Custom Elements?

[0xedward]

Hey @thernstig, it's been a while since I worked on this, so my memory might be a bit faulty. The polyfill basically converts the configuration dictionary in the HTML Sanitizer API spec to the equivalent configuration for DOMPurify, then uses DOMPurify to sanitize the input. The polyfill should work if your input has custom elements as long as DOMPurify can handle custom elements without them being specified in its config.

Here's some code pointers for what I mentioned:

sanitizer-polyfill/src/sanitizer.js

Lines 18 to 20 in 319b7a4

	let domPurifyConfig = _transformConfig(config);
	domPurifyConfig.IN_PLACE = true;
	DOMPurify.sanitize(input, domPurifyConfig);

sanitizer-polyfill/src/sanitizer.js

Lines 130 to 161 in 319b7a4

	const _transformConfig = function transformConfig(config) {
	const allowElems = config.allowElements || [];
	const allowAttrs = config.allowAttributes || [];
	const blockElements = config.blockElements || [];
	const dropElements = config.dropElements || [];
	const dropAttrs = config.dropAttributes || [];
	// https://github.com/cure53/DOMPurify/issues/556
	// To drop elements and their children upon sanitization, those elements need to be in both DOMPurify's FORBID_TAGS and FORBID_CONTENTS lists
	const isdropElementsSet =
	dropElements !== DEFAULT_DROP_ELEMENTS && dropElements !== [];
	const isblockElementsSet =
	blockElements !== DEFAULT_BLOCKED_ELEMENTS && blockElements !== [];
	let domPurifyConfig = {
	ALLOWED_TAGS: allowElems,
	ALLOWED_ATTR: allowAttrs,
	FORBID_ATTR: dropAttrs,
	ALLOW_UNKNOWN_PROTOCOLS: true,
	};
	if (isdropElementsSet && !isblockElementsSet) {
	// Set FORBID_CONTENTS to drop all elements in dropElements
	domPurifyConfig.FORBID_TAGS = dropElements;
	domPurifyConfig.FORBID_CONTENTS = dropElements;
	} else if (isdropElementsSet && isblockElementsSet) {
	// Include all dropElements in FORBID_TAGS and specify to only drop elements in dropElements and not elements in blockElements with FORBID_CONTENTS
	const union = new Set(blockElements.concat(dropElements));
	domPurifyConfig.FORBID_TAGS = Array.from(union);
	domPurifyConfig.FORBID_CONTENTS = dropElements;
	} else {
	domPurifyConfig.FORBID_TAGS = blockElements;
	}
	return domPurifyConfig;
	};

[mozfreddyb]

So this issue needs to be implemented before it can be used in projects using Custom Elements?

FWIW, I would not recommend using this polyfill in any kind of production setup. The Sanitizer API is still under heavy development and we're changing quite a few things (e.g., the config syntax in WICG/sanitizer-api#181)