@segnavia/html 0.36.0 → 0.38.0

package/dist/sanitize.js

@@ -1,25 +1,27 @@
 import { sanitizeCss } from "./sanitize-css.js";
 import { isTag } from "domhandler";
+import { dependencyDecision, dependencyOriginSet, originSet } from "@segnavia/format";
 import render from "dom-serializer";
 import { parseDocument } from "htmlparser2";
 //#region src/sanitize.ts
-const REFUSED_ELEMENTS = /* @__PURE__ */ new Set([
-	"script",
-	"iframe",
-	"frame",
-	"frameset",
-	"object",
-	"embed",
-	"applet",
-	"base",
-	"portal",
-	"link",
-	"form",
-	"input",
-	"button",
-	"select",
-	"textarea"
-]);
+const REFUSED = {
+	script: "always",
+	iframe: "always",
+	frame: "always",
+	frameset: "always",
+	object: "always",
+	embed: "always",
+	applet: "always",
+	base: "always",
+	portal: "always",
+	link: "always",
+	form: "unless-scripts",
+	input: "unless-scripts",
+	button: "unless-scripts",
+	select: "unless-scripts",
+	textarea: "unless-scripts"
+};
+const REFUSED_ELEMENTS = new Set(Object.keys(REFUSED));
 const REFUSED_SVG_ELEMENTS = /* @__PURE__ */ new Set([
 	"script",
 	"animate",
@@ -78,14 +80,6 @@ function insideSvg(element) {
 function normalizeUrl(value) {
 	return [...value].filter((c) => c.charCodeAt(0) > 32 && c.charCodeAt(0) !== 127).join("").toLowerCase();
 }
-function origins(values) {
-	const set = /* @__PURE__ */ new Set();
-	for (const value of values ?? []) try {
-		const url = new URL(value);
-		if (url.protocol === "https:") set.add(url.origin.toLowerCase());
-	} catch {}
-	return set;
-}
 function safeUrl(attribute, value, allowed) {
 	const url = normalizeUrl(value);
 	if (attribute === "href" || attribute === "xlink:href") {
@@ -104,68 +98,109 @@ function safeUrl(attribute, value, allowed) {
 function refusedElement(element, refused, keepScripts) {
 	const name = element.name.toLowerCase();
 	if (name === "script") return !keepScripts;
+	if (name === "link" && keepScripts && element.attribs.rel?.toLowerCase() === "stylesheet") return false;
 	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");
 }
-function refusedAttribute(name, value, allowed, keepScripts) {
+function dependencyAttribute(element, attribute, value, options, dependencies) {
+	if (!options.keepScripts) return void 0;
+	const tag = element.name.toLowerCase();
+	if (!(tag === "script" && attribute === "src" || tag === "link" && element.attribs.rel?.toLowerCase() === "stylesheet" && attribute === "href")) return void 0;
+	const decision = dependencyDecision(value, dependencies);
+	return decision.allowed ? "" : decision.reason;
+}
+function refusedAttribute(element, name, value, allowed, options, dependencies) {
 	const attribute = name.toLowerCase();
-	if (attribute.startsWith("on")) return !keepScripts;
-	return REFUSED_ATTRIBUTES.has(attribute) || URL_ATTRIBUTES.has(attribute) && !safeUrl(attribute, value, allowed);
+	if (attribute.startsWith("on")) return options.keepScripts ? void 0 : "";
+	const dependency = dependencyAttribute(element, attribute, value, options, dependencies);
+	if (dependency !== void 0) return dependency || void 0;
+	return REFUSED_ATTRIBUTES.has(attribute) || URL_ATTRIBUTES.has(attribute) && !safeUrl(attribute, value, allowed) ? "" : void 0;
 }
 function refusedSet(options) {
-	return new Set([...REFUSED_ELEMENTS, ...options.refuseElements ?? []].map((name) => name.toLowerCase()));
+	const defaults = options.keepScripts ? Object.entries(REFUSED).filter(([, rule]) => rule === "always").map(([name]) => name) : REFUSED_ELEMENTS;
+	return new Set([...defaults, ...options.refuseElements ?? []].map((name) => name.toLowerCase()));
 }
 function styleText(element) {
 	return element.children.map((child) => "data" in child ? child.data : "").join("");
 }
-function styleFindings(element, dataFonts) {
+function dependencyCss(source, declarations, options, dependencies) {
+	if (!options.keepScripts) return sanitizeCss(source, declarations, options.dataFonts ?? false);
+	const restores = [];
+	const hold = (url) => {
+		if (!dependencyDecision(url, dependencies).allowed) return url;
+		return `data:image/segnavia-dependency-${restores.push(url) - 1},x`;
+	};
+	let marker = "segnavia-held-import";
+	while (source.includes(marker)) marker += "-x";
+	const imports = [];
+	let protectedCss = source.replace(/@import\s+(?:url\(\s*)?["']?(https:\/\/[^\s"')]+)["']?\s*\)?[^;]*;/gi, (rule, url) => {
+		if (hold(url) === url) return rule;
+		const index = imports.push(rule) - 1;
+		return `.${marker}-${index}{}`;
+	});
+	protectedCss = protectedCss.replace(/@font-face\s*\{[^}]*\}/gi, (block) => block.replace(/https:\/\/[^\s"')]+/gi, hold));
+	const result = sanitizeCss(protectedCss, declarations, options.dataFonts ?? false);
+	const restore = (value) => value.replace(/data:image\/segnavia-dependency-(\d+),x/g, (_, index) => restores[Number(index)] ?? "");
+	let css = restore(result.css);
+	for (const [index, rule] of imports.entries()) css = css.replace(`.${marker}-${index}{}`, rule);
+	return {
+		css,
+		removed: result.removed.map(restore)
+	};
+}
+function styleFindings(element, options, dependencies) {
 	const found = [];
-	if (element.name.toLowerCase() === "style") for (const construct of sanitizeCss(styleText(element), false, dataFonts).removed) found.push(`<style> ${construct}`);
+	if (element.name.toLowerCase() === "style") for (const construct of dependencyCss(styleText(element), false, options, dependencies).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}`);
+		for (const construct of dependencyCss(value, true, options, dependencies).removed) found.push(`${element.name}[${name}] ${construct}`);
 	}
 	return found;
 }
 function findActiveContent(html, options = {}) {
-	const allowed = origins(options.linkOrigins);
+	const allowed = originSet(options.linkOrigins);
+	const dependencies = dependencyOriginSet(options.dependencyOrigins);
 	const refused = refusedSet(options);
 	const keepScripts = options.keepScripts ?? false;
 	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}]`);
+		found.push(...styleFindings(element, options, dependencies));
+		for (const [name, value] of Object.entries(element.attribs)) {
+			const reason = refusedAttribute(element, name, value, allowed, options, dependencies);
+			if (reason !== void 0) found.push(`${element.name}[${name}]${reason ? ` ${reason}` : ""}`);
+		}
 	}
 	return found;
 }
-function cleanStyleElement(element, dataFonts) {
+function cleanStyleElement(element, options, dependencies) {
 	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;
+	child.data = dependencyCss(styleText(element), false, options, dependencies).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];
+function cleanAttributes(element, allowed, options, dependencies) {
+	for (const [name, value] of Object.entries(element.attribs)) if (refusedAttribute(element, name, value, allowed, options, dependencies) !== void 0) delete element.attribs[name];
 	else if (name.toLowerCase() === "style") {
-		const css = sanitizeCss(value, true, dataFonts).css.trim();
+		const css = dependencyCss(value, true, options, dependencies).css.trim();
 		if (css) element.attribs[name] = css;
 		else delete element.attribs[name];
 	}
 }
 function sanitize(html, options = {}) {
-	const allowed = origins(options.linkOrigins);
+	const allowed = originSet(options.linkOrigins);
+	const dependencies = dependencyOriginSet(options.dependencyOrigins);
 	const refused = refusedSet(options);
 	const keepScripts = options.keepScripts ?? false;
 	const document = parse(html);
 	const prune = (nodes) => nodes.filter((node) => {
 		if (!isTag(node)) return true;
 		if (refusedElement(node, refused, keepScripts)) return false;
-		cleanStyleElement(node, options.dataFonts ?? false);
-		cleanAttributes(node, allowed, keepScripts, options.dataFonts ?? false);
+		cleanStyleElement(node, options, dependencies);
+		cleanAttributes(node, allowed, options, dependencies);
 		node.children = prune(node.children);
 		return true;
 	});

package/package.json

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