@erickxavier/no-js 1.9.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "The HTML-first reactive framework — build dynamic web apps with just HTML attributes, no JavaScript required",
   "main": "dist/cjs/no.js",
   "module": "dist/esm/no.js",
@@ -32,6 +32,7 @@
     "test:e2e:headed": "npx playwright test --config e2e/playwright.config.ts --headed",
     "test:e2e:report": "npx playwright show-report e2e/playwright-report",
     "test:all": "npm test && npm run test:e2e",
+    "bench": "jest --testMatch='**/__benchmarks__/**/*.test.js' --testPathIgnorePatterns='[]'",
     "prepublishOnly": "npm run build"
   },
   "keywords": [

package/src/animations.js

@@ -71,7 +71,7 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
   const fallback = durationMs || 2000;
   if (!el.firstElementChild && !el.childNodes.length) {
     callback();
-    return;
+    return () => {};
   }
   if (animName) {
     const target = el.firstElementChild || el;
@@ -85,8 +85,12 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
       callback();
     };
     target.addEventListener("animationend", done, { once: true });
-    setTimeout(done, fallback); // Fallback
-    return;
+    const timerId = setTimeout(done, fallback); // Fallback
+    return () => {
+      called = true;
+      clearTimeout(timerId);
+      target.removeEventListener("animationend", done);
+    };
   }
   if (transitionName) {
     const target = el.firstElementChild || el;
@@ -94,10 +98,11 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
       transitionName + "-leave",
       transitionName + "-leave-active",
     );
-    requestAnimationFrame(() => {
+    let called = false;
+    let timerId;
+    const rafId = requestAnimationFrame(() => {
       target.classList.remove(transitionName + "-leave");
       target.classList.add(transitionName + "-leave-to");
-      let called = false;
       const done = () => {
         if (called) return;
         called = true;
@@ -108,9 +113,19 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
         callback();
       };
       target.addEventListener("transitionend", done, { once: true });
-      setTimeout(done, fallback);
+      timerId = setTimeout(done, fallback);
     });
-    return;
+    return () => {
+      called = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
+      target.classList.remove(
+        transitionName + "-leave",
+        transitionName + "-leave-active",
+        transitionName + "-leave-to",
+      );
+    };
   }
   callback();
+  return () => {};
 }

package/src/context.js

@@ -9,6 +9,7 @@ import { _devtoolsEmit, _ctxRegistry } from "./devtools.js";
 let _batchDepth = 0;
 const _batchQueue = new Set();
 let _ctxId = 0;
+let _ctxGeneration = 0;
 
 export function _resetCtxId() { _ctxId = 0; }
 
@@ -102,6 +103,7 @@ export function createContext(data = {}, parent = null) {
       const old = target[key];
       target[key] = value;
       if (old !== value) {
+        _ctxGeneration++;
         notify();
         _devtoolsEmit("ctx:updated", {
           id: target.__devtoolsId,
@@ -135,7 +137,11 @@ export function createContext(data = {}, parent = null) {
 }
 
 // Collect all keys from a context + its parent chain
+// Result is cached per context and invalidated on any reactive mutation.
 export function _collectKeys(ctx) {
+  const cache = ctx.__raw.__collectKeysCache;
+  if (cache && cache.gen === _ctxGeneration) return cache.result;
+
   const allKeys = new Set();
   const allVals = {};
   let c = ctx;
@@ -149,5 +155,7 @@ export function _collectKeys(ctx) {
     }
     c = c.$parent;
   }
-  return { keys: [...allKeys], vals: allVals };
+  const result = { keys: [...allKeys], vals: allVals };
+  ctx.__raw.__collectKeysCache = { gen: _ctxGeneration, result };
+  return result;
 }

package/src/devtools.js

@@ -11,6 +11,22 @@ import { _i18n } from "./i18n.js";
 // Maps __devtoolsId → Proxy reference for inspect/mutate commands.
 export const _ctxRegistry = new Map();
 
+// ─── Hostname guard ─────────────────────────────────────────────────────────
+// Optional `hostname` param exists for unit-testing without window.location mocking.
+export function _isLocalHostname(hostname) {
+  if (hostname === undefined) {
+    hostname = (typeof window !== "undefined" && window.location) ? window.location.hostname : "";
+  }
+  return (
+    hostname === "" ||
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    hostname === "::1" ||
+    hostname === "0.0.0.0" ||
+    hostname.endsWith(".localhost")
+  );
+}
+
 // ─── Emit a devtools event ──────────────────────────────────────────────────
 export function _devtoolsEmit(type, data) {
   if (!_config.devtools || typeof window === "undefined") return;
@@ -224,6 +240,11 @@ function _handleDevtoolsCommand(event) {
 export function initDevtools(nojs) {
   if (!_config.devtools || typeof window === "undefined") return;
 
+  if (!_isLocalHostname()) {
+    console.warn("[No.JS] devtools: true is ignored outside local environments. Remove devtools: true before deploying to production.");
+    return;
+  }
+
   // Listen for commands
   window.addEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
 

package/src/directives/binding.js

@@ -33,6 +33,46 @@ registerDirective("bind-html", {
   },
 });
 
+const _SAFE_URL_ATTRS = new Set(["href", "src", "action", "formaction", "poster", "data"]);
+
+// Strip JS vectors from raw SVG markup: <script> blocks and on* event handlers.
+function _sanitizeSvgContent(svg) {
+  return svg
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s/>]*)/gi, "")
+    .replace(/\s+(?:href|xlink:href)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi, "");
+}
+
+// Sanitize a data:image/svg+xml URI — handles both base64 and URL-encoded forms.
+function _sanitizeSvgDataUri(str) {
+  try {
+    const b64 = str.match(/^data:image\/svg\+xml;base64,(.+)$/i);
+    if (b64) {
+      const clean = _sanitizeSvgContent(atob(b64[1]));
+      return "data:image/svg+xml;base64," + btoa(clean);
+    }
+    const comma = str.indexOf(",");
+    if (comma === -1) return "#";
+    const header = str.slice(0, comma + 1);
+    const clean = _sanitizeSvgContent(decodeURIComponent(str.slice(comma + 1)));
+    return header + encodeURIComponent(clean);
+  } catch (_e) {
+    return "#";
+  }
+}
+
+function _sanitizeAttrValue(attrName, value) {
+  if (_SAFE_URL_ATTRS.has(attrName)) {
+    const str = String(value).trimStart();
+    if (/^(javascript|vbscript):/i.test(str)) return "#";
+    if (/^data:/i.test(str)) {
+      if (/^data:image\/svg\+xml/i.test(str)) return _sanitizeSvgDataUri(str);
+      if (!/^data:image\//i.test(str)) return "#";
+    }
+  }
+  return value;
+}
+
 registerDirective("bind-*", {
   priority: 20,
   init(el, name, expr) {
@@ -72,7 +112,7 @@ registerDirective("bind-*", {
         if (attrName in el) el[attrName] = !!val;
         return;
       }
-      if (val != null) el.setAttribute(attrName, String(val));
+      if (val != null) el.setAttribute(attrName, String(_sanitizeAttrValue(attrName, val)));
       else el.removeAttribute(attrName);
     }
     _watchExpr(expr, ctx, update);

package/src/directives/conditionals.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: if, else-if, else, show, hide, switch
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _watchExpr } from "../globals.js";
+import { _watchExpr, _onDispose } from "../globals.js";
 import { evaluate } from "../evaluate.js";
 import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
 import { registerDirective, processTree, _disposeChildren } from "../registry.js";
@@ -21,6 +21,8 @@ registerDirective("if", {
     const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
     const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
     let currentState = undefined;
+    let _cancelAnim = null;
+    _onDispose(() => { if (_cancelAnim) { _cancelAnim(); _cancelAnim = null; } });
 
     function update() {
       const result = !!evaluate(expr, ctx);
@@ -29,7 +31,11 @@ registerDirective("if", {
 
       // Animation leave
       if (animLeave || transition) {
-        _animateOut(el, animLeave, transition, () => render(result), animDuration);
+        if (_cancelAnim) { _cancelAnim(); _cancelAnim = null; }
+        _cancelAnim = _animateOut(el, animLeave, transition, () => {
+          _cancelAnim = null;
+          render(result);
+        }, animDuration);
       } else {
         render(result);
       }

package/src/directives/events.js

@@ -26,6 +26,10 @@ registerDirective("on:*", {
     }
     if (event === "updated") {
       const updatedObserver = new MutationObserver(() => {
+        if (!el.isConnected) {
+          updatedObserver.disconnect();
+          return;
+        }
         _execStatement(expr, ctx, { $el: el });
       });
       updatedObserver.observe(el, { childList: true, subtree: true, characterData: true, attributes: true });

package/src/directives/http.js

@@ -20,6 +20,11 @@ import { _devtoolsEmit } from "../devtools.js";
 
 const HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
 
+const _SENSITIVE_HEADERS = new Set([
+  'authorization', 'x-api-key', 'x-auth-token', 'cookie',
+  'proxy-authorization', 'set-cookie', 'x-csrf-token',
+]);
+
 for (const method of HTTP_METHODS) {
   registerDirective(method, {
     priority: 1,
@@ -121,6 +126,14 @@ for (const method of HTTP_METHODS) {
           }
 
           const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
+          if (_config.debug && headersAttr) {
+            for (const k of Object.keys(extraHeaders)) {
+              const lower = k.toLowerCase();
+              if (_SENSITIVE_HEADERS.has(lower) || /^x-(auth|api)-/.test(lower)) {
+                _warn(`Sensitive header "${k}" is set inline on a headers attribute. Use NoJS.config({ headers }) or an interceptor to avoid exposing credentials in HTML source.`);
+              }
+            }
+          }
           const savedRetries = _config.retries;
           const savedRetryDelay = _config.retryDelay;
           _config.retries = retryCount;
@@ -256,7 +269,7 @@ for (const method of HTTP_METHODS) {
         el.addEventListener("submit", submitHandler);
         _onDispose(() => el.removeEventListener("submit", submitHandler));
       } else if (method === "get") {
-        doRequest();
+        if (el.isConnected) doRequest();
       } else {
         // Non-GET on non-FORM: attach click listener
         const clickHandler = (e) => {
@@ -306,7 +319,10 @@ for (const method of HTTP_METHODS) {
 
       // Polling
       if (refreshInterval > 0) {
-        const id = setInterval(doRequest, refreshInterval);
+        const id = setInterval(() => {
+          if (!el.isConnected) { clearInterval(id); return; }
+          doRequest();
+        }, refreshInterval);
         _onDispose(() => clearInterval(id));
       }
     },

package/src/directives/loops.js

@@ -25,6 +25,8 @@ registerDirective("each", {
     const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
     const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
     let prevList = null;
+    // key → wrapper div; only populated when the `key` attribute is set.
+    const keyMap = new Map();
 
     function update() {
       let list = /[\[\]()\s+\-*\/!?:&|]/.test(listPath)
@@ -32,10 +34,7 @@ registerDirective("each", {
         : resolve(listPath, ctx);
       if (!Array.isArray(list)) return;
 
-      // If same list reference and items are rendered, skip re-render
-      // and just propagate the notification to child contexts so their
-      // watchers (bind, show, model, etc.) can react to parent changes
-      // without destroying/recreating the DOM (preserves input focus).
+      // Same-reference optimisation: propagate to children without DOM rebuild.
       if (list === prevList && list.length > 0 && el.children.length > 0) {
         for (const child of el.children) {
           if (child.__ctx && child.__ctx.$notify) child.__ctx.$notify();
@@ -49,6 +48,7 @@ registerDirective("each", {
         const clone = _cloneTemplate(elseTpl);
         if (clone) {
           _disposeChildren(el);
+          keyMap.clear();
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -80,6 +80,87 @@ registerDirective("each", {
     }
 
     function renderItems(tpl, list) {
+      if (keyExpr) {
+        reconcileItems(tpl, list);
+      } else {
+        rebuildItems(tpl, list);
+      }
+    }
+
+    // Key-based reconciliation: reuses existing wrapper divs for items whose
+    // key is still present in the new list, only creating/removing DOM nodes
+    // for items that genuinely appeared or disappeared.
+    function reconcileItems(tpl, list) {
+      const count = list.length;
+
+      // Evaluate the key for every item in the new list up-front.
+      const newOrder = list.map((item, i) => {
+        const tempCtx = createContext({ [itemName]: item, $index: i }, ctx);
+        return { key: evaluate(keyExpr, tempCtx), item, i };
+      });
+
+      const nextKeySet = new Set(newOrder.map((e) => e.key));
+
+      // Remove wrappers whose keys are no longer in the list.
+      for (const [key, wrapper] of keyMap) {
+        if (!nextKeySet.has(key)) {
+          _disposeChildren(wrapper);
+          wrapper.remove();
+          keyMap.delete(key);
+        }
+      }
+
+      // Create new wrappers and update existing ones.
+      newOrder.forEach(({ key, item, i }) => {
+        const childData = {
+          [itemName]: item,
+          $index: i,
+          $count: count,
+          $first: i === 0,
+          $last: i === count - 1,
+          $even: i % 2 === 0,
+          $odd: i % 2 !== 0,
+        };
+
+        if (!keyMap.has(key)) {
+          const clone = tpl.content.cloneNode(true);
+          const wrapper = document.createElement("div");
+          wrapper.style.display = "contents";
+          wrapper.__ctx = createContext(childData, ctx);
+          wrapper.appendChild(clone);
+          keyMap.set(key, wrapper);
+          el.appendChild(wrapper); // placed at end; reordered below
+          processTree(wrapper);
+
+          if (animEnter) {
+            const firstChild = wrapper.firstElementChild;
+            if (firstChild) {
+              firstChild.classList.add(animEnter);
+              firstChild.addEventListener(
+                "animationend",
+                () => firstChild.classList.remove(animEnter),
+                { once: true },
+              );
+              if (stagger) firstChild.style.animationDelay = i * stagger + "ms";
+            }
+          }
+        } else {
+          // Existing item: update positional metadata and notify watchers.
+          Object.assign(keyMap.get(key).__ctx.__raw, childData);
+          keyMap.get(key).__ctx.$notify();
+        }
+      });
+
+      // Reorder DOM to match the new list using a single forward pass.
+      for (let i = 0; i < newOrder.length; i++) {
+        const wrapper = keyMap.get(newOrder[i].key);
+        if (wrapper !== el.children[i]) el.insertBefore(wrapper, el.children[i] ?? null);
+      }
+    }
+
+    // Full rebuild: dispose all children and recreate from scratch.
+    // Used when no `key` attribute is set (backward-compatible behaviour).
+    function rebuildItems(tpl, list) {
       const count = list.length;
       _disposeChildren(el);
       el.innerHTML = "";
@@ -109,7 +190,6 @@ registerDirective("each", {
           if (firstChild) {
             firstChild.classList.add(animEnter);
             firstChild.addEventListener("animationend", () => firstChild.classList.remove(animEnter), { once: true });
-            // Stagger animation — delay must be on the child, not the wrapper
             if (stagger) {
               firstChild.style.animationDelay = i * stagger + "ms";
             }
@@ -135,6 +215,7 @@ registerDirective("foreach", {
     const limit = parseInt(el.getAttribute("limit")) || Infinity;
     const offset = parseInt(el.getAttribute("offset")) || 0;
     const tplId = el.getAttribute("template");
+    const keyExpr = el.getAttribute("key");
     const animEnter = el.getAttribute("animate-enter") || el.getAttribute("animate");
     const animLeave = el.getAttribute("animate-leave");
     const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
@@ -157,6 +238,7 @@ registerDirective("foreach", {
       templateContent.removeAttribute("offset");
       templateContent.removeAttribute("else");
       templateContent.removeAttribute("template");
+      templateContent.removeAttribute("key");
       templateContent.removeAttribute("animate-enter");
       templateContent.removeAttribute("animate");
       templateContent.removeAttribute("animate-leave");
@@ -164,6 +246,9 @@ registerDirective("foreach", {
       templateContent.removeAttribute("animate-duration");
     }
 
+    // key → wrapper div; only populated when the `key` attribute is set.
+    const keyMap = new Map();
+
     function update() {
       let list = resolve(fromPath, ctx);
       if (!Array.isArray(list)) return;
@@ -199,6 +284,7 @@ registerDirective("foreach", {
         const clone = _cloneTemplate(elseTpl);
         if (clone) {
           _disposeChildren(el);
+          keyMap.clear();
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -209,6 +295,11 @@ registerDirective("foreach", {
       const tpl = tplId ? document.getElementById(tplId) : null;
       const count = list.length;
 
+      if (keyExpr) {
+        reconcileForeachItems(tpl, list, count);
+        return;
+      }
+
       function renderForeachItems() {
         _disposeChildren(el);
         el.innerHTML = "";
@@ -244,7 +335,6 @@ registerDirective("foreach", {
             if (firstChild) {
               firstChild.classList.add(animEnter);
               firstChild.addEventListener("animationend", () => firstChild.classList.remove(animEnter), { once: true });
-              // Stagger animation — delay must be on the child, not the wrapper
               if (stagger) {
                 firstChild.style.animationDelay = (i * stagger) + "ms";
               }
@@ -273,6 +363,81 @@ registerDirective("foreach", {
       }
     }
 
+    // Key-based reconciliation for foreach — mirrors each's reconcileItems.
+    // Applied to the final (filtered, sorted, sliced) list so keys always
+    // correspond to what is actually rendered.
+    function reconcileForeachItems(tpl, list, count) {
+      // On first render the element may still hold its original inline template
+      // markup (the same content that was captured into templateContent).
+      // Clear it so only managed wrappers appear as children.
+      if (keyMap.size === 0) el.innerHTML = "";
+
+      const newOrder = list.map((item, i) => {
+        const tempCtx = createContext({ [itemName]: item, [indexName]: i }, ctx);
+        return { key: evaluate(keyExpr, tempCtx), item, i };
+      });
+
+      const nextKeySet = new Set(newOrder.map((e) => e.key));
+
+      for (const [key, wrapper] of keyMap) {
+        if (!nextKeySet.has(key)) {
+          _disposeChildren(wrapper);
+          wrapper.remove();
+          keyMap.delete(key);
+        }
+      }
+
+      newOrder.forEach(({ key, item, i }) => {
+        const childData = {
+          [itemName]: item,
+          [indexName]: i,
+          $index: i,
+          $count: count,
+          $first: i === 0,
+          $last: i === count - 1,
+          $even: i % 2 === 0,
+          $odd: i % 2 !== 0,
+        };
+
+        if (!keyMap.has(key)) {
+          let clone;
+          if (tpl) {
+            clone = tpl.content.cloneNode(true);
+          } else {
+            clone = templateContent.cloneNode(true);
+          }
+          const wrapper = document.createElement("div");
+          wrapper.style.display = "contents";
+          wrapper.__ctx = createContext(childData, ctx);
+          wrapper.appendChild(clone);
+          keyMap.set(key, wrapper);
+          el.appendChild(wrapper);
+          processTree(wrapper);
+
+          if (animEnter) {
+            const firstChild = wrapper.firstElementChild;
+            if (firstChild) {
+              firstChild.classList.add(animEnter);
+              firstChild.addEventListener(
+                "animationend",
+                () => firstChild.classList.remove(animEnter),
+                { once: true },
+              );
+              if (stagger) firstChild.style.animationDelay = i * stagger + "ms";
+            }
+          }
+        } else {
+          Object.assign(keyMap.get(key).__ctx.__raw, childData);
+          keyMap.get(key).__ctx.$notify();
+        }
+      });
+
+      for (let i = 0; i < newOrder.length; i++) {
+        const wrapper = keyMap.get(newOrder[i].key);
+        if (wrapper !== el.children[i]) el.insertBefore(wrapper, el.children[i] ?? null);
+      }
+    }
+
     _watchExpr(fromPath, ctx, update);
     update();
   },

package/src/directives/state.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: state, store, computed, watch
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _log, _watchExpr } from "../globals.js";
+import { _stores, _log, _warn, _watchExpr } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext } from "../dom.js";
@@ -20,6 +20,10 @@ registerDirective("state", {
     // Persistence
     const persist = el.getAttribute("persist");
     const persistKey = el.getAttribute("persist-key");
+    if (persist && !persistKey) {
+      _warn(`persist="${persist}" requires a persist-key attribute. State will not be persisted.`);
+      return;
+    }
     if (persist && persistKey) {
       const store =
         persist === "localStorage"
@@ -28,21 +32,28 @@ registerDirective("state", {
             ? sessionStorage
             : null;
       if (store) {
+        const persistFieldsAttr = el.getAttribute("persist-fields");
+        const persistFields = persistFieldsAttr
+          ? new Set(persistFieldsAttr.split(",").map((f) => f.trim()))
+          : null;
         try {
           const saved = store.getItem("nojs_state_" + persistKey);
           if (saved) {
             const parsed = JSON.parse(saved);
-            for (const [k, v] of Object.entries(parsed)) ctx.$set(k, v);
+            for (const [k, v] of Object.entries(parsed)) {
+              if (!persistFields || persistFields.has(k)) ctx.$set(k, v);
+            }
           }
         } catch {
           /* ignore */
         }
         ctx.$watch(() => {
           try {
-            store.setItem(
-              "nojs_state_" + persistKey,
-              JSON.stringify(ctx.__raw),
-            );
+            const raw = ctx.__raw;
+            const data = persistFields
+              ? Object.fromEntries(Object.entries(raw).filter(([k]) => persistFields.has(k)))
+              : raw;
+            store.setItem("nojs_state_" + persistKey, JSON.stringify(data));
           } catch {
             /* ignore */
           }

package/src/dom.js

@@ -33,14 +33,48 @@ export function _cloneTemplate(id) {
   return tpl.content ? tpl.content.cloneNode(true) : null;
 }
 
-// Simple HTML sanitizer
+// Structural HTML sanitizer — uses DOMParser to parse the markup before cleaning.
+// Regex-based sanitizers are bypassable via SVG/MathML event handlers, nested
+// srcdoc attributes, and HTML entity encoding (e.g. javascript:).
+// DOMParser resolves entities and builds a real DOM tree, making all vectors
+// uniformly detectable by a single attribute-name/value check.
+//
+// Custom hook: set _config.sanitizeHtml to a function to plug in an external
+// sanitizer (e.g. DOMPurify) without bundling it as a hard dependency.
+const _BLOCKED_TAGS = new Set([
+  'script', 'style', 'iframe', 'object', 'embed',
+  'base', 'form', 'meta', 'link', 'noscript',
+]);
+
 export function _sanitizeHtml(html) {
   if (!_config.sanitize) return html;
-  const safe = html
-    .replace(/<script[\s\S]*?<\/script>/gi, "")
-    .replace(/on\w+\s*=/gi, "data-blocked=")
-    .replace(/javascript:/gi, "");
-  return safe;
+  if (typeof _config.sanitizeHtml === 'function') return _config.sanitizeHtml(html);
+
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+
+  function _clean(node) {
+    for (const child of [...node.childNodes]) {
+      if (child.nodeType !== 1) continue; // text and comment nodes are safe
+      if (_BLOCKED_TAGS.has(child.tagName.toLowerCase())) {
+        child.remove();
+        continue;
+      }
+      for (const attr of [...child.attributes]) {
+        const n = attr.name.toLowerCase();
+        const v = attr.value.toLowerCase().trimStart();
+        const isUrlAttr = n === 'href' || n === 'src' || n === 'action' || n === 'xlink:href';
+        const isDangerousScheme = v.startsWith('javascript:') || v.startsWith('vbscript:');
+        const isDangerousData = isUrlAttr && v.startsWith('data:') && !/^data:image\//.test(v);
+        if (n.startsWith('on') || isDangerousScheme || isDangerousData) {
+          child.removeAttribute(attr.name);
+        }
+      }
+      _clean(child);
+    }
+  }
+
+  _clean(doc.body);
+  return doc.body.innerHTML;
 }
 
 // Resolve a template src path.