@segnavia/html 0.26.0 → 0.28.0

package/dist/sanitize-css.js

@@ -0,0 +1,308 @@
+import { cssEscape, cssTokens } from "./css-tokens.js";
+//#region src/sanitize-css.ts
+const DATA_IMAGE = /^data:image\//i;
+const DATA_FONT = /^data:(?:font\/[^;,]+|application\/(?:x-)?font-[^;,]+)(?:[;,])/i;
+const DECLARATION_AT_RULES = /* @__PURE__ */ new Set([
+	"counter-style",
+	"font-face",
+	"font-palette-values",
+	"page",
+	"property"
+]);
+const FETCH_FUNCTIONS = [
+	"url",
+	"src",
+	"image-set",
+	"-webkit-image-set"
+];
+const FETCH_AT_KEYWORDS = ["import"];
+const FETCH_CONSTRUCT = new RegExp(`@(?:${FETCH_AT_KEYWORDS.join("|")})|(?:${FETCH_FUNCTIONS.join("|")})\\(`, "gi");
+const FETCH_FUNCTION_SET = new Set(FETCH_FUNCTIONS);
+const FETCH_AT_KEYWORD_SET = new Set(FETCH_AT_KEYWORDS);
+function normalizedUrl(value, decodeEscapes = true) {
+	let normalized = "";
+	for (let at = 0; at < value.length;) if (value.startsWith("/*", at)) {
+		const close = value.indexOf("*/", at + 2);
+		at = close < 0 ? value.length : close + 2;
+	} else if (decodeEscapes && value[at] === "\\") {
+		const escaped = cssEscape(value, at);
+		normalized += escaped[0];
+		at = escaped[1];
+	} else normalized += value[at++] ?? "";
+	normalized = normalized.trim();
+	if ((normalized[0] === "\"" || normalized[0] === "'") && normalized.at(-1) === normalized[0]) normalized = normalized.slice(1, -1);
+	return [...normalized].filter((character) => character.charCodeAt(0) > 32 && character.charCodeAt(0) !== 127).join("").toLowerCase();
+}
+function decodedCss(source) {
+	let decoded = "";
+	for (let at = 0; at < source.length;) if (source[at] === "\\") {
+		const escaped = cssEscape(source, at);
+		decoded += escaped[0];
+		at = escaped[1];
+	} else decoded += source[at++] ?? "";
+	return decoded.replace(/\/\*[\s\S]*?(?:\*\/|$)/g, "").replace(/\s+/g, " ").toLowerCase();
+}
+function functionArgument(value) {
+	let depth = 1;
+	let quote = "";
+	for (let at = 0; at < value.length; at++) {
+		const character = value[at] ?? "";
+		if (quote) {
+			if (character === quote) quote = "";
+			continue;
+		}
+		if (character === "\"" || character === "'") quote = character;
+		else if (character === "(") depth++;
+		else if (character === ")" && --depth === 0) return value.slice(0, at);
+	}
+	return value;
+}
+function imageSetItems(value) {
+	const items = [];
+	let start = 0;
+	let depth = 0;
+	let quote = "";
+	for (let at = 0; at < value.length; at++) {
+		const character = value[at] ?? "";
+		if (quote) {
+			if (character === quote) quote = "";
+			continue;
+		}
+		if (character === "\"" || character === "'") quote = character;
+		else if (character === "(") depth++;
+		else if (character === ")") depth--;
+		else if (character === "," && depth === 0) {
+			items.push(value.slice(start, at));
+			start = at + 1;
+		}
+	}
+	items.push(value.slice(start));
+	return items;
+}
+function allowedAuditData(value, dataFonts) {
+	let argument = value.trimStart();
+	if (/^url\(/i.test(argument)) argument = functionArgument(argument.slice(argument.indexOf("(") + 1)).trimStart();
+	argument = argument.replace(/^["']/, "");
+	return DATA_IMAGE.test(argument) || dataFonts && DATA_FONT.test(argument);
+}
+function lexicalFindings(source, dataFonts) {
+	const text = decodedCss(source);
+	const found = [];
+	for (const match of text.matchAll(FETCH_CONSTRUCT)) {
+		const construct = match[0].toLowerCase();
+		const after = text.slice((match.index ?? 0) + construct.length);
+		if (construct.startsWith("@")) {
+			if (!allowedAuditData(after, dataFonts)) found.push(construct);
+			continue;
+		}
+		const name = construct.slice(0, -1);
+		const argument = functionArgument(after);
+		if (!(name === "image-set" || name === "-webkit-image-set" ? imageSetItems(argument).every((item) => allowedAuditData(item, dataFonts)) : allowedAuditData(argument, dataFonts))) found.push(`${name === "-webkit-image-set" ? "image-set" : name}()`);
+	}
+	return [...new Set(found)];
+}
+function matchingClose(list, open, limit = list.length) {
+	let depth = 1;
+	for (let at = open + 1; at < limit; at++) {
+		if (list[at]?.kind === "open" || list[at]?.kind === "function") depth++;
+		if (list[at]?.kind === "close" && --depth === 0) return at;
+	}
+	return limit;
+}
+function unsafeImageSet(list, start, close) {
+	let depth = 0;
+	for (let at = start + 1; at < close; at++) {
+		const token = list[at];
+		if (token?.kind === "function" || token?.kind === "open") depth++;
+		else if (token?.kind === "close") depth--;
+		else if (token?.kind === "string" && depth === 0 && !DATA_IMAGE.test(normalizedUrl(token.value, false))) return true;
+	}
+	return false;
+}
+function urlFinding(value, dataFonts, fontFace, finding = "url()") {
+	if (DATA_IMAGE.test(value)) return void 0;
+	if (fontFace && DATA_FONT.test(value)) return dataFonts ? void 0 : "data font";
+	return finding;
+}
+function functionFinding(source, list, at, end, dataFonts, fontFace) {
+	const token = list[at];
+	if (token?.kind === "bad-url") return "url()";
+	if (token?.kind === "url") return urlFinding(token.value, dataFonts, fontFace);
+	if (token?.kind !== "function") return void 0;
+	const close = matchingClose(list, at, end);
+	if (!FETCH_FUNCTION_SET.has(token.value)) return void 0;
+	if (token.value === "image-set" || token.value === "-webkit-image-set") return unsafeImageSet(list, at, close) ? "image-set()" : void 0;
+	return urlFinding(normalizedUrl(source.slice(token.end, close < end ? list[close]?.start : source.length)), dataFonts, fontFace, `${token.value}()`);
+}
+function findings(source, list, start, end, dataFonts, fontFace) {
+	const found = [];
+	for (let at = start; at < end; at++) {
+		const token = list[at];
+		if (token?.kind === "at" && FETCH_AT_KEYWORD_SET.has(token.value)) found.push(`@${token.value}`);
+		const finding = functionFinding(source, list, at, end, dataFonts, fontFace);
+		if (finding) found.push(finding);
+	}
+	return [...new Set(found)];
+}
+function boundary(list, start, end) {
+	let depth = 0;
+	for (let at = start; at < end; at++) {
+		const token = list[at];
+		if (!token) continue;
+		if (depth === 0 && (token.kind === "semicolon" || token.kind === "open" && token.value === "{")) return at;
+		if (token.kind === "function" || token.kind === "open") depth++;
+		else if (token.kind === "close") depth--;
+	}
+	return end;
+}
+function cleanStatement(source, list, start, edge, dataFonts, removed) {
+	const first = list[start];
+	const delimiter = list[edge];
+	if (!first || !delimiter) return {
+		character: source.length,
+		next: edge,
+		text: ""
+	};
+	const unsafe = first.kind === "at" && first.value === "import" ? ["@import"] : findings(source, list, start, edge + 1, dataFonts, false);
+	if (unsafe.length > 0) removed.push(...unsafe);
+	return {
+		character: delimiter.end,
+		next: edge + 1,
+		text: unsafe.length === 0 ? source.slice(first.start, delimiter.end) : ""
+	};
+}
+function cleanBlockRule(source, list, start, edge, end, dataFonts, removed) {
+	const first = list[start];
+	const delimiter = list[edge];
+	if (!first || !delimiter) return {
+		character: source.length,
+		next: end,
+		text: ""
+	};
+	const close = matchingClose(list, edge, end);
+	const ruleName = first.kind === "at" ? first.value : "";
+	const fontFace = ruleName === "font-face";
+	const unsafe = findings(source, list, start, edge, dataFonts, false);
+	if (fontFace) unsafe.push(...findings(source, list, edge + 1, close, dataFonts, true));
+	if (unsafe.length > 0) removed.push(...unsafe);
+	let text = "";
+	if (unsafe.length === 0) {
+		const body = first.kind !== "at" || DECLARATION_AT_RULES.has(ruleName) ? cleanDeclarations(source, list, edge + 1, close, dataFonts, removed, fontFace) : cleanRules(source, list, edge + 1, close, dataFonts, removed);
+		text = source.slice(first.start, delimiter.end) + body;
+		if (close < end) text += source.slice(list[close]?.start, list[close]?.end);
+	}
+	return {
+		character: close < end ? list[close]?.end ?? delimiter.end : source.length,
+		next: close < end ? close + 1 : end,
+		text
+	};
+}
+function cleanRuleUnit(source, list, start, end, dataFonts, removed) {
+	const first = list[start];
+	if (!first) return {
+		character: source.length,
+		next: end,
+		text: ""
+	};
+	const edge = boundary(list, start, end);
+	const delimiter = list[edge];
+	if (edge >= end && delimiter?.kind === "close") {
+		const unsafe = findings(source, list, start, end, dataFonts, false);
+		if (unsafe.length > 0) removed.push(...unsafe);
+		return {
+			character: delimiter.start,
+			next: end,
+			text: unsafe.length === 0 ? source.slice(first.start, delimiter.start) : ""
+		};
+	}
+	if (!delimiter) {
+		const unsafe = findings(source, list, start, end, dataFonts, false);
+		if (unsafe.length > 0) removed.push(...unsafe);
+		return {
+			character: source.length,
+			next: end,
+			text: unsafe.length === 0 ? source.slice(first.start) : ""
+		};
+	}
+	return delimiter.kind === "semicolon" ? cleanStatement(source, list, start, edge, dataFonts, removed) : cleanBlockRule(source, list, start, edge, end, dataFonts, removed);
+}
+function cleanRules(source, list, start, end, dataFonts, removed) {
+	let output = "";
+	let character = start === 0 ? 0 : list[start - 1]?.end ?? source.length;
+	let at = start;
+	while (at < end) {
+		const first = list[at];
+		if (!first) break;
+		output += source.slice(character, first.start);
+		const unit = cleanRuleUnit(source, list, at, end, dataFonts, removed);
+		output += unit.text;
+		character = unit.character;
+		at = unit.next;
+	}
+	const rangeEnd = end < list.length ? list[end]?.start ?? source.length : source.length;
+	return output + source.slice(character, rangeEnd);
+}
+function cleanDeclarationSegment(source, list, start, end, character, dataFonts, fontFace, removed) {
+	const delimiter = list[end];
+	const hasSemicolon = delimiter?.kind === "semicolon";
+	const segmentEnd = hasSemicolon ? end + 1 : end;
+	const finish = hasSemicolon ? delimiter.end : end < list.length ? delimiter?.start ?? source.length : source.length;
+	const unsafe = findings(source, list, start, segmentEnd, dataFonts, fontFace);
+	if (unsafe.length === 0) return [source.slice(character, finish), finish];
+	removed.push(...unsafe);
+	return [source.slice(character, list[start]?.start ?? finish), finish];
+}
+function declarationEnd(list, start, end) {
+	let depth = 0;
+	for (let at = start; at < end; at++) {
+		const token = list[at];
+		if (depth === 0 && token?.kind === "semicolon") return at;
+		if (token?.kind === "function" || token?.kind === "open") depth++;
+		else if (token?.kind === "close") depth--;
+	}
+	return end;
+}
+function isDeclaration(list, start) {
+	return list[start]?.value.startsWith("--") === true && list[start + 1]?.value === ":";
+}
+function cleanDeclarations(source, list, start, end, dataFonts, removed, fontFace = false) {
+	let output = "";
+	let character = start === 0 ? 0 : list[start - 1]?.end ?? source.length;
+	let at = start;
+	while (at < end) {
+		const first = list[at];
+		if (!first) break;
+		output += source.slice(character, first.start);
+		const edge = boundary(list, at, end);
+		if (list[edge]?.kind === "open" && !isDeclaration(list, at)) {
+			const unit = cleanBlockRule(source, list, at, edge, end, dataFonts, removed);
+			output += unit.text;
+			character = unit.character;
+			at = unit.next;
+		} else {
+			const finish = declarationEnd(list, at, end);
+			const cleaned = cleanDeclarationSegment(source, list, at, finish, first.start, dataFonts, fontFace, removed);
+			output += cleaned[0];
+			character = cleaned[1];
+			at = finish < end ? finish + 1 : end;
+		}
+	}
+	const rangeEnd = end < list.length ? list[end]?.start ?? source.length : source.length;
+	return output + source.slice(character, rangeEnd);
+}
+function sanitizeCss(source, declarations, dataFonts) {
+	const list = cssTokens(source);
+	const removed = [];
+	const css = declarations ? cleanDeclarations(source, list, 0, list.length, dataFonts, removed) : cleanRules(source, list, 0, list.length, dataFonts, removed);
+	const auditRemoved = lexicalFindings(css, dataFonts);
+	if (auditRemoved.length > 0) return {
+		css: "",
+		removed: [.../* @__PURE__ */ new Set([...removed, ...auditRemoved])]
+	};
+	return {
+		css,
+		removed: [...new Set(removed)]
+	};
+}
+//#endregion
+export { lexicalFindings, sanitizeCss };

package/dist/sanitize.d.ts

@@ -4,6 +4,7 @@ export declare const REFUSED_ELEMENTS: Set<string>;
 export interface SanitizeOptions {
   linkOrigins?: Iterable<string>;
   keepScripts?: boolean;
+  dataFonts?: boolean;
   refuseElements?: Iterable<string>;
 }
 export declare function findActiveContent(html: string, options?: SanitizeOptions): string[];

package/dist/sanitize.js

@@ -1,3 +1,4 @@
+import { sanitizeCss } from "./sanitize-css.js";
 import { isTag } from "domhandler";
 import render from "dom-serializer";
 import { parseDocument } from "htmlparser2";
@@ -44,7 +45,9 @@ const URL_ATTRIBUTES = /* @__PURE__ */ new Set([
 	"longdesc",
 	"ping"
 ]);
-const DATA_IMAGE = /^data:image\/(?:png|jpeg|gif|webp|svg\+xml)(?:[;,])/i;
+const DATA_IMAGE_TYPES = String.raw`(?:png|jpeg|gif|webp|svg\+xml)`;
+const DATA_IMAGE = new RegExp(`^data:image/${DATA_IMAGE_TYPES}(?:[;,])`, "i");
+const DATA_IMAGE_SRCSET = new RegExp(`^data:image/${DATA_IMAGE_TYPES}(?:;[^,]*)?,[^,]*$`, "i");
 function parse(html) {
 	return parseDocument(html, {
 		lowerCaseAttributeNames: true,
@@ -94,24 +97,13 @@ function safeUrl(attribute, value, allowed) {
 			return false;
 		}
 	}
-	if (attribute === "srcset") return /^data:image\/(?:png|jpeg|gif|webp|svg\+xml)(?:;[^,]*)?,[^,]*$/i.test(url);
+	if (attribute === "srcset") return DATA_IMAGE_SRCSET.test(url);
 	if (attribute === "src" || attribute === "poster") return DATA_IMAGE.test(url);
 	return false;
 }
-function safeStyle(value) {
-	const matches = [...value.matchAll(/url\(\s*(["']?)(.*?)\1\s*\)/gi)];
-	if ((value.match(/url\(/gi)?.length ?? 0) !== matches.length) return false;
-	return matches.every((match) => normalizeUrl(match[2] ?? "").startsWith("data:image/"));
-}
-function refusedStyleElement(element) {
-	if (element.name.toLowerCase() !== "style") return false;
-	const text = element.children.map((child) => "data" in child ? child.data : "").join("");
-	return /@import/i.test(text) || !safeStyle(text);
-}
 function refusedElement(element, refused, keepScripts) {
 	const name = element.name.toLowerCase();
 	if (name === "script") return !keepScripts;
-	if (refusedStyleElement(element)) return true;
 	if (refused.has(name)) return true;
 	if (insideSvg(element) && REFUSED_SVG_ELEMENTS.has(name)) return true;
 	return name === "meta" && Object.keys(element.attribs).some((attribute) => attribute.toLowerCase() === "http-equiv");
@@ -119,11 +111,23 @@ function refusedElement(element, refused, keepScripts) {
 function refusedAttribute(name, value, allowed, keepScripts) {
 	const attribute = name.toLowerCase();
 	if (attribute.startsWith("on")) return !keepScripts;
-	return REFUSED_ATTRIBUTES.has(attribute) || URL_ATTRIBUTES.has(attribute) && !safeUrl(attribute, value, allowed) || attribute === "style" && !safeStyle(value);
+	return REFUSED_ATTRIBUTES.has(attribute) || URL_ATTRIBUTES.has(attribute) && !safeUrl(attribute, value, allowed);
 }
 function refusedSet(options) {
 	return new Set([...REFUSED_ELEMENTS, ...options.refuseElements ?? []].map((name) => name.toLowerCase()));
 }
+function styleText(element) {
+	return element.children.map((child) => "data" in child ? child.data : "").join("");
+}
+function styleFindings(element, dataFonts) {
+	const found = [];
+	if (element.name.toLowerCase() === "style") for (const construct of sanitizeCss(styleText(element), false, dataFonts).removed) found.push(`<style> ${construct}`);
+	for (const [name, value] of Object.entries(element.attribs)) {
+		if (name.toLowerCase() !== "style") continue;
+		for (const construct of sanitizeCss(value, true, dataFonts).removed) found.push(`${element.name}[${name}] ${construct}`);
+	}
+	return found;
+}
 function findActiveContent(html, options = {}) {
 	const allowed = origins(options.linkOrigins);
 	const refused = refusedSet(options);
@@ -131,10 +135,27 @@ function findActiveContent(html, options = {}) {
 	const found = [];
 	for (const element of elements(parse(html).children)) {
 		if (refusedElement(element, refused, keepScripts)) found.push(`<${element.name}>`);
+		found.push(...styleFindings(element, options.dataFonts ?? false));
 		for (const [name, value] of Object.entries(element.attribs)) if (refusedAttribute(name, value, allowed, keepScripts)) found.push(`${element.name}[${name}]`);
 	}
 	return found;
 }
+function cleanStyleElement(element, dataFonts) {
+	if (element.name.toLowerCase() !== "style") return;
+	const children = element.children.filter((candidate) => "data" in candidate);
+	const child = children[0];
+	if (!child || !("data" in child)) return;
+	child.data = sanitizeCss(styleText(element), false, dataFonts).css;
+	for (const extra of children.slice(1)) if ("data" in extra) extra.data = "";
+}
+function cleanAttributes(element, allowed, keepScripts, dataFonts) {
+	for (const [name, value] of Object.entries(element.attribs)) if (refusedAttribute(name, value, allowed, keepScripts)) delete element.attribs[name];
+	else if (name.toLowerCase() === "style") {
+		const css = sanitizeCss(value, true, dataFonts).css.trim();
+		if (css) element.attribs[name] = css;
+		else delete element.attribs[name];
+	}
+}
 function sanitize(html, options = {}) {
 	const allowed = origins(options.linkOrigins);
 	const refused = refusedSet(options);
@@ -143,7 +164,8 @@ function sanitize(html, options = {}) {
 	const prune = (nodes) => nodes.filter((node) => {
 		if (!isTag(node)) return true;
 		if (refusedElement(node, refused, keepScripts)) return false;
-		for (const [name, value] of Object.entries(node.attribs)) if (refusedAttribute(name, value, allowed, keepScripts)) delete node.attribs[name];
+		cleanStyleElement(node, options.dataFonts ?? false);
+		cleanAttributes(node, allowed, keepScripts, options.dataFonts ?? false);
 		node.children = prune(node.children);
 		return true;
 	});

package/dist/unicode-range.d.ts

@@ -0,0 +1,11 @@
+//#region src/unicode-range.d.ts
+export type UnicodeRangeParse = {
+  ok: true;
+  value: string;
+} | {
+  ok: false;
+  reason: string;
+};
+export declare const UNICODE_RANGE_CLEARANCE: string;
+export declare function parseUnicodeRange(range: string): UnicodeRangeParse;
+//#endregion

package/dist/unicode-range.js

@@ -0,0 +1,86 @@
+//#region src/unicode-range.ts
+const MAX_CODE_POINT = 1114111;
+const MAX_CODE_POINT_HEX = MAX_CODE_POINT.toString(16).toUpperCase();
+const DESCRIPTOR_FORM = "U+hex, U+hex-hex, or U+hex with ? wildcards";
+const UNICODE_RANGE_CLEARANCE = `${DESCRIPTOR_FORM}; code points at most ${MAX_CODE_POINT_HEX}`;
+function codePoint(hex) {
+	return Number.parseInt(hex, 16);
+}
+function aboveMax(hex, token) {
+	if (codePoint(hex) > MAX_CODE_POINT) return {
+		ok: false,
+		reason: `${token} has a code point above ${MAX_CODE_POINT_HEX}`
+	};
+}
+function malformed(token) {
+	return {
+		ok: false,
+		reason: `${token} is not a CSS unicode-range descriptor (${DESCRIPTOR_FORM})`
+	};
+}
+function parseRange(token) {
+	const match = /^[Uu]\+([0-9A-Fa-f]{1,6})-([0-9A-Fa-f]{1,6})$/.exec(token);
+	if (!match) return;
+	const start = match[1] ?? "";
+	const end = match[2] ?? "";
+	const high = aboveMax(start, token) ?? aboveMax(end, token);
+	if (high) return high;
+	if (codePoint(start) > codePoint(end)) return {
+		ok: false,
+		reason: `${token} has start greater than end`
+	};
+	return {
+		ok: true,
+		value: `U+${start.toUpperCase()}-${end.toUpperCase()}`
+	};
+}
+function parseWildcard(token) {
+	const match = /^[Uu]\+([0-9A-Fa-f]{0,5})(\?+)$/.exec(token);
+	if (!match) return;
+	const hex = match[1] ?? "";
+	const marks = match[2] ?? "";
+	if (hex.length + marks.length > 6) return malformed(token);
+	const high = aboveMax(`${hex}${"0".repeat(marks.length)}`, token) ?? aboveMax(`${hex}${"F".repeat(marks.length)}`, token);
+	if (high) return high;
+	return {
+		ok: true,
+		value: `U+${hex.toUpperCase()}${marks}`
+	};
+}
+function parseSingle(token) {
+	const match = /^[Uu]\+([0-9A-Fa-f]{1,6})$/.exec(token);
+	if (!match) return;
+	const hex = match[1] ?? "";
+	const high = aboveMax(hex, token);
+	if (high) return high;
+	return {
+		ok: true,
+		value: `U+${hex.toUpperCase()}`
+	};
+}
+function parseDescriptor(token) {
+	return parseRange(token) ?? parseWildcard(token) ?? parseSingle(token) ?? malformed(token);
+}
+function parseUnicodeRange(range) {
+	if (range.trim() === "") return {
+		ok: false,
+		reason: "the list is empty"
+	};
+	const tokens = range.split(",").map((part) => part.trim());
+	if (tokens.some((token) => token.length === 0)) return {
+		ok: false,
+		reason: "the list has an empty entry"
+	};
+	const parsed = [];
+	for (const token of tokens) {
+		const result = parseDescriptor(token);
+		if (!result.ok) return result;
+		parsed.push(result.value);
+	}
+	return {
+		ok: true,
+		value: parsed.join(", ")
+	};
+}
+//#endregion
+export { UNICODE_RANGE_CLEARANCE, parseUnicodeRange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segnavia/html",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     }
   },
   "dependencies": {
-    "@segnavia/format": "0.26.0",
+    "@segnavia/format": "0.28.0",
     "dom-serializer": "^2.0.0",
     "domhandler": "^5.0.3",
     "htmlparser2": "^10.0.0",