@small-tools/html 1.3.0 → 1.4.0

package/dist/api/sanitize-html.d.ts

@@ -1,3 +1,4 @@
 type SanitizeHtml = (unsafeHtml: string) => string;
 declare const sanitizeHtml: SanitizeHtml;
 export { sanitizeHtml };
+export type { SanitizeHtml };

package/dist/api/sanitize-html.js

@@ -1,13 +1,290 @@
-const safeEntities = {
-    "&": "&",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#039;",
+const safeTags = {
+    html: new Set([
+        "div",
+        "span",
+        "p",
+        "br",
+        "hr",
+        "b",
+        "strong",
+        "i",
+        "em",
+        "u",
+        "s",
+        "small",
+        "mark",
+        "sub",
+        "sup",
+        "abbr",
+        "cite",
+        "q",
+        "blockquote",
+        "code",
+        "pre",
+        "kbd",
+        "samp",
+        "var",
+        "time",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "dl",
+        "dt",
+        "dd",
+        "table",
+        "thead",
+        "tbody",
+        "tfoot",
+        "tr",
+        "td",
+        "th",
+        "caption",
+        "colgroup",
+        "col",
+        "img",
+        "picture",
+        "source",
+        "track",
+        "a",
+        "area",
+        "form",
+        "input",
+        "textarea",
+        "select",
+        "option",
+        "optgroup",
+        "label",
+        "button",
+        "fieldset",
+        "legend",
+        "datalist",
+        "output",
+        "progress",
+        "meter",
+        "template",
+        "slot",
+    ]),
+    svg: new Set([
+        "svg",
+        "g",
+        "path",
+        "rect",
+        "circle",
+        "ellipse",
+        "line",
+        "polyline",
+        "polygon",
+    ]),
+};
+const safeAttributes = {
+    html: new Set([
+        "id",
+        "class",
+        "title",
+        "lang",
+        "dir",
+        "hidden",
+        "tabindex",
+        "draggable",
+        "spellcheck",
+        "translate",
+        "value",
+        "name",
+        "placeholder",
+        "readonly",
+        "disabled",
+        "required",
+        "checked",
+        "selected",
+        "multiple",
+        "maxlength",
+        "minlength",
+        "size",
+        "cols",
+        "rows",
+        "wrap",
+        "for",
+        "type",
+        "src",
+        "srcset",
+        "sizes",
+        "alt",
+        "poster",
+        "href",
+        "action",
+        "formaction",
+        "target",
+        "download",
+        "rel",
+        "colspan",
+        "rowspan",
+        "scope",
+        "headers",
+    ]),
+    svg: new Set([
+        "viewbox",
+        "d",
+        "x",
+        "y",
+        "cx",
+        "cy",
+        "r",
+        "width",
+        "height",
+        "points",
+        "fill",
+        "stroke",
+        "stroke-width",
+    ]),
+};
+const urlAttributes = new Set([
+    "href",
+    "src",
+    "action",
+    "formaction",
+    "poster",
+]);
+const invisibleCharsAttributes = new Set([
+    ...urlAttributes,
+    "target",
+    "id",
+    "name",
+]);
+const dangerousUnicodeRegExp = /[\u200B-\u200F\u202A-\u202E\u2066-\u2069]/;
+const formActionsAttributes = new Set(["action", "formaction"]);
+const isSafeUrl = (value) => {
+    try {
+        const valueWithoutControlChars = value.replace(
+        // biome-ignore lint/suspicious/noControlCharactersInRegex: We want to remove control chars
+        /[\u0000-\u001F\u007F]/g, "");
+        const url = new URL(valueWithoutControlChars, "http://base");
+        return ["http:", "https:", "mailto:"].includes(url.protocol);
+    }
+    catch {
+        return false;
+    }
+};
+const isSafeSrcset = (value) => {
+    const items = value.split(",");
+    for (const item of items) {
+        const trimmed = item.trim();
+        if (trimmed === "") {
+            continue;
+        }
+        const parts = trimmed.split(/\s+/);
+        const url = parts[0];
+        if (url === undefined) {
+            continue;
+        }
+        if (!isSafeUrl(url)) {
+            return false;
+        }
+    }
+    return true;
+};
+const isCustomElement = (tag) => /^[a-z][a-z0-9._-]*-[a-z0-9._-]+$/.test(tag);
+const isSafeAttribute = (type, attributeName) => safeAttributes[type].has(attributeName) ||
+    attributeName.startsWith("data-") ||
+    attributeName.startsWith("aria-");
+const isSafeFormAction = (value) => {
+    const url = new URL(value, window.location.origin);
+    return url.origin === window.location.origin;
+};
+const isSafeTag = (type, tag) => {
+    return type === "html"
+        ? safeTags[type].has(tag) || isCustomElement(tag)
+        : safeTags[type].has(tag);
+};
+const isSafeElement = (node) => {
+    return node instanceof HTMLElement || node instanceof SVGElement;
+};
+const sanitizeAttributes = (type, node, tag) => {
+    for (let i = node.attributes.length - 1; i >= 0; i--) {
+        const attribute = node.attributes[i];
+        if (attribute === undefined) {
+            continue;
+        }
+        const name = attribute.name.toLowerCase();
+        if (!isSafeAttribute(type, name)) {
+            node.removeAttribute(attribute.name);
+            continue;
+        }
+        if (invisibleCharsAttributes.has(name)) {
+            if (dangerousUnicodeRegExp.test(attribute.value)) {
+                node.removeAttribute(attribute.name);
+                continue;
+            }
+        }
+        if (formActionsAttributes.has(name)) {
+            if (!isSafeFormAction(attribute.value)) {
+                node.removeAttribute(name);
+                continue;
+            }
+        }
+        if (urlAttributes.has(name)) {
+            if (!isSafeUrl(attribute.value)) {
+                node.removeAttribute(attribute.name);
+                continue;
+            }
+        }
+        if (name === "srcset") {
+            if (!isSafeSrcset(attribute.value)) {
+                node.removeAttribute(attribute.name);
+                continue;
+            }
+        }
+        if (name === "target" && attribute.value !== "_blank") {
+            node.removeAttribute(attribute.name);
+        }
+    }
+    if (tag === "a") {
+        node.setAttribute("rel", "nofollow noopener noreferrer");
+    }
+};
+const sanitizeNodeChildren = (node) => {
+    let child = node.firstChild;
+    while (child !== null) {
+        const next = child.nextSibling;
+        sanitizeNode(child);
+        child = next;
+    }
+};
+const sanitizeNode = (node) => {
+    if (node instanceof DocumentFragment) {
+        sanitizeNodeChildren(node);
+        return;
+    }
+    if (!(node instanceof Element)) {
+        return;
+    }
+    if (!isSafeElement(node)) {
+        node.remove();
+        return;
+    }
+    const tag = node.tagName.toLowerCase();
+    const elementType = node instanceof SVGElement ? "svg" : "html";
+    if (!isSafeTag(elementType, tag)) {
+        node.remove();
+        return;
+    }
+    sanitizeAttributes(elementType, node, tag);
+    if (node instanceof HTMLTemplateElement) {
+        sanitizeNode(node.content);
+    }
+    sanitizeNodeChildren(node);
 };
 const sanitizeHtml = (unsafeHtml) => {
-    return unsafeHtml.replace(/[&<>"']/g, (character) => {
-        return safeEntities[character] ?? "";
-    });
+    const parser = new DOMParser();
+    const document = parser.parseFromString(unsafeHtml, "text/html");
+    sanitizeNode(document.body);
+    const stabilized = parser.parseFromString(document.body.innerHTML, "text/html");
+    sanitizeNode(stabilized.body);
+    return stabilized.body.innerHTML.trim();
 };
 export { sanitizeHtml };

package/package.json

@@ -18,5 +18,5 @@
 		"lint": "biome check",
 		"build": "tsc --build"
 	},
-	"version": "1.3.0"
+	"version": "1.4.0"
 }