@shgysk8zer0/polyfills 0.0.2

package/assets/sanitizerUtils.js

@@ -0,0 +1,270 @@
+/**
+ * @copyright 2023 Chris Zuber <admin@kernvalley.us>
+ */
+import { SanitizerConfig as defaultConfig } from './SanitizerConfigW3C.js';
+import { createPolicy } from './trust.js';
+import { isObject, getType, callOnce } from './utility.js';
+import { urls } from './attributes.js';
+
+export const supported = () => 'Sanitizer' in globalThis;
+export const nativeSupport = supported();
+
+const allowProtocols = ['https:'];
+
+if (! allowProtocols.includes(location.protocol)) {
+	allowProtocols.push(location.protocol);
+}
+const policyName = 'sanitizer-raw#html';
+const getPolicy = callOnce(() => createPolicy(policyName, { createHTML: input => input }));
+const createHTML = input => getPolicy().createHTML(input);
+
+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 } = {}) {
+	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);
+	} else if (input.nodeType === Node.DOCUMENT_NODE) {
+		return sanitizeNode(documentToFragment(input), { config });
+	} else {
+		throw new TypeError('sanitize requires a Document or DocumentFragment');
+	}
+}
+
+export function sanitizeFor(tag, content, { config = defaultConfig } = {}) {
+	const el = document.createElement(tag);
+	const temp = document.createElement('template');
+	temp.innerHTML = createHTML(content);
+	el.append(sanitize(temp.content, { config }));
+	return el;
+}
+
+export function sanitizeNode(node, { config = 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)}.`);
+		}
+
+		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();
+
+				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));
+					}
+				}
+
+				break;
+			}
+
+			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)) {
+					if (
+						name in dropAttributes
+						&& ['*', tag].some(sel => dropAttributes[name].includes(sel))
+					) {
+						ownerElement.removeAttributeNode(node);
+
+						if (name.startsWith('on')) {
+							delete ownerElement[name];
+						}
+					}
+				} 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];
+						}
+					}
+				}
+
+				break;
+			}
+
+			case Node.COMMENT_NODE: {
+				if (! allowComments) {
+					node.remove();
+				}
+
+				break;
+			}
+
+			case Node.DOCUMENT_NODE:
+			case Node.DOCUMENT_FRAGMENT_NODE: {
+				if (node.hasChildNodes()) {
+					[...node.childNodes].forEach(node => sanitizeNode(node, config));
+				}
+
+				break;
+			}
+
+			case Node.CDATA_SECTION_NODE:
+			case Node.PROCESSING_INSTRUCTION_NODE:
+			case Node.DOCUMENT_TYPE_NODE:
+			default: {
+				node.parentElement.removeChild(node);
+			}
+		}
+	} catch(err) {
+		node.parentElement.removeChild(node);
+		console.error(err);
+	}
+
+	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;
+
+		if (! supported()) {
+			globalThis.Sanitizer = Sanitizer;
+			polyfilled = true;
+		} else {
+			if (! (globalThis.Sanitizer.getDefaultConfiguration instanceof Function)) {
+				globalThis.Sanitizer.getDefaultConfiguration = function() {
+					return defaultConfig;
+				};
+				polyfilled = true;
+			}
+
+			if (! (globalThis.Sanitizer.prototype.getConfiguration instanceof Function)) {
+				const configs = new WeakMap();
+				const SanitizerNative = globalThis.Sanitizer;
+
+				globalThis.Sanitizer = class Sanitizer extends SanitizerNative {
+					constructor({
+						allowAttributes, allowComments, allowElements, allowCustomElements,
+						blockElements, dropAttributes, dropElements, allowUnknownMarkup,
+					} = SanitizerNative.getDefaultConfiguration()) {
+						super({
+							allowAttributes, allowComments, allowElements, allowCustomElements,
+							blockElements, dropAttributes, dropElements, allowUnknownMarkup,
+						});
+						configs.set(this, {
+							allowAttributes, allowComments, allowElements, allowCustomElements,
+							blockElements, dropAttributes, dropElements, allowUnknownMarkup,
+						});
+					}
+
+					getConfiguration() {
+						return configs.get(this);
+					}
+				};
+				polyfilled = true;
+			}
+
+			if (! (globalThis.Sanitizer.prototype.sanitize instanceof Function)) {
+				globalThis.Sanitizer.prototype.sanitize = function(input) {
+					if (! (input instanceof Node)) {
+						throw new TypeError('`Sanitizer.sanitize()` expects a `Node`');
+					} 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() });
+					}
+				};
+				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)) {
+				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));
+					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);
+				};
+				polyfilled = true;
+			}
+		}
+
+		return polyfilled;
+	};
+
+	return { setHTML, polyfill };
+}
+
+export const trustPolicies = [policyName];

package/assets/trust.js

@@ -0,0 +1,190 @@
+/**
+ * @copyright 2023 Chris Zuber <admin@kernvalley.us>
+ */
+import { callOnce } from './utility.js';
+
+export function setProp(el, prop, val, {
+	policy,
+} = {}) {
+	switch(getPropertyType(el.tagName, prop)) {
+		case 'TrustedScript':
+			el[prop] = createScript(val, { policy });
+			break;
+
+		case 'TrustedScriptURL':
+			el[prop] = createScriptURL(val, { policy });
+			break;
+
+		case 'TrustedHTML':
+			el[prop] = createHTML(val, { policy });
+			break;
+
+		default:
+			el[prop] = val;
+	}
+}
+
+export function setAttr(el, attr, val, {
+	elementNs,
+	policy,
+} = {}) {
+	switch(getAttributeType(el.tagName, attr, elementNs)) {
+		case 'TrustedScriptURL':
+			if (typeof elementNs === 'string') {
+				el.setAttributeNs(elementNs, attr, createScriptURL(val, { policy }));
+			} else {
+				el.setAttribute(attr, createScriptURL(val, { policy }));
+			}
+			break;
+
+		case 'TrustedScript':
+			if (typeof elementNs === 'string') {
+				el.setAttributeNS(elementNs, attr, createScript(val, { policy }));
+			} else {
+				el.setAttribute(attr, createScript(val, { policy }));
+			}
+			break;
+
+		case 'TrustedHTML':
+			if (typeof elementNs === 'string') {
+				el.setAttributeNS(elementNs, attr, createHTML(val, { policy }));
+			} else {
+				el.setAttribute(attr, createHTML(val, { policy }));
+			}
+			break;
+
+		default:
+			if (typeof elementNs === 'string') {
+				el.setAttributeNS(elementNs, attr, val);
+			} else {
+				el.setAttribute(attr, val);
+			}
+	}
+}
+
+export function supported() {
+	return 'trustedTypes' in globalThis
+		&& trustedTypes instanceof EventTarget
+		&& trustedTypes.createPolicy instanceof Function;
+}
+
+export function isTrustPolicy(policy) {
+	if ('TrustedTypePolicy' in globalThis && policy instanceof TrustedTypePolicy) {
+		return true;
+	} else {
+		return policy != null && policy.createHTML instanceof Function;
+	}
+}
+
+export function hasDefaultPolicy() {
+	return supported() && isTrustPolicy(trustedTypes.defaultPolicy);
+}
+
+export function getAttributeType(tagName, attribute, elementNs) {
+	if (supported()) {
+		return trustedTypes.getAttributeType(tagName.toLowerCase(), attribute, elementNs);
+	} else {
+		return null;
+	}
+}
+
+export function getPropertyType(tagName, property) {
+	if (supported()) {
+		return trustedTypes.getPropertyType(tagName.toLowerCase(), property);
+	} else {
+		return null;
+	}
+}
+
+export function isHTML(input) {
+	if (supported()) {
+		return trustedTypes.isHTML(input);
+	} else {
+		return typeof input === 'string';
+	}
+}
+
+export function isScript(input) {
+	if (supported()) {
+		return trustedTypes.isScript(input);
+	} else {
+		return typeof input === 'string';
+	}
+}
+
+export function isScriptURL(input) {
+	if (supported()) {
+		return trustedTypes.isScriptURL(input);
+	} else {
+		return typeof input === 'string' || input instanceof URL;
+	}
+}
+
+export function isTrustedType(input) {
+	if (supported()) {
+		return trustedTypes.isHTML(input) || trustedTypes.isScript(input) || trustedTypes.isScriptURL(input);
+	} else {
+		return true;
+	}
+}
+
+export function createHTML(input, { policy = getDefaultPolicy() } = {}) {
+	if (isTrustPolicy(policy) && ! isHTML(input)) {
+		return policy.createHTML(input);
+	} else {
+		return input;
+	}
+}
+
+export function createScript(input, { policy = getDefaultPolicy() } = {}) {
+	if (isTrustPolicy(policy) && ! isScript(input)) {
+		return policy.createScript(input);
+	} else {
+		return input;
+	}
+}
+
+export function createScriptURL(input, { policy = getDefaultPolicy() } = {}) {
+	if (isTrustPolicy(policy) && ! isScriptURL(input)) {
+		return policy.createScriptURL(input);
+	} else {
+		return input;
+	}
+}
+
+export function createPolicy(name, {
+	createHTML = () => {
+		throw new TypeError('This policy does not provide `createHTML()`');
+	},
+	createScript = () => {
+		throw new TypeError('This policy does not provide `createScript()`');
+	},
+	createScriptURL = () => {
+		throw new TypeError('This policy does not provide `createScriptURL()`');
+	},
+}) {
+	if (supported()) {
+		return trustedTypes.createPolicy(name, { createHTML, createScript, createScriptURL });
+	} else {
+		return Object.freeze({
+			name,
+			createHTML: (input, ...args) => createHTML(input.toString(), ...args),
+			createScript: (input, ...args) => createScript(input.toString(), ...args),
+			createScriptURL: (input, ...args) => createScriptURL(input.toString(), ...args),
+		});
+	}
+}
+
+export function getDefaultPolicy() {
+	if (supported()) {
+		return trustedTypes.defaultPolicy;
+	} else {
+		return null;
+	}
+}
+
+export const createHTMLPolicyGetter = (name, cb) => callOnce(() => createPolicy(name, { createHTML: cb }));
+
+export const createScriptPolicyGetter = (name, cb) => callOnce(() => createPolicy(name, { createScript: cb }));
+
+export const createScriptURLPolicyGetter = (name, cb) => callOnce(() => createPolicy(name, { createScriptURL: cb }));

package/assets/utility.js

@@ -0,0 +1,101 @@
+const funcs = new WeakMap();
+
+export const between = (min, val, max) => typeof val === 'number' && val >= min && val <= max;
+
+export function getDeferred() {
+	if (Promise.withResolvers instanceof Function) {
+		return Promise.withResolvers();
+	} else {
+		const def = {};
+		def.promise = new Promise((resolve, reject) => {
+			def.resolve = resolve;
+			def.reject = reject;
+		});
+
+		return def;
+	}
+}
+
+export function isAsyncFunction(what) {
+	return what instanceof Function && what.constructor.name === 'AsyncFunction';
+}
+
+export function isAsync(what) {
+	return isAsyncFunction(what) || what instanceof  Promise;
+}
+
+export function isObject(thing) {
+	return typeof thing === 'object' && ! Object.is(thing, null) && ! Array.isArray(thing);
+}
+
+export function getType(thing) {
+	switch (typeof thing) {
+		case 'undefined':
+			return 'Undefined';
+
+		case 'function':
+			if ('prototype' in thing) {
+				return getType(thing.prototype);
+			} else if ('constructor' in thing) {
+				return thing.constructor.name;
+			} else {
+				return 'Function';
+			}
+
+		case 'object':
+			if (Object.is(thing, null)) {
+				return 'Null';
+			} else if ('constructor' in thing) {
+				return thing.constructor.name;
+			} else if (Symbol.toStringTag in thing) {
+				return thing[Symbol.toStringTag];
+			} else if ('prototype' in thing) {
+				return  getType(thing.prototype);
+			} else {
+				console.log(thing);
+				return 'Unknown Object';
+			}
+
+		case 'string':
+			return 'String';
+
+		case 'number':
+			return Number.isNaN(thing) ? 'NaN' : 'Number';
+
+		case 'bigint':
+			return 'BigInt';
+
+		case 'boolean':
+			return 'Boolean';
+
+		case 'symbol':
+			return 'Symbol';
+
+		default:
+			return 'Unknown';
+	}
+}
+
+export function callOnce(callback, thisArg) {
+	if (callback.once instanceof Function) {
+		return callback.once(thisArg);
+	} else {
+		return function(...args) {
+			if (funcs.has(callback)) {
+				return funcs.get(callback);
+			} else if (isAsyncFunction(callback)) {
+				const retVal = callback.apply(thisArg || this, args).catch(err => {
+					funcs.delete(callback);
+					throw err;
+				});
+
+				funcs.set(callback, retVal);
+				return retVal;
+			} else if (callback instanceof Function) {
+				const retVal = callback.apply(thisArg || this, args);
+				funcs.set(callback, retVal);
+				return retVal;
+			}
+		};
+	}
+}

package/cookieStore.js

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

package/crypto.js

@@ -0,0 +1,8 @@
+if (crypto in globalThis && ! (crypto.randomUUID instanceof Function)) {
+	crypto.randomUUID = function randomUUID() {
+		'use strict';
+		return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+			(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+		);
+	};
+}

package/dialog.js

@@ -0,0 +1,63 @@
+(function() {
+	'use strict';
+
+	if (document.createElement('dialog') instanceof HTMLUnknownElement && ! HTMLUnknownElement.prototype.hasOwnProperty('open')) {
+		HTMLUnknownElement.prototype.show = function() {
+			this.open = true;
+		};
+
+		HTMLUnknownElement.prototype.close = function(returnValue = null) {
+			this.open = false;
+			if (this.tagName === 'DIALOG') {
+				const event = new CustomEvent('close');
+
+				if (typeof returnValue === 'string') {
+					event.returnValue = true;
+					this.returnValue = returnValue;
+				}
+				this.dispatchEvent(event);
+				delete this.returnValue;
+			}
+		};
+
+		Object.defineProperty(HTMLUnknownElement.prototype, 'open', {
+			set: function(open) {
+				if (this.tagName === 'DETAILS') {
+					this.dispatchEvent(new CustomEvent('toggle'));
+					this.toggleAttribute('open', open);
+				} else if (this.tagName === 'DIALOG') {
+					this.toggleAttribute('open', open);
+					if (! open) {
+						this.classList.remove('modal');
+						const next = this.nextElementSibling;
+						if (next instanceof HTMLElement && next.matches('.backdrop')) {
+							next.remove();
+						}
+					}
+				}
+			},
+			get: function() {
+				return this.hasAttribute('open');
+			}
+		});
+	}
+
+	if (! (document.createElement('dialog').showModal instanceof Function)) {
+		HTMLUnknownElement.prototype.showModal = function() {
+			const controller = new AbortController();
+			const signal = controller.signal;
+			document.addEventListener('keydown', function escapeHandle({ key }) {
+				if (key === 'Escape') {
+					this.close();
+				}
+			}, { passive: true, signal });
+
+			this.addEventListener('close', () => controller.abort(), { once: true, signal });
+			this.open = true;
+			this.classList.add('modal');
+			const backdrop = document.createElement('div');
+			backdrop.classList.add('backdrop');
+			this.after(backdrop);
+		};
+	}
+})();