@erickxavier/no-js 1.10.0 → 1.10.1

package/package.json

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

@@ -208,6 +208,8 @@ function _handleDevtoolsCommand(event) {
       break;
     case "get:config":
       result = { ..._config };
+      if (result.csrf) result.csrf = { ...result.csrf, token: '[REDACTED]' };
+      if (result.headers) result.headers = '[REDACTED]';
       break;
     case "get:routes":
       result = _routerInstance ? _routerInstance.routes || [] : [];

package/src/directives/binding.js

@@ -35,12 +35,37 @@ 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.
+// 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) {
-  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, "");
+  const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  const root = doc.documentElement;
+  // If parsing failed, DOMParser may wrap error in <parsererror> or produce a
+  // non-SVG root. In either case return an empty SVG for safety.
+  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();
+      // Remove on* event handlers
+      if (name.startsWith("on")) { node.removeAttribute(attr.name); continue; }
+      // Remove javascript: in href/xlink:href
+      if ((name === "href" || name === "xlink:href") &&
+          attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        node.removeAttribute(attr.name);
+      }
+    }
+  }
+  // Remove script elements
+  for (const s of [...root.querySelectorAll("script")]) s.remove();
+  // Clean attributes on root and all descendants
+  _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.

package/src/directives/http.js

@@ -126,7 +126,7 @@ for (const method of HTTP_METHODS) {
           }
 
           const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
-          if (_config.debug && headersAttr) {
+          if (headersAttr) {
             for (const k of Object.keys(extraHeaders)) {
               const lower = k.toLowerCase();
               if (_SENSITIVE_HEADERS.has(lower) || /^x-(auth|api)-/.test(lower)) {
@@ -134,24 +134,16 @@ for (const method of HTTP_METHODS) {
               }
             }
           }
-          const savedRetries = _config.retries;
-          const savedRetryDelay = _config.retryDelay;
-          _config.retries = retryCount;
-          _config.retryDelay = retryDelay;
-          let data;
-          try {
-            data = await _doFetch(
-              resolvedUrl,
-              method,
-              reqBody,
-              extraHeaders,
-              el,
-              _activeAbort.signal,
-            );
-          } finally {
-            _config.retries = savedRetries;
-            _config.retryDelay = savedRetryDelay;
-          }
+          const data = await _doFetch(
+            resolvedUrl,
+            method,
+            reqBody,
+            extraHeaders,
+            el,
+            _activeAbort.signal,
+            retryCount,
+            retryDelay,
+          );
 
           // Cache response
           if (method === "get") _cacheSet(cacheKey, data, cacheStrategy);

package/src/directives/i18n.js

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

package/src/directives/state.js

@@ -12,9 +12,9 @@ import { _devtoolsEmit } from "../devtools.js";
 registerDirective("state", {
   priority: 0,
   init(el, name, value) {
-    const data = evaluate(value, createContext()) || {};
+    const initialState = evaluate(value, createContext()) || {};
     const parent = el.parentElement ? findContext(el.parentElement) : null;
-    const ctx = createContext(data, parent);
+    const ctx = createContext(initialState, parent);
     el.__ctx = ctx;
 
     // Persistence
@@ -40,13 +40,32 @@ registerDirective("state", {
           const saved = store.getItem("nojs_state_" + persistKey);
           if (saved) {
             const parsed = JSON.parse(saved);
+            const schemaCheck = el.hasAttribute("persist-schema");
             for (const [k, v] of Object.entries(parsed)) {
-              if (!persistFields || persistFields.has(k)) ctx.$set(k, v);
+              if (!persistFields || persistFields.has(k)) {
+                if (schemaCheck) {
+                  if (!(k in initialState)) { _warn('persist-schema: ignoring unknown key "' + k + '"'); continue; }
+                  if (initialState[k] !== null && v !== null && typeof v !== typeof initialState[k]) {
+                    _warn('persist-schema: type mismatch for "' + k + '" (expected ' + typeof initialState[k] + ', got ' + typeof v + ')');
+                    continue;
+                  }
+                }
+                ctx.$set(k, v);
+              }
             }
           }
         } catch {
           /* ignore */
         }
+
+        // Warn about potentially sensitive field names in persisted state
+        const sensitiveNames = ['token', 'password', 'secret', 'key', 'auth', 'credential', 'session'];
+        const stateKeys = Object.keys(initialState);
+        const riskyKeys = stateKeys.filter(k => sensitiveNames.some(s => k.toLowerCase().includes(s)));
+        if (riskyKeys.length > 0) {
+          _warn('State key(s) ' + riskyKeys.map(k => '"' + k + '"').join(', ') + ' may contain sensitive data. Consider using persist-fields to exclude them.');
+        }
+
         ctx.$watch(() => {
           try {
             const raw = ctx.__raw;
@@ -61,7 +80,7 @@ registerDirective("state", {
       }
     }
 
-    _log("state", data);
+    _log("state", initialState);
   },
 });
 

package/src/directives/styling.js

@@ -55,7 +55,7 @@ registerDirective("class-*", {
       el.classList.toggle(suffix, !!evaluate(expr, ctx));
     }
     _watchExpr(expr, ctx, update);
-    if (expr.includes("$i18n") || expr.includes("NoJS.locale")) _watchI18n(update);
+    if (expr.includes("$i18n") || expr.includes("NoJS.locale") || expr.includes("window.NoJS.locale")) _watchI18n(update);
     update();
   },
 });

package/src/dom.js

@@ -47,7 +47,10 @@ const _BLOCKED_TAGS = new Set([
 ]);
 
 export function _sanitizeHtml(html) {
-  if (!_config.sanitize) return html;
+  if (_config.dangerouslyDisableSanitize || !_config.sanitize) {
+    _warn('HTML sanitization is DISABLED. This exposes your app to XSS attacks. Only disable for trusted content.');
+    return html;
+  }
   if (typeof _config.sanitizeHtml === 'function') return _config.sanitizeHtml(html);
 
   const doc = new DOMParser().parseFromString(html, 'text/html');
@@ -98,6 +101,18 @@ function _resolveTemplateSrc(src, tpl) {
   return resolveUrl(src, tpl);
 }
 
+// Warn when a template URL uses plain HTTP from an HTTPS page (mixed content / MITM risk).
+// The optional pageProtocol parameter enables testing without mutating jsdom's
+// non-configurable window.location.protocol property.
+export function _warnIfInsecureTemplateUrl(resolvedUrl, src, pageProtocol) {
+  const proto = pageProtocol !== undefined
+    ? pageProtocol
+    : (typeof window !== 'undefined' && window.location ? window.location.protocol : '');
+  if (resolvedUrl.startsWith('http://') && proto === 'https:') {
+    _warn('Template "' + src + '" is loaded over insecure HTTP from an HTTPS page. Use HTTPS to prevent tampering.');
+  }
+}
+
 export async function _loadRemoteTemplates(root) {
   const scope = root || document;
   const templates = scope.querySelectorAll("template[src]");
@@ -108,6 +123,7 @@ export async function _loadRemoteTemplates(root) {
     tpl.__srcLoaded = true;
     const src = tpl.getAttribute("src");
     const resolvedUrl = _resolveTemplateSrc(src, tpl);
+    _warnIfInsecureTemplateUrl(resolvedUrl, src);
     // Track the folder of this template so children can use "./" paths
     const baseFolder = resolvedUrl.substring(0, resolvedUrl.lastIndexOf("/") + 1);
     try {
@@ -163,6 +179,7 @@ export async function _loadTemplateElement(tpl) {
   _log("[LTE] START fetch:", src, "| route:", tpl.hasAttribute("route"), "| inDOM:", document.contains(tpl), "| loading:", tpl.getAttribute("loading"));
   tpl.__srcLoaded = true;
   const resolvedUrl = _resolveTemplateSrc(src, tpl);
+  _warnIfInsecureTemplateUrl(resolvedUrl, src);
   const baseFolder = resolvedUrl.substring(0, resolvedUrl.lastIndexOf("/") + 1);
 
   // Synchronously insert loading placeholder before the fetch begins

package/src/evaluate.js

@@ -736,7 +736,130 @@ const _SAFE_GLOBALS = {
 // network and storage APIs — fetch, XMLHttpRequest, localStorage, sessionStorage,
 // WebSocket, indexedDB — are unreachable from template code by default, closing
 // the surface where interpolated external data could trigger unintended requests.
-// window.fetch / window.localStorage remain accessible via the window object.
+// window, document, and location are further wrapped in Proxy objects below
+// to block sensitive sub-properties (fetch, cookie, navigation, etc.).
+
+// ── Security proxies for window, document, and location ─────────────────
+// Even though window/document are on the allow-list, we wrap them in Proxy
+// objects that block access to sensitive sub-properties (network, storage,
+// cookie, eval, etc.) while still allowing safe DOM / measurement APIs.
+
+const _BLOCKED_WINDOW_PROPS = new Set([
+  'fetch', 'XMLHttpRequest', 'localStorage', 'sessionStorage',
+  'WebSocket', 'indexedDB', 'eval', 'Function', 'importScripts',
+  'open', 'postMessage',
+]);
+// Props on window that must return safe proxies instead of raw objects
+const _WINDOW_PROXY_OVERRIDES = {}; // populated after proxy creation below
+
+const _BLOCKED_DOCUMENT_PROPS = new Set([
+  'cookie', 'domain', 'write', 'writeln', 'execCommand',
+]);
+
+const _safeWindow = typeof globalThis !== 'undefined' && typeof globalThis.window !== 'undefined'
+  ? new Proxy(globalThis.window, {
+      get(target, prop, receiver) {
+        if (typeof prop === 'string' && _BLOCKED_WINDOW_PROPS.has(prop)) return undefined;
+        if (typeof prop === 'string' && prop in _WINDOW_PROXY_OVERRIDES) return _WINDOW_PROXY_OVERRIDES[prop];
+        return Reflect.get(target, prop, receiver);
+      },
+      set(target, prop, value) {
+        // Block writes to dangerous window properties from expressions;
+        // allow writing user-defined properties (e.g. window.__myHelper)
+        if (typeof prop === 'string' && _BLOCKED_WINDOW_PROPS.has(prop)) return true;
+        if (prop === 'name' || prop === 'status') return true; // anti-exfiltration
+        target[prop] = value;
+        return true;
+      },
+    })
+  : undefined;
+
+const _safeDocument = typeof globalThis !== 'undefined' && typeof globalThis.document !== 'undefined'
+  ? new Proxy(globalThis.document, {
+      get(target, prop, receiver) {
+        if (typeof prop === 'string' && _BLOCKED_DOCUMENT_PROPS.has(prop)) return undefined;
+        if (prop === 'defaultView') return _safeWindow;
+        return Reflect.get(target, prop, receiver);
+      },
+      set(target, prop, value) {
+        if (typeof prop === 'string' && _BLOCKED_DOCUMENT_PROPS.has(prop)) return true;
+        target[prop] = value;
+        return true;
+      },
+    })
+  : undefined;
+
+// Read-only location wrapper — exposes common getters via a plain object with
+// property descriptors that read from the real location. Navigation methods are
+// replaced with no-ops. Using a plain object avoids Proxy invariant violations
+// on non-configurable properties (like location.assign).
+const _LOCATION_READ_PROPS = [
+  'href', 'pathname', 'search', 'hash', 'origin',
+  'hostname', 'port', 'protocol', 'host',
+];
+const _locationNoop = () => {};
+
+const _safeLocation = typeof globalThis !== 'undefined' && typeof globalThis.location !== 'undefined'
+  ? (() => {
+      const loc = {};
+      for (const prop of _LOCATION_READ_PROPS) {
+        Object.defineProperty(loc, prop, {
+          get() { return globalThis.location[prop]; },
+          set() { /* silently ignore writes */ },
+          enumerable: true, configurable: false,
+        });
+      }
+      loc.assign = _locationNoop;
+      loc.replace = _locationNoop;
+      loc.reload = _locationNoop;
+      loc.toString = () => globalThis.location.href;
+      return Object.freeze(loc);
+    })()
+  : undefined;
+
+// Read-only history wrapper — exposes state and length as read-only getters,
+// replaces navigation methods with no-ops. Prevents expressions from
+// manipulating browser history (pushState, back, forward, etc.).
+const _HISTORY_READ_PROPS = ['length', 'state', 'scrollRestoration'];
+
+const _safeHistory = typeof globalThis !== 'undefined' && typeof globalThis.history !== 'undefined'
+  ? (() => {
+      const h = {};
+      for (const prop of _HISTORY_READ_PROPS) {
+        Object.defineProperty(h, prop, {
+          get() { return globalThis.history[prop]; },
+          enumerable: true, configurable: false,
+        });
+      }
+      h.pushState = _locationNoop;
+      h.replaceState = _locationNoop;
+      h.back = _locationNoop;
+      h.forward = _locationNoop;
+      h.go = _locationNoop;
+      return Object.freeze(h);
+    })()
+  : undefined;
+
+// Navigator proxy — blocks sendBeacon (data exfiltration) and credentials
+const _BLOCKED_NAVIGATOR_PROPS = new Set(['sendBeacon', 'credentials']);
+const _safeNavigator = typeof globalThis !== 'undefined' && typeof globalThis.navigator !== 'undefined'
+  ? new Proxy(globalThis.navigator, {
+      get(target, prop, receiver) {
+        if (typeof prop === 'string' && _BLOCKED_NAVIGATOR_PROPS.has(prop)) return undefined;
+        return Reflect.get(target, prop, receiver);
+      },
+      set() { return true; }, // navigator props are browser-enforced read-only
+    })
+  : undefined;
+
+// Wire window.location → _safeLocation, window.document → _safeDocument,
+// window.history → _safeHistory, window.navigator → _safeNavigator
+// so accessing via the window proxy returns safe versions
+if (_safeLocation) _WINDOW_PROXY_OVERRIDES.location = _safeLocation;
+if (_safeDocument) _WINDOW_PROXY_OVERRIDES.document = _safeDocument;
+if (_safeHistory) _WINDOW_PROXY_OVERRIDES.history = _safeHistory;
+if (_safeNavigator) _WINDOW_PROXY_OVERRIDES.navigator = _safeNavigator;
+
 const _BROWSER_GLOBALS = new Set([
   'window', 'document', 'console', 'location', 'history',
   'navigator', 'screen', 'performance', 'crypto',
@@ -764,7 +887,14 @@ function _evalNode(node, scope) {
       case 'Identifier':
         if (node.name in scope) return scope[node.name];
         if (node.name in _SAFE_GLOBALS) return _SAFE_GLOBALS[node.name];
-        if (_BROWSER_GLOBALS.has(node.name) && typeof globalThis !== 'undefined') return globalThis[node.name];
+        if (_BROWSER_GLOBALS.has(node.name) && typeof globalThis !== 'undefined') {
+          if (node.name === 'window') return _safeWindow;
+          if (node.name === 'document') return _safeDocument;
+          if (node.name === 'location') return _safeLocation;
+          if (node.name === 'history') return _safeHistory;
+          if (node.name === 'navigator') return _safeNavigator;
+          return globalThis[node.name];
+        }
         return undefined;
 
       case 'Forbidden':
@@ -915,7 +1045,12 @@ function _evalNode(node, scope) {
         for (let i = 0; i < node.properties.length; i++) {
           const prop = node.properties[i];
           if (prop.spread) {
-            Object.assign(obj, _evalNode(prop.value, scope));
+            const src = _evalNode(prop.value, scope);
+            if (src && typeof src === 'object') {
+              for (const k of Object.keys(src)) {
+                if (!_FORBIDDEN_PROPS[k]) obj[k] = src[k];
+              }
+            }
           } else {
             const key = prop.computed ? _evalNode(prop.key, scope) : prop.key;
             if (_FORBIDDEN_PROPS[key]) continue;

package/src/fetch.js

@@ -4,6 +4,8 @@
 
 import { _config, _interceptors, _cache } from "./globals.js";
 
+const _MAX_CACHE = 200;
+
 export function resolveUrl(url, el) {
   if (
     url.startsWith("http://") ||
@@ -31,6 +33,8 @@ export async function _doFetch(
   extraHeaders = {},
   el = null,
   externalSignal = null,
+  retries = undefined,
+  retryDelay = undefined,
 ) {
   const fullUrl = resolveUrl(url, el);
   let opts = {
@@ -68,7 +72,7 @@ export async function _doFetch(
   }
 
   // Retry logic
-  const maxRetries = _config.retries || 0;
+  const maxRetries = retries !== undefined ? retries : (_config.retries || 0);
   let lastError;
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
@@ -115,7 +119,7 @@ export async function _doFetch(
       if (e.name === "AbortError") throw e; // Don't retry aborted requests
       lastError = e;
       if (attempt < maxRetries) {
-        await new Promise((r) => setTimeout(r, _config.retryDelay || 1000));
+        await new Promise((r) => setTimeout(r, retryDelay !== undefined ? retryDelay : (_config.retryDelay || 1000)));
       }
     }
   }
@@ -126,8 +130,12 @@ export function _cacheGet(key, strategy) {
   if (strategy === "none") return null;
   if (strategy === "memory") {
     const entry = _cache.get(key);
-    if (entry && Date.now() - entry.time < (_config.cache.ttl || 300000))
+    if (entry && Date.now() - entry.time < (_config.cache.ttl || 300000)) {
+      // Move to end (most-recently-used) for LRU eviction
+      _cache.delete(key);
+      _cache.set(key, entry);
       return entry.data;
+    }
     return null;
   }
   const store =
@@ -154,6 +162,11 @@ export function _cacheSet(key, data, strategy) {
   if (strategy === "none") return;
   const entry = { data, time: Date.now() };
   if (strategy === "memory") {
+    if (_cache.has(key)) {
+      _cache.delete(key); // refresh position before re-inserting
+    } else if (_cache.size >= _MAX_CACHE) {
+      _cache.delete(_cache.keys().next().value); // evict LRU (insertion-order first)
+    }
     _cache.set(key, entry);
     return;
   }

package/src/filters.js

@@ -20,7 +20,12 @@ _filters.slugify = (v) =>
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
     .replace(/^-|-$/g, "");
-_filters.nl2br = (v) => String(v ?? "").replace(/\n/g, "<br>");
+_filters.nl2br = (v) =>
+  String(v ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\n/g, "<br>");
 _filters.encodeUri = (v) => encodeURIComponent(String(v ?? ""));
 
 // Numbers

package/src/globals.js

@@ -17,8 +17,10 @@ export const _config = {
   debug: false,
   devtools: false,
   sanitize: true,
+  dangerouslyDisableSanitize: false,
   sanitizeHtml: null,
   exprCacheSize: 500,
+  maxEventListeners: 100,
 };
 
 export const _interceptors = { request: [], response: [] };

package/src/index.js

@@ -93,6 +93,9 @@ const NoJS = {
       opts.exprCacheSize = (Number.isFinite(n) && n > 0) ? n : 500;
     }
     Object.assign(_config, opts);
+    if (opts.sanitize === false) {
+      _warn('sanitize:false is deprecated — use dangerouslyDisableSanitize:true to make the risk explicit.');
+    }
     if (opts.headers)
       _config.headers = { ...prevHeaders, ...opts.headers };
     if (opts.csrf) _config.csrf = opts.csrf;
@@ -215,6 +218,12 @@ const NoJS = {
   // Event bus
   on(event, fn) {
     if (!_eventBus[event]) _eventBus[event] = [];
+    if (_eventBus[event].length >= _config.maxEventListeners) {
+      _warn(
+        'MaxListenersExceeded: event "' + event + '" has ' + _eventBus[event].length +
+        ' listeners (max ' + _config.maxEventListeners + '). Possible memory leak.'
+      );
+    }
     _eventBus[event].push(fn);
     return () => {
       _eventBus[event] = _eventBus[event].filter((f) => f !== fn);
@@ -249,7 +258,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.10.0",
+  version: "1.10.1",
 };
 
 export default NoJS;