@erickxavier/no-js 1.10.1 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.10.1",
+  "version": "1.11.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",

package/src/animations.js

@@ -33,16 +33,18 @@ function _injectBuiltInStyles() {
 
 export function _animateIn(el, animName, transitionName, durationMs) {
   _injectBuiltInStyles();
-  const fallback = durationMs || 1000;
+  // || 0: fires on the next event-loop tick when no CSS transition is present,
+  // instead of blocking for an arbitrary duration.
+  const fallback = durationMs || 0;
   if (animName) {
     const target = el.firstElementChild || el;
     target.classList.add(animName);
     if (durationMs) target.style.animationDuration = durationMs + "ms";
-    target.addEventListener(
-      "animationend",
-      () => target.classList.remove(animName),
-      { once: true },
-    );
+    const done = () => target.classList.remove(animName);
+    target.addEventListener("animationend", done, { once: true });
+    // Fallback: remove the class on the next tick if animationend never fires
+    // (e.g. CSS absent, element detached). Mirrors the transitionName branch.
+    setTimeout(done, fallback);
   }
   if (transitionName) {
     const target = el.firstElementChild || el;
@@ -68,7 +70,9 @@ export function _animateIn(el, animName, transitionName, durationMs) {
 
 export function _animateOut(el, animName, transitionName, callback, durationMs) {
   _injectBuiltInStyles();
-  const fallback = durationMs || 2000;
+  // || 0: fires on the next event-loop tick when no CSS animation/transition is
+  // present, instead of blocking for an arbitrary duration.
+  const fallback = durationMs || 0;
   if (!el.firstElementChild && !el.childNodes.length) {
     callback();
     return () => {};

package/src/context.js

@@ -2,7 +2,7 @@
 //  REACTIVE CONTEXT
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _config, _stores, _refs, _routerInstance, _currentEl } from "./globals.js";
+import { _config, _stores, _refs, _routerInstance, _currentEl, _globals } from "./globals.js";
 import { _i18n } from "./i18n.js";
 import { _devtoolsEmit, _ctxRegistry } from "./devtools.js";
 
@@ -95,6 +95,10 @@ export function createContext(data = {}, parent = null) {
       if (key === "$router") return _routerInstance;
       if (key === "$i18n") return _i18n;
       if (key === "$form") return target.$form || null;
+      // Plugin globals fallback (after all core $ checks)
+      if (key.startsWith("$") && key.slice(1) in _globals) {
+        return _globals[key.slice(1)];
+      }
       if (key in target) return target[key];
       if (parent && parent.__isProxy) return parent[key];
       return undefined;
@@ -116,6 +120,7 @@ export function createContext(data = {}, parent = null) {
     },
     has(target, key) {
       if (key in target) return true;
+      if (typeof key === "string" && key.startsWith("$") && key.slice(1) in _globals) return true;
       if (parent && parent.__isProxy) return key in parent;
       return false;
     },

package/src/devtools.js

@@ -4,7 +4,7 @@
 //  All hooks are guarded by _config.devtools — no cost when disabled.
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _config, _stores, _refs, _routerInstance } from "./globals.js";
+import { _config, _stores, _refs, _routerInstance, _plugins, _globals } from "./globals.js";
 import { _i18n } from "./i18n.js";
 
 // ─── Context registry (populated by createContext when devtools enabled) ────
@@ -237,6 +237,15 @@ function _handleDevtoolsCommand(event) {
   );
 }
 
+// ─── Cleanup reference ───────────────────────────────────────────────────────
+
+let _devtoolsCleanup = null;
+
+// Called from NoJS.dispose() to remove the command listener and clean up.
+export function destroyDevtools() {
+  if (_devtoolsCleanup) _devtoolsCleanup();
+}
+
 // ─── Initialization ─────────────────────────────────────────────────────────
 
 export function initDevtools(nojs) {
@@ -247,17 +256,36 @@ export function initDevtools(nojs) {
     return;
   }
 
-  // Listen for commands
+  // Listen for commands (store reference for cleanup)
   window.addEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
+  _devtoolsCleanup = () => {
+    window.removeEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
+    delete window.__NOJS_DEVTOOLS__;
+    _devtoolsCleanup = null;
+  };
 
   // Expose public API on window
   window.__NOJS_DEVTOOLS__ = {
-    // Data access
-    stores: _stores,
-    config: _config,
-    refs: _refs,
+    // Data access (read-only snapshots — no live references leak)
+    get stores() {
+      return Object.fromEntries(
+        Object.entries(_stores).map(([k, v]) => [k, _safeSnapshot(v)])
+      );
+    },
+    get config() {
+      const c = { ..._config };
+      if (c.headers) c.headers = { ...c.headers };
+      if (c.router) c.router = { ...c.router };
+      if (c.cache) c.cache = { ...c.cache };
+      if (c.csrf) c.csrf = { ...c.csrf };
+      if (c.i18n) c.i18n = { ...c.i18n };
+      return c;
+    },
+    get refs() { return { ..._refs }; },
     router: _routerInstance,
     version: nojs.version,
+    get plugins() { return new Map(_plugins); },
+    get globals() { return { ..._globals }; },
 
     // Inspect API
     inspect: (selector) => _inspectElement(selector),

package/src/directives/binding.js

@@ -2,10 +2,10 @@
 //  DIRECTIVES: bind, bind-html, bind-*, model
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _watchExpr, _onDispose } from "../globals.js";
+import { _watchExpr, _onDispose, _config, _warn } from "../globals.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext, _sanitizeHtml } from "../dom.js";
-import { registerDirective } from "../registry.js";
+import { registerDirective, _disposeChildren } from "../registry.js";
 
 registerDirective("bind", {
   priority: 20,
@@ -24,9 +24,19 @@ registerDirective("bind-html", {
   priority: 20,
   init(el, name, expr) {
     const ctx = findContext(el);
+    if ((_config.debug || _config.devtools) && !/^['"`]/.test(expr.trim())) {
+      _warn(
+        `[Security] bind-html used with dynamic expression: "${expr}". ` +
+          `Ensure the value is trusted or sanitized — use bind for plain text.`,
+        el
+      );
+    }
     function update() {
       const val = evaluate(expr, ctx);
-      if (val != null) el.innerHTML = _sanitizeHtml(String(val));
+      if (val != null) {
+        _disposeChildren(el);
+        el.innerHTML = _sanitizeHtml(String(val));
+      }
     }
     _watchExpr(expr, ctx, update);
     update();

package/src/directives/dnd.js

@@ -805,7 +805,7 @@ registerDirective("drag-list", {
         wrapper.addEventListener("dragend", itemDragend);
 
         // Keyboard DnD on items
-        wrapper.addEventListener("keydown", (e) => {
+        const itemKeydown = (e) => {
           if (e.key === " " && !_dndState.dragging) {
             e.preventDefault();
             _dndState.dragging = {
@@ -842,7 +842,16 @@ registerDirective("drag-list", {
               prevEl.focus();
             }
           }
-        });
+        };
+        wrapper.addEventListener("keydown", itemKeydown);
+
+        // Register cleanup on wrapper so disposers run when _disposeChildren(el) is called
+        wrapper.__disposers = wrapper.__disposers || [];
+        wrapper.__disposers.push(
+          () => wrapper.removeEventListener("dragstart", itemDragstart),
+          () => wrapper.removeEventListener("dragend", itemDragend),
+          () => wrapper.removeEventListener("keydown", itemKeydown),
+        );
 
         processTree(wrapper);
       });

package/src/directives/events.js

@@ -127,6 +127,7 @@ registerDirective("on:*", {
         clearTimeout(timer);
         timer = setTimeout(() => original(e), debounceMs);
       };
+      _onDispose(() => clearTimeout(timer));
     }
 
     // Wrap with throttle

package/src/directives/head.js

@@ -0,0 +1,142 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: page-title, page-description, page-canonical, page-jsonld
+// ═══════════════════════════════════════════════════════════════════════
+//
+//  These directives update <head> elements reactively using the same
+//  _watchExpr + evaluate() infrastructure as all other directives.
+//  They are meant for placement in the page body (not inside <head>).
+//  Use <div hidden> as the host element — it is invisible, semantically
+//  neutral, and avoids custom attributes on void elements like <meta>:
+//
+//    <div hidden page-title="product.name + ' | My Store'"></div>
+//    <div hidden page-title="'About Us | My Store'"></div>
+//    <div hidden page-description="product.description"></div>
+//    <div hidden page-canonical="'/products/' + product.slug"></div>
+//    <div hidden page-jsonld>
+//      { "@type": "Product", "name": "{product.name}" }
+//    </div>
+//
+//  Note: <script> elements are skipped by processTree; use <div hidden>
+//  as the host element for page-jsonld.
+//
+//  Each directive watches its expression and re-applies the side effect
+//  whenever the reactive context changes.
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _watchExpr } from "../globals.js";
+import { evaluate, resolve } from "../evaluate.js";
+import { findContext } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+// Interpolate {key} placeholders in a string without URL-encoding.
+// Used by page-jsonld where the template is a JSON string.
+function _interpolateRaw(str, ctx) {
+  // Match only {identifiers} — skip { starting with " or ' to avoid consuming JSON structure.
+  return str.replace(/\{([^}"'{][^}]*)\}/g, (_, expr) => {
+    try {
+      const val = evaluate(expr.trim(), ctx);
+      return val != null ? String(val) : "";
+    } catch (_) {
+      return "";
+    }
+  });
+}
+
+// ── page-title ────────────────────────────────────────────────────────────────
+// Updates document.title reactively.
+// Value is a No.JS expression: page-title="product.name + ' | Store'"
+registerDirective("page-title", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val != null) document.title = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+// ── page-description ──────────────────────────────────────────────────────────
+// Creates or updates <meta name="description" content="..."> in <head>.
+// Value is a No.JS expression: page-description="product.description"
+registerDirective("page-description", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val == null) return;
+      let meta = document.querySelector('meta[name="description"]');
+      if (!meta) {
+        meta = document.createElement("meta");
+        meta.name = "description";
+        document.head.appendChild(meta);
+      }
+      meta.content = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+// ── page-canonical ────────────────────────────────────────────────────────────
+// Creates or updates <link rel="canonical" href="..."> in <head>.
+// Value is a No.JS expression: page-canonical="'/products/' + product.slug"
+registerDirective("page-canonical", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val == null) return;
+      let link = document.querySelector('link[rel="canonical"]');
+      if (!link) {
+        link = document.createElement("link");
+        link.rel = "canonical";
+        document.head.appendChild(link);
+      }
+      link.href = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+// ── page-jsonld ───────────────────────────────────────────────────────────────
+// Creates or updates a <script type="application/ld+json" data-nojs> in <head>.
+// Value is either:
+//   - A No.JS expression that evaluates to an object → JSON.stringify is applied
+//   - A JSON string with {interpolation} placeholders → _interpolate is applied
+//
+// The data-nojs marker distinguishes the managed tag from any hand-written
+// JSON-LD the developer may have added, so they can coexist.
+registerDirective("page-jsonld", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    // The JSON template lives in the element's text content (or innerHTML for
+    // elements like <div hidden>). The attribute value (expr) is intentionally
+    // empty — the developer writes the JSON template as the element body.
+    const template = (el.textContent || el.innerHTML).trim();
+    if (!template) return;
+    function update() {
+      // Resolve {interpolation} placeholders in the JSON template.
+      const json = _interpolateRaw(template, ctx);
+      if (!json) return;
+      let script = document.querySelector(
+        'script[type="application/ld+json"][data-nojs]',
+      );
+      if (!script) {
+        script = document.createElement("script");
+        script.type = "application/ld+json";
+        script.setAttribute("data-nojs", "");
+        document.head.appendChild(script);
+      }
+      script.textContent = json;
+    }
+    _watchExpr(template, ctx, update);
+    update();
+  },
+});

package/src/directives/http.js

@@ -10,6 +10,7 @@ import {
   _emitEvent,
   _routerInstance,
   _onDispose,
+  _SENSITIVE_HEADERS,
 } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
@@ -20,11 +21,6 @@ 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,

package/src/directives/i18n.js

@@ -7,7 +7,7 @@ import { _i18n, _watchI18n, _loadI18nNamespace, _notifyI18n } from "../i18n.js";
 import { _watchExpr } from "../globals.js";
 import { evaluate } from "../evaluate.js";
 import { findContext, _sanitizeHtml } from "../dom.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 
 registerDirective("t", {
   priority: 20,
@@ -25,6 +25,7 @@ registerDirective("t", {
       }
       const text = _i18n.t(key, params);
       if (useHtml) {
+        _disposeChildren(el);
         el.innerHTML = _sanitizeHtml(text);
       } else {
         el.textContent = text;

package/src/directives/loops.js

@@ -72,7 +72,8 @@ registerDirective("each", {
             if (remaining <= 0) renderItems(tpl, list);
           };
           target.addEventListener("animationend", done, { once: true });
-          setTimeout(done, animDuration || 2000);
+          // || 0: unblocks the next render on the next tick when no CSS animation fires.
+          setTimeout(done, animDuration || 0);
         });
       } else {
         renderItems(tpl, list);
@@ -356,7 +357,8 @@ registerDirective("foreach", {
             if (remaining <= 0) renderForeachItems();
           };
           target.addEventListener("animationend", done, { once: true });
-          setTimeout(done, animDuration || 2000);
+          // || 0: unblocks the next render on the next tick when no CSS animation fires.
+          setTimeout(done, animDuration || 0);
         });
       } else {
         renderForeachItems();

package/src/directives/refs.js

@@ -10,6 +10,7 @@ import {
   _routerInstance,
   _warn,
   _onDispose,
+  _SENSITIVE_HEADERS,
 } from "../globals.js";
 import { _devtoolsEmit } from "../devtools.js";
 import { createContext } from "../context.js";
@@ -128,6 +129,14 @@ registerDirective("call", {
         }
 
         const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
+        if (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 data = await _doFetch(
           resolvedUrl,
           method,

package/src/directives/state.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: state, store, computed, watch
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _log, _warn, _watchExpr } from "../globals.js";
+import { _stores, _log, _warn, _watchExpr, _onDispose } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext } from "../dom.js";
@@ -66,7 +66,7 @@ registerDirective("state", {
           _warn('State key(s) ' + riskyKeys.map(k => '"' + k + '"').join(', ') + ' may contain sensitive data. Consider using persist-fields to exclude them.');
         }
 
-        ctx.$watch(() => {
+        const unwatch = ctx.$watch(() => {
           try {
             const raw = ctx.__raw;
             const data = persistFields
@@ -77,6 +77,7 @@ registerDirective("state", {
             /* ignore */
           }
         });
+        _onDispose(() => { if (unwatch) unwatch(); });
       }
     }
 

package/src/directives/validation.js

@@ -417,26 +417,33 @@ registerDirective("validate", {
 
         if (triggers.includes("input")) {
           field.addEventListener("input", handler);
+          _onDispose(() => field.removeEventListener("input", handler));
         } else {
           // Always track dirty and re-validate on input for data accuracy
           // (validate-on only affects visual feedback like error-class/templates)
-          field.addEventListener("input", () => {
+          const silentInputHandler = () => {
             dirtyFields.add(field.name);
             formCtx.dirty = true;
             checkValidity();
-          });
+          };
+          field.addEventListener("input", silentInputHandler);
+          _onDispose(() => field.removeEventListener("input", silentInputHandler));
         }
         if (triggers.includes("blur") || triggers.includes("focusout")) {
-          field.addEventListener("focusout", (e) => {
+          const blurFocusoutHandler = (e) => {
             touchHandler();
             if (triggers.includes("blur")) handler();
-          });
+          };
+          field.addEventListener("focusout", blurFocusoutHandler);
+          _onDispose(() => field.removeEventListener("focusout", blurFocusoutHandler));
         } else {
           // Always track touched on focusout
           field.addEventListener("focusout", touchHandler);
+          _onDispose(() => field.removeEventListener("focusout", touchHandler));
         }
         if (triggers.includes("submit")) {
           field.addEventListener("focusout", touchHandler);
+          _onDispose(() => field.removeEventListener("focusout", touchHandler));
         }
       }
 
@@ -455,14 +462,18 @@ registerDirective("validate", {
           checkValidity();
         };
         el.addEventListener("input", inputHandler);
+        _onDispose(() => el.removeEventListener("input", inputHandler));
         el.addEventListener("change", inputHandler);
-        el.addEventListener("focusout", (e) => {
+        _onDispose(() => el.removeEventListener("change", inputHandler));
+        const focusoutHandler = (e) => {
           if (e.target && e.target.name) {
             touchedFields.add(e.target.name);
           }
           formCtx.touched = true;
           checkValidity();
-        });
+        };
+        el.addEventListener("focusout", focusoutHandler);
+        _onDispose(() => el.removeEventListener("focusout", focusoutHandler));
       } else {
         // Per-field event binding with validate-on
         for (const field of getFields()) {
@@ -470,7 +481,7 @@ registerDirective("validate", {
         }
       }
 
-      el.addEventListener("submit", (e) => {
+      const submitHandler = (e) => {
         // If validate-on="submit", run validation now
         formCtx.submitting = true;
         // Mark all fields as touched on submit
@@ -484,7 +495,9 @@ registerDirective("validate", {
           formCtx.submitting = false;
           ctx.$set("$form", { ...formCtx });
         });
-      });
+      };
+      el.addEventListener("submit", submitHandler);
+      _onDispose(() => el.removeEventListener("submit", submitHandler));
 
       // Initial check
       requestAnimationFrame(checkValidity);
@@ -501,7 +514,7 @@ registerDirective("validate", {
         el.tagName === "SELECT")
     ) {
       const errorTpl = el.getAttribute("error");
-      el.addEventListener("input", () => {
+      const fieldInputHandler = () => {
         const err = _validateField(el.value, rules, {});
         if (err && errorTpl) {
           let errorEl = el.nextElementSibling?.__validationError
@@ -516,6 +529,7 @@ registerDirective("validate", {
           const clone = _cloneTemplate(errorTpl);
           if (clone) {
             const childCtx = createContext({ err: { message: err } }, ctx);
+            _disposeChildren(errorEl);
             errorEl.innerHTML = "";
             errorEl.__ctx = childCtx;
             errorEl.appendChild(clone);
@@ -525,9 +539,14 @@ registerDirective("validate", {
           const errorEl = el.nextElementSibling?.__validationError
             ? el.nextElementSibling
             : null;
-          if (errorEl) errorEl.innerHTML = "";
+          if (errorEl) {
+            _disposeChildren(errorEl);
+            errorEl.innerHTML = "";
+          }
         }
-      });
+      };
+      el.addEventListener("input", fieldInputHandler);
+      _onDispose(() => el.removeEventListener("input", fieldInputHandler));
     }
   },
 });
@@ -556,9 +575,11 @@ registerDirective("error-boundary", {
     }
 
     // Listen for NoJS expression errors dispatched from event handlers
-    el.addEventListener("nojs:error", (e) => {
+    const nojsErrorHandler = (e) => {
       showFallback(e.detail?.message || "An error occurred");
-    });
+    };
+    el.addEventListener("nojs:error", nojsErrorHandler);
+    _onDispose(() => el.removeEventListener("nojs:error", nojsErrorHandler));
 
     // Listen for window-level errors (resource load failures, etc.)
     const errorHandler = (e) => {

package/src/dom.js

@@ -33,6 +33,51 @@ export function _cloneTemplate(id) {
   return tpl.content ? tpl.content.cloneNode(true) : null;
 }
 
+// ─── SVG data URI deep-sanitization ──────────────────────────────────────────
+// Strip JS vectors from raw SVG markup using DOMParser for robust sanitization.
+// Regex-based approaches are bypassable via entity encoding and nested contexts.
+function _sanitizeSvgContent(svg) {
+  const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  const root = doc.documentElement;
+  if (root.querySelector("parsererror") ||
+      root.nodeName !== "svg" ||
+      root.getElementsByTagNameNS("http://www.mozilla.org/newlayout/xml/parsererror.xml", "parsererror").length) {
+    return "<svg></svg>";
+  }
+  function cleanAttrs(node) {
+    for (const attr of [...node.attributes]) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) { node.removeAttribute(attr.name); continue; }
+      if ((name === "href" || name === "xlink:href") &&
+          attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        node.removeAttribute(attr.name);
+      }
+    }
+  }
+  for (const s of [...root.querySelectorAll("script")]) s.remove();
+  cleanAttrs(root);
+  for (const node of root.querySelectorAll("*")) cleanAttrs(node);
+  return new XMLSerializer().serializeToString(root);
+}
+
+// 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 "#";
+  }
+}
+
 // 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. &#x6A;avascript:).
@@ -65,11 +110,15 @@ export function _sanitizeHtml(html) {
       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 isUrlAttr = n === 'href' || n === 'src' || n === 'action' || n === 'xlink:href'
+          || n === 'formaction' || n === 'poster' || n === 'data';
         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);
+        } else if (isUrlAttr && v.startsWith('data:image/svg+xml')) {
+          // Deep-sanitize SVG data URIs to strip embedded <script> and on* handlers
+          child.setAttribute(attr.name, _sanitizeSvgDataUri(attr.value));
         }
       }
       _clean(child);