@shgysk8zer0/polyfills 0.0.8 → 0.1.0

package/assets/Sanitizer.js

@@ -1,7 +1,7 @@
 /**
  * @copyright 2022-2023 Chris Zuber <admin@kernvalley.us>
  */
-import { nativeSupport, getSantizerUtils, sanitize, sanitizeFor, trustPolicies } from './sanitizerUtils.js';
+import { nativeSupport, getSantizerUtils, sanitize, trustPolicies } from './sanitizerUtils.js';
 import { SanitizerConfig as defaultConfig } from './SanitizerConfigW3C.js';
 
 const protectedData = new WeakMap();
@@ -43,11 +43,13 @@ export class Sanitizer {
 	}
 
 	sanitize(input) {
-		return sanitize(input, { config: this.getConfiguration() });
+		return sanitize(input, this.getConfiguration());
 	}
 
 	sanitizeFor(tag, content) {
-		return sanitizeFor(tag, content, { config: this.getConfiguration() });
+		const el = document.createElement(tag);
+		el.setHTML(content, this.getConfiguration());
+		return el;
 	}
 
 	static getDefaultConfiguration() {

package/assets/adoptedStylesheets.js

@@ -0,0 +1,53 @@
+/**
+ * This **REQUIRES** a CSP with `style-src blob:`
+ */
+export const adoptedStyleSheets = {
+	get() {
+		return Array.from(this.styleSheets)
+			.filter(sheet => sheet.ownerNode.classList.contains('_adopted'));
+	},
+	set(sheets) {
+		if (! Array.isArray(sheets)) {
+			throw new TypeError('Must be an array');
+		} else {
+			const current = new Set(this.adoptedStyleSheets);
+
+			current.difference(sheets).forEach(sheet => sheet.ownerNode.remove());
+
+			const links = [...new Set(sheets).difference(current)].map(sheet => {
+				const link = document.createElement('link');
+				const controller = new AbortController();
+				const signal = controller.signal;
+				const url = URL.createObjectURL(new File([], 'adopted.css', { type: 'text/css' }));
+				link.rel = 'stylesheet';
+				link.href = url;
+				link.classList.add('_adopted');
+				link.disabled = sheet.disabled;
+
+
+				link.addEventListener('load', ({ target }) => {
+					controller.abort();
+					link.media = sheet.media.mediaText;
+					[...sheet.cssRules].forEach((rule, index) => {
+						target.sheet.insertRule(rule.cssText, index);
+					});
+
+					setTimeout(() => URL.revokeObjectURL(target.href), 100);
+				}, { once: true, signal });
+
+				link.addEventListener('error', ({ target }) => {
+					controller.abort();
+					URL.revokeObjectURL(target.href);
+				}, { once: true, signal });
+
+				return link;
+			});
+
+			if (this instanceof Document) {
+				this.head.append(...links);
+			} else {
+				this.append(...links);
+			}
+		}
+	}
+};

package/assets/namespaces.js

@@ -0,0 +1,6 @@
+export const HTML = 'http://www.w3.org/1999/xhtml';
+export const SVG = 'http://www.w3.org/2000/svg';
+export const MathML = 'http://www.w3.org/1998/Math/MathML';
+export const XML = 'http://www.w3.org/XML/1998/namespace';
+export const XMLNS = 'http://www.w3.org/2000/xmlns/';
+export const XSLT = 'http://www.w3.org/1999/XSL/Transform';

package/assets/sanitizerUtils.js

@@ -9,6 +9,11 @@ import { urls } from './attributes.js';
 export const supported = () => 'Sanitizer' in globalThis;
 export const nativeSupport = supported();
 
+export const setHTML = function setHTML(el, input, opts = defaultConfig) {
+	const doc = safeParseHTML(input, opts);
+	el.append(documentToFragment(doc));
+};
+
 const allowProtocols = ['https:'];
 
 if (! allowProtocols.includes(location.protocol)) {
@@ -18,166 +23,190 @@ const policyName = 'sanitizer-raw#html';
 const getPolicy = callOnce(() => createPolicy(policyName, { createHTML: input => input }));
 const createHTML = input => getPolicy().createHTML(input);
 
-function documentToFragment(doc) {
+export function documentToFragment(doc) {
 	const frag = document.createDocumentFragment();
 	const clone = doc.cloneNode(true);
 	frag.append(...clone.head.childNodes, ...clone.body.childNodes);
 	return frag;
 }
 
-export function sanitize(input, { config = defaultConfig } = {}) {
+/**
+ * Helper function to adapt to changes in spec
+ */
+export function convertSanitizerConfig({
+	allowAttributes, allowComments, allowElements, allowCustomElements,
+	blockElements, dropAttributes, dropElements, allowUnknownMarkup, sanitizer,
+} = {}, context) {
+	if (sanitizer instanceof Sanitizer) {
+		return convertSanitizerConfig(sanitizer.getConfiguration(), context);
+	} else {
+		switch (context) {
+			default:
+				if (typeof allowAttributes === 'undefined' && typeof dropAttributes === 'undefined') {
+					allowAttributes = defaultConfig.allowAttributes;
+				}
+
+				if (typeof allowElements === 'undefined' && typeof dropElements === 'undefined') {
+					allowElements = defaultConfig.allowElements;
+				}
+				return {
+					allowAttributes, allowComments, allowElements, allowCustomElements,
+					blockElements, dropAttributes, dropElements, allowUnknownMarkup,
+				};
+		}
+	}
+}
+
+export function convertToSanitizerConfig({
+	allowAttributes, allowComments, allowElements, allowCustomElements,
+	blockElements, dropAttributes, dropElements, allowUnknownMarkup,
+} = {}) {
+	if (typeof allowAttributes === 'undefined' && typeof dropAttributes === 'undefined') {
+		allowAttributes = defaultConfig.allowAttributes;
+	}
+
+	if (typeof allowElements === 'undefined' && typeof dropElements === 'undefined') {
+		allowElements = defaultConfig.allowElements;
+	}
+	return {
+		allowAttributes, allowComments, allowElements, allowCustomElements,
+		blockElements, dropAttributes, dropElements, allowUnknownMarkup,
+	};
+}
+
+export function safeParseHTML(input, opts = defaultConfig) {
+	const doc = new DOMParser().parseFromString(createHTML(input), 'text/html');
+	// Not sure if this will be in spec, but it is necessary
+	if (Array.isArray(opts.allowElements) && ! opts.allowElements.includes('html') ) {
+		opts.allowElements = [...new Set([...opts.allowElements, 'html' ,'head', 'body'])];
+	}
+	return sanitizeNode(doc, opts);
+}
+
+export function sanitize(input, opts = defaultConfig) {
 	if (! (input instanceof Node)) {
 		throw new TypeError('sanitize requires a Document or DocumentFragment');
 	} else if (input.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-		return sanitizeNode(input, config);
+		return sanitizeNode(input, opts);
 	} else if (input.nodeType === Node.DOCUMENT_NODE) {
-		return sanitizeNode(documentToFragment(input), { config });
+		return sanitizeNode(documentToFragment(input), opts);
 	} else {
 		throw new TypeError('sanitize requires a Document or DocumentFragment');
 	}
 }
 
-export function sanitizeFor(tag, content, { config = defaultConfig } = {}) {
+export function sanitizeFor(tag, content, opts = defaultConfig) {
 	const el = document.createElement(tag);
 	const temp = document.createElement('template');
 	temp.innerHTML = createHTML(content);
-	el.append(sanitize(temp.content, { config }));
+	el.append(sanitize(temp.content, opts));
 	return el;
 }
 
-export function sanitizeNode(node, { config = defaultConfig } = {}) {
+export function sanitizeNode(root, opts = defaultConfig) {
 	try {
-		if (! (node instanceof Node)) {
-			throw new TypeError(`Expected a Node but got a ${getType(node)}.`);
-		} else if (! isObject(config)) {
-			throw new TypeError(`Expected config to be an object but got ${getType(config)}.`);
+		if (! (root instanceof Node)) {
+			throw new TypeError(`Expected a Node but got a ${getType(root)}.`);
+		} else if (! isObject(opts)) {
+			throw new TypeError(`Expected config to be an object but got ${getType(opts)}.`);
 		}
 
 		const {
 			allowElements, allowComments, allowAttributes, allowCustomElements,
 			blockElements, dropAttributes, dropElements, allowUnknownMarkup,
-		} = config;
-
-		switch(node.nodeType) {
-			case Node.TEXT_NODE:
-				break;
-
-			case Node.ELEMENT_NODE: {
-				if (
-					! allowUnknownMarkup
-					&& ( ! (node instanceof HTMLElement) || node instanceof HTMLUnknownElement)
-				) {
-					node.remove();
-					break;
-				}
-
-				const tag = node.tagName.toLowerCase();
+		} = convertSanitizerConfig(opts);
 
-				if (Array.isArray(dropElements) && dropElements.includes(tag)) {
-					node.remove();
-				} else if (Array.isArray(blockElements) && blockElements.includes(tag)) {
-					if (node.hasChildNodes()) {
-						[...node.childNodes].forEach(node => sanitizeNode(node, config));
-						node.replaceWith(...node.childNodes);
-					} else {
-						node.remove();
-					}
-				} else if (tag.includes('-') && ! allowCustomElements) {
-					node.remove();
-				} else if (Array.isArray(allowElements) && ! allowElements.includes(tag)) {
-					node.remove();
-				} else if (tag === 'template') {
-					sanitizeNode(node.content, config);
-				} else {
-					if (node.hasAttributes()) {
-						node.getAttributeNames()
-							.forEach(attr => sanitizeNode(node.getAttributeNode(attr), config));
-					}
-
-					if (node.hasChildNodes()) {
-						[...node.childNodes].forEach(node => sanitizeNode(node, config));
-					}
-				}
+		const iter = document.createNodeIterator(
+			root,
+			NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT,
+		);
 
-				break;
-			}
+		let node = iter.root.nodeType === Node.ELEMENT_NODE
+			? iter.root
+			: iter.nextNode();
 
-			case Node.ATTRIBUTE_NODE: {
-				const { value, ownerElement } = node;
-				const name = node.name.toLowerCase();
-				const tag = ownerElement.tagName.toLowerCase();
-
-				if (
-					urls.includes(name)
-					&& ! allowProtocols.includes(new URL(value, document.baseURI).protocol)
-				) {
-					ownerElement.removeAttributeNode(node);
-				} else if (isObject(dropAttributes)) {
+		while (node instanceof Node) {
+			switch(node.nodeType) {
+				case Node.ELEMENT_NODE: {
 					if (
-						name in dropAttributes
-						&& ['*', tag].some(sel => dropAttributes[name].includes(sel))
+						! allowUnknownMarkup
+						&& ( ! (node instanceof HTMLElement) || node instanceof HTMLUnknownElement)
 					) {
-						ownerElement.removeAttributeNode(node);
-
-						if (name.startsWith('on')) {
-							delete ownerElement[name];
-						}
+						node.remove();
+						break;
 					}
-				} else if (isObject(allowAttributes)) {
-					if (
-						! name.startsWith('data-')
-						&& ! (name in allowAttributes
-						&& ['*', tag].some(sel => allowAttributes[name].includes(sel)))
-					) {
-						ownerElement.removeAttributeNode(node);
 
-						if (name.startsWith('on')) {
-							delete ownerElement[name];
+					const tag = node.tagName.toLowerCase();
+
+					if (Array.isArray(dropElements) && dropElements.includes(tag)) {
+						node.remove();
+					} else if (Array.isArray(blockElements) && blockElements.includes(tag)) {
+						if (node.hasChildNodes()) {
+							node.replaceWith(...node.childNodes);
+						} else {
+							node.remove();
+						}
+					} else if (tag.includes('-') && ! allowCustomElements) {
+						node.remove();
+					} else if (Array.isArray(allowElements) && ! allowElements.includes(tag)) {
+						node.remove();
+					} else {
+						if (node.hasAttributes()) {
+							node.getAttributeNames().forEach(name => {
+								const attr = node.getAttributeNode(name);
+								const { value } = attr;
+
+								if (
+									urls.includes(name)
+									&& ! allowProtocols.includes(new URL(value, document.baseURI).protocol)
+								) {
+									node.removeAttributeNode(attr);
+								} else if (isObject(dropAttributes)) {
+									if (
+										name in dropAttributes
+										&& ['*', tag].some(sel => dropAttributes[name].includes(sel))
+									) {
+										node.removeAttributeNode(attr);
+									}
+								} else if (isObject(allowAttributes)) {
+									if (
+										! (name in allowAttributes
+										&& ['*', tag].some(sel => allowAttributes[name].includes(sel)))
+									) {
+										node.removeAttributeNode(attr);
+									}
+								}
+							});
 						}
 					}
-				}
-
-				break;
-			}
 
-			case Node.COMMENT_NODE: {
-				if (! allowComments) {
-					node.remove();
+					break;
 				}
 
-				break;
-			}
+				case Node.COMMENT_NODE: {
+					if (! allowComments) {
+						node.remove();
+					}
 
-			case Node.DOCUMENT_NODE:
-			case Node.DOCUMENT_FRAGMENT_NODE: {
-				if (node.hasChildNodes()) {
-					[...node.childNodes].forEach(node => sanitizeNode(node, config));
+					break;
 				}
-
-				break;
 			}
 
-			case Node.CDATA_SECTION_NODE:
-			case Node.PROCESSING_INSTRUCTION_NODE:
-			case Node.DOCUMENT_TYPE_NODE:
-			default: {
-				node.parentElement.removeChild(node);
+			if (node.localName === 'template') {
+				sanitizeNode(node.content, opts);
 			}
+
+			node = iter.nextNode();
 		}
+
+		return root;
 	} catch(err) {
-		node.parentElement.removeChild(node);
 		console.error(err);
+		root.parentElement.removeChild(root);
 	}
-
-	return node;
 }
 
 export function getSantizerUtils(Sanitizer, defaultConfig) {
-	const setHTML = function setHTML(el, input, { sanitizer = new Sanitizer() } = {}) {
-		const div = sanitizer.sanitizeFor('div', input);
-		el.replaceChildren(...div.children);
-	};
-
 	const polyfill = function polyfill() {
 		let polyfilled = false;
 
@@ -225,37 +254,24 @@ export function getSantizerUtils(Sanitizer, defaultConfig) {
 					} else if (! [Node.DOCUMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(input.nodeType)) {
 						throw new TypeError('Expected a Document or DocumentFragment in `Sanitizer.sanitize()`.');
 					} else {
-						return sanitize(input, { config: this.getConfiguration() });
+						return sanitize(input, this.getConfiguration());
 					}
 				};
 				polyfilled = true;
 			}
 
-			if (
-				! (globalThis.Sanitizer.prototype.sanitizeFor instanceof Function)
-				&& Element.prototype.setHTML instanceof Function
-			) {
-				globalThis.Sanitizer.prototype.sanitizeFor = function(element, input) {
-					const el = document.createElement(element);
-					el.setHTML(input, { sanitizer: this });
-					return el;
-				};
-				polyfilled = true;
-			} else if (! (globalThis.Sanitizer.prototype.sanitizeFor instanceof Function)) {
+			if (! (globalThis.Sanitizer.prototype.sanitizeFor instanceof Function)) {
 				globalThis.Sanitizer.prototype.sanitizeFor = function(element, input) {
 					const el = document.createElement(element);
-					const tmp = document.createElement('template');
-					tmp.innerHTML = createHTML(input);
-					el.append(this.sanitize(tmp.content));
+					setHTML(el, input,this.getConfiguration());
 					return el;
 				};
 				polyfilled = true;
 			}
 
 			if (! (Element.prototype.setHTML instanceof Function)) {
-				Element.prototype.setHTML = function(input, { sanitizer = new globalThis.Sanitizer() } = {}) {
-					const el = sanitizer.sanitizeFor('div', input);
-					this.replaceChildren(...el.children);
+				Element.prototype.setHTML = function(input, opts = defaultConfig) {
+					setHTML(this, input, opts);
 				};
 				polyfilled = true;
 			}

package/deprecated/sanitizer.js

@@ -0,0 +1,3 @@
+import { polyfill, trustPolicies } from '../assets/Sanitizer.js';
+export const polyfilled = polyfill();
+export { trustPolicies };

package/element.js

@@ -1,4 +1,7 @@
 import { aria } from './aom.js';
+import { overwriteMethod } from './utils.js';
+import { SanitizerConfig as defaultConfig } from './assets/SanitizerConfigW3C.js';
+import { setHTML as safeSetHTML, convertToSanitizerConfig } from './assets/sanitizerUtils.js';
 
 if (! (HTMLScriptElement.supports instanceof Function)) {
 	HTMLScriptElement.supports = function supports(type) {
@@ -123,22 +126,21 @@ if (! (HTMLImageElement.prototype.decode instanceof Function)) {
 	};
 }
 
-if (
-	! (Element.prototype.setHTML instanceof Function)
-	&& 'Sanitizer' in globalThis
-	&& globalThis.Sanitizer.prototype.sanitizeFor instanceof Function
-) {
-	Element.prototype.setHTML = function setHTML(input, { sanitizer = new globalThis.Sanitizer() } = {}) {
-		if (
-			('Sanitizer' in globalThis && sanitizer instanceof globalThis.Sanitizer)
-			|| (typeof sanitizer !== 'undefined' && sanitizer.sanitizeFor instanceof Function)
-		) {
-			const el = sanitizer.sanitizeFor(this.tagName.toLowerCase(), input);
-			this.replaceChildren(...el.children);
-		} else {
-			throw new TypeError('`sanitizer` is not a valid Sanitizer');
-		}
+if (! (Element.prototype.setHTML instanceof Function)) {
+	Element.prototype.setHTML = function setHTML(input, opts = defaultConfig) {
+		safeSetHTML(this, input, opts);
 	};
+} else {
+	overwriteMethod(Element.prototype, 'setHTML', function(orig) {
+		return function setHTML(input, opts = {}) {
+			if (! (opts.sanitizer instanceof Sanitizer)) {
+				const sanitizer = new Sanitizer(convertToSanitizerConfig(opts));
+				orig.call(this, input, { sanitizer });
+			} else {
+				orig.call(this, input, opts);
+			}
+		};
+	});
 }
 
 if (! HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/polyfills",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "private": false,
   "type": "module",
   "description": "A collection of JavaScript polyfills",
@@ -50,10 +50,8 @@
   },
   "homepage": "https://github.com/shgysk8zer0/polyfills#readme",
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.1",
-    "eslint": "^8.40.0",
+    "@shgysk8zer0/js-utils": "^1.0.0",
     "htmlhint": "^1.1.4",
-    "http-server": "^14.1.1",
-    "rollup": "^3.23.0"
+    "http-server": "^14.1.1"
   }
 }

package/rollup.config.js

@@ -1,12 +1,8 @@
 /* eslint-env node */
-import terser from '@rollup/plugin-terser';
+import { getConfig } from '@shgysk8zer0/js-utils/rollup';
 
-export default {
-	input: 'all.js',
-	output: {
-		file: 'all.min.js',
-		format: 'iife',
-		sourcemap: true,
-	},
-	plugins: [terser()],
-};
+export default getConfig('./all.js', {
+	sourcemap: true,
+	minify: true,
+	format: 'iife',
+});

package/utils.js

@@ -7,3 +7,25 @@ export function polyfillMethod(parent, name, value, {
 		Object.defineProperty(parent, name, { value, writable, enumerable, configurable });
 	}
 }
+
+export function polyfillGetterSetter(parent, name, {
+	get,
+	set,
+	enumerable = true,
+	configurable = true,
+} = {}) {
+	if (! parent.hasOwnProperty(name)) {
+		Object.defineProperty(parent, name, { get, set, enumerable, configurable });
+	}
+}
+
+export function overwriteMethod(parent, name, func) {
+	const { value,  enumerable, configurable, writable } = Object.getOwnPropertyDescriptor(parent, name);
+	const newMethod = func(value);
+
+	if (! (newMethod instanceof Function)) {
+		throw new TypeError(`Error overwriting ${name}. The func MUST be a function that accepts the original as an argument and return a function.`);
+	} else {
+		Object.defineProperty(parent, name, { value: newMethod,  enumerable, configurable, writable });
+	}
+}

package/sanitizer.js

@@ -1,3 +0,0 @@
-import { polyfill, trustPolicies } from './assets/Sanitizer.js';
-export const polyfilled = polyfill();
-export { trustPolicies };