spyne 0.23.0 → 0.24.0

package/src/spyne/utils/sanitize-data.js

@@ -4,7 +4,24 @@ import { SpyneAppProperties } from './spyne-app-properties.js'
 
 let _sanitizeData
 let isConfigured = false
-let forceStrict = false // legacy compatibility toggle
+let globalDisable = false
+let forceStrict = false // deprecated legacy toggle, see setSanitizeDataForceStrict
+
+/* ---------------------------------------------
+ * URI policy
+ *
+ * Allows https?, mailto:, tel:, data:image/ and any scheme-less
+ * (relative, fragment, query, protocol-relative) URL.
+ * All other schemes (javascript:, vbscript:, data:text/html, etc.) fail.
+ * ------------------------------------------- */
+const SAFE_URI_REGEXP = /^(?:(?:https?|mailto|tel):|data:image\/|(?![a-z][a-z0-9+.-]*:)[\s\S]*$)/i
+
+// Browsers strip ASCII control characters and whitespace when parsing URL
+// schemes, so "jav\tascript:" executes. Normalize before testing.
+// eslint-disable-next-line no-control-regex -- matching control chars is the point
+const normalizeUriForCheck = (val) => String(val).replace(/[\u0000-\u0020]/g, '')
+
+const isSafeUri = (val) => SAFE_URI_REGEXP.test(normalizeUriForCheck(val))
 
 /* ---------------------------------------------
  * Mode configurations
@@ -20,58 +37,175 @@ const SAFE_FOR_RICH_TEXT = {
   ADD_TAGS: ['iframe', 'input', 'button', 'link'],
   ALLOWED_ATTR: [
     'href', 'src', 'alt', 'class', 'title', 'width', 'height', 'style', 'target', 'rel',
-    'controls', 'poster', 'type', 'rows', 'cols'
+    'controls', 'poster', 'type', 'rows', 'cols', 'sandbox'
   ],
   ALLOW_DATA_ATTR: true,
   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange'],
   FORBID_TAGS: ['script', 'object', 'embed', 'meta'],
-  SAFE_URL_PATTERN: /^(https?:|mailto:|tel:|data:image\/)/i
+  ALLOWED_URI_REGEXP: SAFE_URI_REGEXP
 }
 
 const SAFE_FOR_APP = {
   FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'link', 'meta'],
   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange'],
-  ALLOW_DATA_ATTR: false
+  ALLOW_DATA_ATTR: false,
+  ALLOWED_URI_REGEXP: SAFE_URI_REGEXP
+}
+
+/* ---------------------------------------------
+ * Iframe policy
+ *
+ * Configured via config.iframes at SpyneApp.init:
+ *   allow          — undefined (mode default: richtext yes, app no) | true | false
+ *   allowedOrigins — [] (any https origin) | ['https://www.youtube.com', ...]
+ *   sandbox        — sandbox value forced onto iframes lacking one; false = never force
+ *
+ * A per-call override can be passed as opts.iframes to sanitizeData.
+ * ------------------------------------------- */
+const DEFAULT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-popups'
+
+let configuredIframePolicy = { allow: undefined, allowedOrigins: [], sandbox: DEFAULT_IFRAME_SANDBOX }
+let activeIframePolicy = configuredIframePolicy
+
+const resolveIframePolicy = (override) => {
+  if (!override) return configuredIframePolicy
+  return {
+    allow: override.allow !== undefined ? override.allow : configuredIframePolicy.allow,
+    allowedOrigins: override.allowedOrigins !== undefined ? override.allowedOrigins : configuredIframePolicy.allowedOrigins,
+    sandbox: override.sandbox !== undefined ? override.sandbox : configuredIframePolicy.sandbox
+  }
+}
+
+const iframeAllowedForMode = (mode, policy = activeIframePolicy) => {
+  if (policy.allow === undefined) return mode === 'richtext'
+  return policy.allow === true
+}
+
+// localhost is a secure context per the platform's own definition.
+const isTrustworthyLocalHostname = (hostname) =>
+  hostname === 'localhost' ||
+  hostname === '127.0.0.1' ||
+  hostname === '[::1]' ||
+  hostname.endsWith('.localhost')
+
+const isAllowedIframeSrc = (src, policy = activeIframePolicy) => {
+  const normalized = normalizeUriForCheck(src)
+
+  let resolved
+  try {
+    resolved = new URL(normalized, window.location.href)
+  } catch (e) {
+    return false
+  }
+
+  // Executable/pseudo schemes (javascript:, data:, vbscript:) resolve with
+  // an opaque 'null' origin and fail both checks below.
+
+  // Same-origin embeds (including relative src) are as trusted as the
+  // page itself and always pass, regardless of scheme or allowlist.
+  if (resolved.origin === window.location.origin && resolved.origin !== 'null') {
+    return true
+  }
+
+  // Cross-origin embeds must be https, or http on a localhost host
+  // (a secure context) to keep local development friction-free.
+  const isSecure = resolved.protocol === 'https:' ||
+    (resolved.protocol === 'http:' && isTrustworthyLocalHostname(resolved.hostname))
+
+  if (isSecure !== true) return false
+
+  const origins = policy.allowedOrigins
+  if (!Array.isArray(origins) || origins.length === 0) return true
+
+  return origins.some(o => {
+    try {
+      return new URL(o).origin === resolved.origin
+    } catch (e) {
+      return false
+    }
+  })
+}
+
+let iframeHookAdded = false
+const addIframeHardeningHook = () => {
+  if (iframeHookAdded) return
+  iframeHookAdded = true
+
+  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (!node || node.tagName !== 'IFRAME') return
+
+    const src = node.getAttribute('src') || ''
+    if (src !== '' && isAllowedIframeSrc(src) !== true) {
+      console.warn(`SPYNE WARNING: iframe src "${src}" was removed by the iframe policy (same-origin, https, or an allowed origin is required).`)
+      node.removeAttribute('src')
+    }
+
+    const { sandbox } = activeIframePolicy
+    if (sandbox !== false && node.hasAttribute('sandbox') !== true) {
+      node.setAttribute('sandbox', sandbox)
+    }
+  })
 }
 
 /* ---------------------------------------------
- * Determine sanitization mode from SpyneAppProperties
+ * Determine sanitization mode
+ *
+ * Explicit config always wins; the build environment is only a
+ * fallback when no mode has been configured.
  * ------------------------------------------- */
+const RICHTEXT_ALIASES = ['richtext', 'authoring', 'development']
+
 const resolveDefaultMode = () => {
+  const configMode = SpyneAppProperties?.mode
+
+  if (RICHTEXT_ALIASES.includes(configMode)) return 'richtext'
+  if (configMode === 'app') return 'app'
+
   try {
-    const mode = SpyneAppProperties?.mode || process?.env?.NODE_ENV
-    if (mode === 'authoring' || mode === 'development') return 'richtext'
+    if (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development') {
+      return 'richtext'
+    }
   } catch (e) {
-    // Fallback: assume production strict mode
+    // no build-time env available
   }
+
   return 'app'
 }
 
 /* --------------------------------------------- */
-function makeSanitizeFn(mode = 'app') {
-  if (process?.env?.NODE_ENV === 'development') {
-    mode = 'richtext'
-  }
-
-  const cfg = mode === 'richtext' ? SAFE_FOR_RICH_TEXT : SAFE_FOR_APP
+const buildModeConfig = (mode) => {
+  const base = mode === 'richtext' ? SAFE_FOR_RICH_TEXT : SAFE_FOR_APP
+  const allowIframe = iframeAllowedForMode(mode)
 
-  return (html) => {
-    let clean = DOMPurify.sanitize(html, cfg)
+  if (mode === 'richtext' && allowIframe !== true) {
+    return {
+      ...base,
+      ALLOWED_TAGS: base.ALLOWED_TAGS.filter(t => t !== 'iframe'),
+      ADD_TAGS: base.ADD_TAGS.filter(t => t !== 'iframe'),
+      FORBID_TAGS: [...base.FORBID_TAGS, 'iframe']
+    }
+  }
 
-    // In richtext mode, enforce safe URL schemes for href/src
-    if (mode === 'richtext') {
-      clean = clean.replace(/<(a|img)\b([^>]+?)>/gi, (match) => {
-        return match.replace(/\b(href|src)="([^"]*)"/gi, (m, attr, val) => {
-          return m
-        })
-      })
+  if (mode === 'app' && allowIframe === true) {
+    return {
+      ...base,
+      FORBID_TAGS: base.FORBID_TAGS.filter(t => t !== 'iframe'),
+      ADD_TAGS: ['iframe'],
+      ADD_ATTR: ['sandbox']
     }
-    return clean
   }
+
+  return base
+}
+
+function makeSanitizeFn(mode = 'app') {
+  const cfg = buildModeConfig(mode)
+
+  return (html) => DOMPurify.sanitize(html, cfg)
 }
 
 /* ---------------------------------------------
- * Configure once (kept for compatibility)
+ * Configure once
  * ------------------------------------------- */
 const sanitizeDataConfigure = (config = {}) => {
   if (isConfigured) {
@@ -79,7 +213,21 @@ const sanitizeDataConfigure = (config = {}) => {
     return
   }
 
-  const { strict = false } = config
+  const { strict = false, disableSanitize = false, iframes } = config
+
+  globalDisable = disableSanitize === true
+
+  if (iframes && typeof iframes === 'object') {
+    configuredIframePolicy = resolveIframePolicy(iframes)
+    activeIframePolicy = configuredIframePolicy
+  }
+
+  if (globalDisable) {
+    console.warn('SPYNE SECURITY WARNING: All data sanitization is DISABLED via config.disableSanitize. Do not use this setting in production.')
+  } else {
+    addIframeHardeningHook()
+  }
+
   const processFactory = (mode) => {
     const sanitizeStr = makeSanitizeFn(mode)
     const process = (val) => {
@@ -97,14 +245,24 @@ const sanitizeDataConfigure = (config = {}) => {
   }
 
   _sanitizeData = (data, opts = {}) => {
-    const { disableSanitize = false, mode } = opts
+    const { disableSanitize: callDisable = false, mode, iframes: iframesOverride } = opts
+    if (globalDisable || callDisable) return data
+
     const legacyStrict = forceStrict || strict
     const effectiveMode = mode || (legacyStrict ? 'app' : resolveDefaultMode())
-    if (disableSanitize) return data
-    return processFactory(effectiveMode)(data)
+
+    // Sanitization is synchronous, so the per-call iframe policy can be
+    // scoped with a swap-and-restore around the processing pass.
+    activeIframePolicy = resolveIframePolicy(iframesOverride)
+    try {
+      return processFactory(effectiveMode)(data)
+    } finally {
+      activeIframePolicy = configuredIframePolicy
+    }
   }
 
   sanitizeDataConfigure.sanitizeDataForce = (data, mode) => {
+    if (globalDisable) return data
     const effective = mode || resolveDefaultMode()
     return processFactory(effective)(data)
   }
@@ -119,7 +277,6 @@ const sanitizeData = (data, opts = {}) => {
   if (!isConfigured) {
     throw new Error('sanitizeData is not configured. Call sanitizeDataConfigure() first.')
   }
-  // return data;
   return _sanitizeData(data, opts)
 }
 
@@ -134,14 +291,75 @@ const sanitizeDataForce = (data, mode) => {
   return sanitizeDataConfigure.sanitizeDataForce(data, mode)
 }
 
+/* ---------------------------------------------
+ * Attribute sanitizer
+ *
+ * The single value-level guard for the attribute channel
+ * (DomElement.setElAttrs). Attribute names are gated by the
+ * DomElement/ViewStream allowlists; this validates values.
+ *
+ * Independent of sanitizeDataConfigure so it is always available.
+ * Returns { allowed: Boolean, value }.
+ * ------------------------------------------- */
+const URL_ATTRS = [
+  'href', 'src', 'action', 'formaction', 'ping', 'poster',
+  'cite', 'codebase', 'manifest', 'icon', 'background'
+]
+
+const sanitizeAttribute = (key, value, tagName) => {
+  if (globalDisable) return { allowed: true, value }
+
+  const k = String(key).toLowerCase()
+  const tag = String(tagName || '').toUpperCase()
+
+  // Event-handler attributes are never legitimate in SpyneJS —
+  // broadcastEvents is the declared mechanism for interactivity.
+  if (k.startsWith('on')) {
+    return { allowed: false, value }
+  }
+
+  // srcdoc is a full HTML document; sanitize it as one.
+  if (k === 'srcdoc') {
+    const cfg = buildModeConfig(resolveDefaultMode())
+    return { allowed: true, value: DOMPurify.sanitize(String(value), cfg) }
+  }
+
+  // Iframe src follows the iframe policy: https-only, plus the
+  // configured origin allowlist.
+  if (tag === 'IFRAME' && k === 'src') {
+    return { allowed: isAllowedIframeSrc(value, configuredIframePolicy), value }
+  }
+
+  if (URL_ATTRS.includes(k) && isSafeUri(value) !== true) {
+    return { allowed: false, value }
+  }
+
+  return { allowed: true, value }
+}
+
+/**
+ * Applies the configured iframe sandbox policy to an element created
+ * through the attribute channel (DomElement), mirroring the DOMPurify
+ * hook that guards parsed HTML.
+ */
+const applyIframeHardening = (el) => {
+  if (globalDisable || !el || el.tagName !== 'IFRAME') return el
+
+  const { sandbox } = configuredIframePolicy
+  if (sandbox !== false && el.hasAttribute('sandbox') !== true) {
+    el.setAttribute('sandbox', sandbox)
+  }
+
+  return el
+}
+
 /* ---------------------------------------------
  * Event-target sanitizer
  * ------------------------------------------- */
 const sanitizeEventTarget = (el, mode) => {
-  if (!el) return
+  if (!el || globalDisable) return
   const effectiveMode = mode || resolveDefaultMode()
   const sanitizeStr = makeSanitizeFn(effectiveMode)
-  // const UNSAFE_RE = /<(?:script|iframe|object|embed|form|input|button|link|meta)[^>]*>|on\w+=|javascript:/i
   const UNSAFE_RE = /<(?:script|object|embed|form|input|button|link|meta)[^>]*>|on\w+=|javascript:/i
   if (typeof el.value === 'string' && UNSAFE_RE.test(el.value)) {
     const clean = sanitizeStr(el.value)
@@ -153,13 +371,21 @@ const sanitizeEventTarget = (el, mode) => {
   }
 }
 
-/* --------------------------------------------- */
-const setSanitizeDataForceStrict = (bool = true) => { forceStrict = !!bool }
+/* ---------------------------------------------
+ * @deprecated Use sanitizeData(data, { mode: 'app' }) per call, or set
+ * config.mode at SpyneApp.init. Retained for backward compatibility.
+ * ------------------------------------------- */
+const setSanitizeDataForceStrict = (bool = true) => {
+  console.warn('SPYNE DEPRECATION: setSanitizeDataForceStrict is deprecated. Pass { mode: "app" } to sanitizeData, or set config.mode in SpyneApp.init.')
+  forceStrict = !!bool
+}
 
 export {
   sanitizeDataConfigure,
   sanitizeData,
   sanitizeDataForce,
+  sanitizeAttribute,
+  applyIframeHardening,
   sanitizeEventTarget,
   setSanitizeDataForceStrict
 }

package/src/spyne/utils/sanitize-html.js

@@ -3,6 +3,18 @@ import DOMPurify from 'dompurify'
 let _sanitizeHTML
 let isConfigured = false
 
+/**
+ * Configures the template-layer sanitizer.
+ *
+ * Sanitization is always on. The three-level posture:
+ *
+ *   mode: 'app' (default)   — DOMPurify with its standard allowlist
+ *   mode: 'richtext'        — additionally admits iframe/link (+ sandbox attr)
+ *                             so CMS/authoring content survives templates
+ *   strict: true            — additionally registers a Trusted Types 'default'
+ *                             policy so DOM sinks route through sanitization
+ *   disableSanitize: true   — the only full passthrough; logs a security warning
+ */
 const sanitizeHTMLConfigure = (config = {}) => {
   if (isConfigured) {
     console.warn('sanitizeHTML is already configured. Reconfiguration is not allowed.')
@@ -10,20 +22,41 @@ const sanitizeHTMLConfigure = (config = {}) => {
   }
 
   const {
-    strict = true,
+    strict = false,
+    mode = 'app',
+    disableSanitize = false,
     allowTargetAttr = true,
-    addNoopener = true
+    addNoopener = true,
+    debug = false,
+    iframes = {}
   } = config
 
-  if (!strict) {
+  if (disableSanitize === true) {
+    console.warn('SPYNE SECURITY WARNING: All HTML sanitization is DISABLED via config.disableSanitize. Do not use this setting in production.')
     _sanitizeHTML = (html) => html
     isConfigured = true
     return
   }
 
+  const isRichtext = ['richtext', 'authoring', 'development'].includes(mode)
+
+  // Iframe admission follows config.iframes.allow when set; otherwise
+  // the mode default (richtext yes, app no). The DOMPurify hook added by
+  // sanitize-data enforces src origin and sandbox policy on whatever
+  // is admitted here.
+  const allowIframe = iframes.allow !== undefined ? iframes.allow === true : isRichtext
+
   const domPurifyConfig = {
     RETURN_TRUSTED_TYPE: false,
-    ADD_ATTR: allowTargetAttr ? ['target'] : []
+    ADD_TAGS: [
+      ...(allowIframe ? ['iframe'] : []),
+      ...(isRichtext ? ['link'] : [])
+    ],
+    ADD_ATTR: [
+      ...(allowTargetAttr ? ['target'] : []),
+      ...(allowIframe ? ['sandbox'] : [])
+    ],
+    ...(allowIframe !== true && isRichtext ? { FORBID_TAGS: ['iframe'] } : {})
   }
 
   const sanitizeWithPolicy = (html) => DOMPurify.sanitize(html, domPurifyConfig)
@@ -63,14 +96,22 @@ const sanitizeHTMLConfigure = (config = {}) => {
     })
   }
 
-  if (window.trustedTypes) {
-    const policy = window.trustedTypes.createPolicy('default', {
-      createHTML: (toEscape) => sanitizeWithPolicy(toEscape)
-    })
+  _sanitizeHTML = sanitizeWithPolicy
 
-    _sanitizeHTML = (html) => policy.createHTML(html)
-  } else {
-    _sanitizeHTML = (html) => sanitizeWithPolicy(html)
+  if (strict === true && window.trustedTypes) {
+    try {
+      const policy = window.trustedTypes.createPolicy('default', {
+        createHTML: (toEscape) => sanitizeWithPolicy(toEscape)
+      })
+
+      _sanitizeHTML = (html) => policy.createHTML(html)
+
+      if (debug === true) {
+        console.log('SPYNE: Trusted Types default policy registered. Note that browser enforcement additionally requires the CSP header: require-trusted-types-for \'script\'.')
+      }
+    } catch (err) {
+      console.warn('SPYNE WARNING: A Trusted Types "default" policy already exists on this page. Falling back to direct sanitization.', err)
+    }
   }
 
   isConfigured = true

package/src/spyne/utils/spyne-app-properties.js

@@ -45,6 +45,16 @@ class SpyneAppPropertiesClass {
     return _debug
   }
 
+  /**
+   * The application's sanitization mode, set via config.mode in SpyneApp.init.
+   * 'app' (default) is the strict production posture; 'richtext' (aliases:
+   * 'authoring', 'development') is the permissive posture for CMS and
+   * authoring tools.
+   */
+  get mode() {
+    return _config?.mode !== undefined ? _config.mode : 'app'
+  }
+
   /**
    * This is mostly used for debugging purposes
    *
@@ -105,29 +115,48 @@ class SpyneAppPropertiesClass {
     _channelsMap = { getStream, testStream, getProxySubject }
   }
 
+// ──────────────────────────────────────────────────────────────────────────
+// FIXED: durable setProp/getProp + isolated ephemeral (read-once) tier
+//
+// Contract after fix:
+//   setProp(key, val)            → durable. Persists for the app lifespan.
+//                                   Returns val.
+//   setProp(key, val, true)      → ephemeral. Read-once via getProp. Returns val.
+//   createTempProp(val)          → ephemeral with generated key. Returns the key.
+//   getProp(key)                 → returns durable value if present;
+//                                   otherwise returns ephemeral value ONCE,
+//                                   then deletes it. The two tiers cannot
+//                                   shadow each other.
+// ──────────────────────────────────────────────────────────────────────────
+
   setProp(key, val, isTemp = false) {
     if (isTemp) {
       _config.ephemeralProps[key] = val;
-      return val;
     } else {
       _config.tmpProps[key] = val;
     }
-    return  key;
+    return val;                       // FIX 2: both tiers return the stored value
   }
 
   getProp(key) {
-    if (_config.ephemeralProps.hasOwnProperty(key)) {
+    // FIX 1+3: durable tier resolves FIRST and independently. A durable value
+    // can never be shadowed or consumed by a same-named ephemeral key.
+    if (_config?.tmpProps && Object.prototype.hasOwnProperty.call(_config.tmpProps, key)) {
+      return _config.tmpProps[key];
+    }
+    // Ephemeral tier: read-once. Only reached when no durable value exists.
+    if (_config?.ephemeralProps && Object.prototype.hasOwnProperty.call(_config.ephemeralProps, key)) {
       const tempVal = _config.ephemeralProps[key];
       delete _config.ephemeralProps[key];
       return tempVal;
     }
-    return _config?.tmpProps?.[key];
+    return undefined;
   }
 
   createTempProp(value) {
     const key = random6Chars();
-    this.setProp(key, value, true); // isTemp = true
-    return key;
+    this.setProp(key, value, true);   // isTemp = true
+    return key;                       // returns key (correct — caller needs it to read back)
   }
 
 

package/src/spyne/views/dom-element-template.js

@@ -234,6 +234,11 @@ export class DomElementTemplate {
   renderToString() {
     let html = this.finalArr.join('')
     html = DomElementTemplate.replaceImgPath(html)
+    if (this.testMode !== true) {
+      // String(...) unwraps TrustedHTML when strict mode is active,
+      // keeping this method's string contract.
+      html = String(sanitizeHTML(html))
+    }
     window.setTimeout(this.removeThis, 2)
     return html
   }

package/src/spyne/views/dom-element.js

@@ -1,6 +1,7 @@
 import { baseCoreMixins } from '../utils/mixins/base-core-mixins.js'
 import { DomElementTemplate } from './dom-element-template.js'
 import { deepMerge } from '../utils/deep-merge.js'
+import { sanitizeAttribute, applyIframeHardening } from '../utils/sanitize-data.js'
 import { is, defaultTo, pick, mapObjIndexed, forEachObjIndexed, pipe } from 'ramda'
 
 class DomElement {
@@ -53,15 +54,33 @@ class DomElement {
   }
 
   setElAttrs(el, params) {
+    const testMode = this.testMode === true
     const addAttributes = (val, key) => {
       const addToDataset = (val, key) => { el.dataset[key] = val }
       if (key === 'dataset') {
+        // Dataset values are inert text and are the framework's payload
+        // surface; they are applied as-is.
         forEachObjIndexed(addToDataset, val)
-      } else {
-        el.setAttribute(key, val)
+        return
       }
+
+      if (testMode !== true) {
+        const { allowed, value } = sanitizeAttribute(key, val, el.tagName)
+        if (allowed !== true) {
+          console.warn(`SPYNE WARNING: The attribute "${key}" was removed during sanitization.`, el)
+          return
+        }
+        val = value
+      }
+
+      el.setAttribute(key, val)
     }
     this.getProp('attrs').forEach(addAttributes)
+
+    if (testMode !== true) {
+      applyIframeHardening(el)
+    }
+
     return el
   }