chore(deps): migrate from insane to isomorphic-dompurify

l10n/fluent.js

@@ -1,14 +1,12 @@
 import { FluentBundle, FluentResource } from "@fluent/bundle";
-import insane from "insane";
+import DOMPurify from "isomorphic-dompurify";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import enUS_ftl from "./locales/en-US.ftl";
 
 /**
  * @import { FluentVariable } from "@fluent/bundle"
- * @import { AllowedTags } from "insane"
  */
-
 /** @type {Record<string, string>} */
 const ftlMap = {
   "en-US": enUS_ftl,
@@ -75,50 +73,113 @@ export class Fluent {
    * @returns {string | ReturnType<typeof unsafeHTML>}
    */
   static sanitize(message, elements = {}) {
-    /** @type { Record<string, string[]> } */
-    const allowedAttributes = {};
-    for (const t of Object.values(elements)) {
-      allowedAttributes[t.tag] = [
-        ...Object.keys(t).filter((x) => x !== "tag"),
-        ...ALLOWED_ATTRIBUTES,
-      ];
+    /** @type {Record<string, string[]>} */
+    const allowedAttributesPerTag = Object.fromEntries(
+      Object.values(elements).map((t) => [
+        t.tag,
+        [...Object.keys(t).filter((x) => x !== "tag"), ...ALLOWED_ATTRIBUTES],
+      ]),
+    );
+
+    for (const tag of ALLOWED_TAGS) {
+      allowedAttributesPerTag[tag] ??= [...ALLOWED_ATTRIBUTES];
     }
 
+    // Global list for DOMPurify (we'll filter per-tag in the hook)
+    const allAllowedAttributes = [
+      "data-l10n-name",
+      ...ALLOWED_ATTRIBUTES,
+      ...Object.values(elements).flatMap((t) =>
+        Object.keys(t).filter((x) => x !== "tag"),
+      ),
+    ];
+
     const allowedTags = [
       ...Object.values(elements).map((t) => t.tag),
       ...ALLOWED_TAGS,
     ];
 
     let safe = true;
-    const sanitized = insane(
-      message,
-      {
-        allowedAttributes,
-        allowedTags: /** @type {AllowedTags[]} */ (allowedTags),
-        allowedSchemes: ["http", "https", "mailto"],
-        filter(token) {
-          // TODO: use element names directly
-          const name = token.attrs["data-l10n-name"];
-          if (name) {
-            for (const [k, v] of Object.entries(elements[name] || {})) {
-              token.attrs[k] = v;
+
+    DOMPurify.addHook("uponSanitizeElement", (node, data) => {
+      if (node.nodeType !== 1) {
+        return;
+      }
+      const name =
+        "dataset" in node
+          ? /** @type {HTMLElement} */ (node).dataset.l10nName
+          : undefined;
+      data.allowedTags[data.tagName] =
+        ALLOWED_TAGS.has(data.tagName) ||
+        !!(
+          name &&
+          Object.hasOwn(elements, name) &&
+          elements[name]?.tag === data.tagName
+        );
+    });
+
+    // Configured attributes must pass DOMPurify's validation too.
+    DOMPurify.addHook(
+      "beforeSanitizeAttributes",
+      /** @param {Element} element */ (element) => {
+        if (!element.tagName) {
+          return;
+        }
+        const tagName = element.tagName.toLowerCase();
+        const name =
+          "dataset" in element
+            ? /** @type {HTMLElement} */ (element).dataset.l10nName
+            : undefined;
+
+        const elementConfig =
+          name &&
+          Object.hasOwn(elements, name) &&
+          elements[name]?.tag === tagName
+            ? elements[name]
+            : undefined;
+        if (elementConfig) {
+          for (const [k, v] of Object.entries(elementConfig)) {
+            if (k !== "tag") {
+              element.setAttribute(k, String(v));
             }
           }
+        }
+
+        const allowedForTag = allowedAttributesPerTag[tagName] || [];
+        const attrsToRemove = [];
+        for (const attr of element.attributes) {
           if (
-            ALLOWED_TAGS.has(token.tag) ||
-            (name &&
-              Object.keys(elements).includes(name) &&
-              elements[name]?.tag === token.tag)
+            attr.name !== "data-l10n-name" &&
+            !allowedForTag.includes(attr.name)
           ) {
-            safe = false;
-            return true;
+            attrsToRemove.push(attr.name);
           }
-          return false;
-        },
+        }
+        for (const attr of attrsToRemove) {
+          element.removeAttribute(attr);
+        }
+
+        if (
+          ALLOWED_TAGS.has(tagName) ||
+          (elementConfig && elementConfig.tag === tagName)
+        ) {
+          safe = false;
+        }
       },
-      true,
     );
-    return safe ? sanitized : unsafeHTML(sanitized);
+
+    try {
+      const sanitized = DOMPurify.sanitize(message, {
+        ALLOWED_TAGS: allowedTags,
+        ALLOWED_ATTR: allAllowedAttributes,
+        // Allow approved schemes and relative URLs with no scheme before /, ?, or #.
+        ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^:/?#]*(?:[/?#]|$))/i,
+      });
+      return safe ? sanitized : unsafeHTML(sanitized);
+    } finally {
+      DOMPurify.removeHook("beforeSanitizeAttributes");
+      DOMPurify.removeHook("uponSanitizeElement");
+    }
   }
 
   /**