spyne 0.25.0 → 0.26.0

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

@@ -200,6 +200,117 @@ const addIframeHardeningHook = () => {
   })
 }
 
+/* ---------------------------------------------
+ * Anchor policy
+ *
+ * Configured via config.anchors at SpyneApp.init:
+ *   allowTarget    — true (default) admits target on dynamic anchors in
+ *                    every mode; the hook validates values and forces
+ *                    noopener. false strips target everywhere.
+ *   addNoopener    — true (default) forces rel="noopener noreferrer"
+ *                    onto target="_blank" anchors.
+ *   allowedDomains — [] (any destination the URI scheme policy allows) |
+ *                    ['https://github.com', ...] restricts cross-origin
+ *                    hrefs to the listed origins. Same-origin, relative,
+ *                    mailto: and tel: hrefs are always allowed.
+ *
+ * A per-call override can be passed as opts.anchors to sanitizeData.
+ * The legacy top-level allowTargetAttr and addNoopener config keys are
+ * honored as fallbacks.
+ * ------------------------------------------- */
+// target accepts any browsing-context name; these are the keywords that
+// stay in the same context and therefore carry no opener risk.
+const SAME_CONTEXT_TARGETS = ['_self', '_parent', '_top']
+
+let configuredAnchorPolicy = { allowTarget: true, addNoopener: true, allowedDomains: [] }
+let activeAnchorPolicy = configuredAnchorPolicy
+
+const resolveAnchorPolicy = (override) => {
+  if (!override) return configuredAnchorPolicy
+  return {
+    allowTarget: override.allowTarget !== undefined ? override.allowTarget === true : configuredAnchorPolicy.allowTarget,
+    addNoopener: override.addNoopener !== undefined ? override.addNoopener === true : configuredAnchorPolicy.addNoopener,
+    allowedDomains: override.allowedDomains !== undefined ? override.allowedDomains : configuredAnchorPolicy.allowedDomains
+  }
+}
+
+const isAllowedAnchorHref = (href, policy = activeAnchorPolicy) => {
+  const normalized = normalizeUriForCheck(href)
+
+  // mailto: and tel: are not domains and always pass.
+  if (/^(mailto|tel):/i.test(normalized)) return true
+
+  let resolved
+  try {
+    resolved = new URL(normalized, window.location.href)
+  } catch (e) {
+    return false
+  }
+
+  // Same-origin links (including relative hrefs) are never restricted.
+  if (resolved.origin === window.location.origin && resolved.origin !== 'null') {
+    return true
+  }
+
+  if (/^https?:$/.test(resolved.protocol) !== true) return false
+
+  const domains = policy.allowedDomains
+  if (!Array.isArray(domains) || domains.length === 0) return true
+
+  return domains.some(d => {
+    try {
+      return new URL(d).origin === resolved.origin
+    } catch (e) {
+      return false
+    }
+  })
+}
+
+const forceNoopenerRel = (el) => {
+  const currentRel = el.getAttribute('rel') || ''
+  const relSet = new Set(currentRel.split(/\s+/).filter(Boolean))
+
+  relSet.add('noopener')
+  relSet.add('noreferrer')
+
+  el.setAttribute('rel', Array.from(relSet).join(' '))
+}
+
+let anchorHookAdded = false
+const addAnchorHardeningHook = () => {
+  if (anchorHookAdded) return
+  anchorHookAdded = true
+
+  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (!node || typeof node.getAttribute !== 'function') return
+    if (node.tagName !== 'A') return
+
+    const policy = activeAnchorPolicy
+    const href = node.getAttribute('href')
+
+    if (href && policy.allowedDomains.length > 0 && isAllowedAnchorHref(href, policy) !== true) {
+      spyneWarn(`SPYNE WARNING: anchor href "${href}" was removed by the anchor policy (same-origin or an allowed domain is required).`)
+      node.removeAttribute('href')
+    }
+
+    const target = node.getAttribute('target')
+    if (!target) return
+
+    // target without an href serves no purpose.
+    if (policy.allowTarget !== true || !node.getAttribute('href')) {
+      node.removeAttribute('target')
+      return
+    }
+
+    // Any browsing-context name is valid; _blank and named windows both
+    // hand the opened page an opener reference, so noopener applies to
+    // every target except the same-context keywords.
+    if (SAME_CONTEXT_TARGETS.includes(target) !== true && policy.addNoopener === true) {
+      forceNoopenerRel(node)
+    }
+  })
+}
+
 /* ---------------------------------------------
  * Determine sanitization mode
  *
@@ -239,13 +350,27 @@ const buildModeConfig = (mode) => {
     }
   }
 
-  if (mode === 'app' && allowIframe === true) {
-    return {
-      ...base,
-      FORBID_TAGS: base.FORBID_TAGS.filter(t => t !== 'iframe'),
-      ADD_TAGS: ['iframe'],
-      ADD_ATTR: ['sandbox']
+  if (mode === 'app') {
+    const cfg = { ...base }
+    const addAttr = []
+
+    if (allowIframe === true) {
+      cfg.FORBID_TAGS = base.FORBID_TAGS.filter(t => t !== 'iframe')
+      cfg.ADD_TAGS = ['iframe']
+      addAttr.push('sandbox')
+    }
+
+    // DOMPurify strips target by default; re-admit it (with rel) so the
+    // anchor hook can validate values and force noopener instead.
+    if (activeAnchorPolicy.allowTarget === true) {
+      addAttr.push('target', 'rel')
+    }
+
+    if (addAttr.length > 0) {
+      cfg.ADD_ATTR = addAttr
     }
+
+    return cfg
   }
 
   return base
@@ -266,7 +391,7 @@ const sanitizeDataConfigure = (config = {}) => {
     return
   }
 
-  const { strict = false, disableSanitize = false, iframes, customElements } = config
+  const { strict = false, disableSanitize = false, iframes, customElements, anchors, allowTargetAttr, addNoopener } = config
 
   globalDisable = disableSanitize === true
 
@@ -279,10 +404,20 @@ const sanitizeDataConfigure = (config = {}) => {
     activeIframePolicy = configuredIframePolicy
   }
 
+  // config.anchors wins; the legacy top-level allowTargetAttr/addNoopener
+  // keys are honored as fallbacks.
+  configuredAnchorPolicy = resolveAnchorPolicy({
+    allowTarget: anchors?.allowTarget !== undefined ? anchors.allowTarget : allowTargetAttr,
+    addNoopener: anchors?.addNoopener !== undefined ? anchors.addNoopener : addNoopener,
+    allowedDomains: anchors?.allowedDomains
+  })
+  activeAnchorPolicy = configuredAnchorPolicy
+
   if (globalDisable) {
     console.warn('SPYNE SECURITY WARNING: All data sanitization is DISABLED via config.disableSanitize. Do not use this setting in production.')
   } else {
     addIframeHardeningHook()
+    addAnchorHardeningHook()
   }
 
   const processFactory = (mode) => {
@@ -302,19 +437,21 @@ const sanitizeDataConfigure = (config = {}) => {
   }
 
   _sanitizeData = (data, opts = {}) => {
-    const { disableSanitize: callDisable = false, mode, iframes: iframesOverride } = opts
+    const { disableSanitize: callDisable = false, mode, iframes: iframesOverride, anchors: anchorsOverride } = opts
     if (globalDisable || callDisable) return data
 
     const legacyStrict = forceStrict || strict
     const effectiveMode = mode || (legacyStrict ? 'app' : resolveDefaultMode())
 
-    // Sanitization is synchronous, so the per-call iframe policy can be
-    // scoped with a swap-and-restore around the processing pass.
+    // Sanitization is synchronous, so the per-call iframe and anchor
+    // policies can be scoped with a swap-and-restore around the pass.
     activeIframePolicy = resolveIframePolicy(iframesOverride)
+    activeAnchorPolicy = resolveAnchorPolicy(anchorsOverride)
     try {
       return processFactory(effectiveMode)(data)
     } finally {
       activeIframePolicy = configuredIframePolicy
+      activeAnchorPolicy = configuredAnchorPolicy
     }
   }
 
@@ -387,6 +524,16 @@ const sanitizeAttribute = (key, value, tagName) => {
     return { allowed: isAllowedIframeSrc(value, configuredIframePolicy), value }
   }
 
+  // Anchor href follows the anchor policy: safe scheme, plus the
+  // configured domain allowlist for cross-origin destinations.
+  if (tag === 'A' && k === 'href') {
+    if (isSafeUri(value) !== true) return { allowed: false, value }
+    if (configuredAnchorPolicy.allowedDomains.length > 0 && isAllowedAnchorHref(value, configuredAnchorPolicy) !== true) {
+      return { allowed: false, value }
+    }
+    return { allowed: true, value }
+  }
+
   if (URL_ATTRS.includes(k) && isSafeUri(value) !== true) {
     return { allowed: false, value }
   }
@@ -395,16 +542,31 @@ const sanitizeAttribute = (key, value, tagName) => {
 }
 
 /**
- * Applies the configured iframe sandbox policy to an element created
+ * Applies the configured iframe and anchor policies to an element created
  * through the attribute channel (DomElement), mirroring the DOMPurify
- * hook that guards parsed HTML.
+ * hooks that guard parsed HTML.
  */
-const applyIframeHardening = (el) => {
-  if (globalDisable || !el || el.tagName !== 'IFRAME') return el
+const applyElementHardening = (el) => {
+  if (globalDisable || !el) return el
+
+  if (el.tagName === 'IFRAME') {
+    const { sandbox } = configuredIframePolicy
+    if (sandbox !== false && el.hasAttribute('sandbox') !== true) {
+      el.setAttribute('sandbox', sandbox)
+    }
+  }
+
+  if (el.tagName === 'A') {
+    const policy = configuredAnchorPolicy
+    const target = el.getAttribute('target')
 
-  const { sandbox } = configuredIframePolicy
-  if (sandbox !== false && el.hasAttribute('sandbox') !== true) {
-    el.setAttribute('sandbox', sandbox)
+    if (target) {
+      if (policy.allowTarget !== true || !el.getAttribute('href')) {
+        el.removeAttribute('target')
+      } else if (SAME_CONTEXT_TARGETS.includes(target) !== true && policy.addNoopener === true) {
+        forceNoopenerRel(el)
+      }
+    }
   }
 
   return el
@@ -442,7 +604,7 @@ export {
   sanitizeData,
   sanitizeDataForce,
   sanitizeAttribute,
-  applyIframeHardening,
+  applyElementHardening,
   allowCustomElements,
   CUSTOM_ELEMENT_HANDLING as customElementHandling,
   sanitizeEventTarget,

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

@@ -28,9 +28,9 @@ const sanitizeHTMLConfigure = (config = {}) => {
     mode = 'app',
     disableSanitize = false,
     allowTargetAttr = true,
-    addNoopener = true,
     debug = false,
-    iframes = {}
+    iframes = {},
+    anchors = {}
   } = config
 
   if (disableSanitize === true) {
@@ -48,6 +48,12 @@ const sanitizeHTMLConfigure = (config = {}) => {
   // is admitted here.
   const allowIframe = iframes.allow !== undefined ? iframes.allow === true : isRichtext
 
+  // config.anchors.allowTarget wins; the legacy top-level allowTargetAttr
+  // key is honored as a fallback. Target values and noopener enforcement
+  // are handled by the anchor hook registered in sanitize-data, which
+  // applies to this layer's sanitization as well.
+  const allowTarget = anchors.allowTarget !== undefined ? anchors.allowTarget === true : allowTargetAttr === true
+
   const domPurifyConfig = {
     RETURN_TRUSTED_TYPE: false,
     ADD_TAGS: [
@@ -55,7 +61,7 @@ const sanitizeHTMLConfigure = (config = {}) => {
       ...(isRichtext ? ['link'] : [])
     ],
     ADD_ATTR: [
-      ...(allowTargetAttr ? ['target'] : []),
+      ...(allowTarget ? ['target', 'rel'] : []),
       ...(allowIframe ? ['sandbox'] : [])
     ],
     // Admits the framework's spyne-* elements (CMS proxy wrappers) and any
@@ -67,41 +73,6 @@ const sanitizeHTMLConfigure = (config = {}) => {
 
   const sanitizeWithPolicy = (html) => DOMPurify.sanitize(html, domPurifyConfig)
 
-  if (allowTargetAttr) {
-    DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-      if (!node || typeof node.getAttribute !== 'function') return
-      if (node.tagName !== 'A') return
-
-      const href = node.getAttribute('href')
-      const target = node.getAttribute('target')
-
-      // remove target on anchors without href
-      if (!href && target) {
-        node.removeAttribute('target')
-        return
-      }
-
-      if (!target) return
-
-      const validTargets = ['_blank', '_self', '_parent', '_top']
-      if (!validTargets.includes(target)) {
-        node.removeAttribute('target')
-        return
-      }
-
-      if (target === '_blank' && addNoopener) {
-        const currentRel = node.getAttribute('rel') || ''
-        const relParts = currentRel.split(/\s+/).filter(Boolean)
-        const relSet = new Set(relParts)
-
-        relSet.add('noopener')
-        relSet.add('noreferrer')
-
-        node.setAttribute('rel', Array.from(relSet).join(' '))
-      }
-    })
-  }
-
   _sanitizeHTML = sanitizeWithPolicy
 
   if (strict === true && window.trustedTypes) {

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

@@ -9,6 +9,8 @@ let _channelsMap
 let _initialized
 let _debug = true
 let _enableCMSProxies = false
+let _cmsRehydrator
+let _cmsLineageWarner
 const _excludeChannelsFromConsole = []
 /* eslint-disable */
 let _linksData
@@ -250,6 +252,34 @@ class SpyneAppPropertiesClass {
     return _proxiesMap.get(proxyName)
   }
 
+  /**
+   * Registers the CMS re-hydration hook consulted by DomElementTemplate when
+   * it receives plain (unproxied) data while CMS proxies are enabled. The
+   * hook receives the template data and returns either revived proxy data
+   * for that content or undefined to decline. Implementations must be cheap
+   * for non-CMS data — ideally a single own-property read before bailing.
+   */
+  registerCmsRehydrator(method) {
+    _cmsRehydrator = method
+  }
+
+  get rehydrateCmsData() {
+    return _cmsRehydrator
+  }
+
+  /**
+   * Registers the debug-mode hook DomElementTemplate calls when data renders
+   * unproxied while CMS proxies are enabled and re-hydration declined —
+   * the lineage reporter that turns silent proxy strips into warnings.
+   */
+  registerCmsLineageWarner(method) {
+    _cmsLineageWarner = method
+  }
+
+  get warnUnproxiedCmsData() {
+    return _cmsLineageWarner
+  }
+
   getPluginConfigByPluginName(pluginName) {
     return _config.plugins[pluginName]
   }

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

@@ -36,6 +36,27 @@ export class DomElementTemplate {
     this.isProxyData = data.__cms__isProxy === true
     this.testMode = opts?.testMode
 
+    // CMS lineage pass — construction-time only, and only in authoring mode.
+    // In production (enableCMSProxies false) this costs one boolean read;
+    // nothing here ever runs inside the substitution loops.
+    if (this.isProxyData === false && SpyneAppProperties.enableCMSProxies === true) {
+      const rehydrated = SpyneAppProperties.rehydrateCmsData?.(data)
+      if (rehydrated !== undefined) {
+        // a stripped clone was re-identified — render with the revived proxy
+        data = rehydrated
+        this.isProxyData = true
+      } else if (DomElementTemplate.templateBindsProxiedChild(data, this.template) === true) {
+        // plain wrapper holding proxied values (e.g. a pageData container),
+        // AND this template actually references one of those proxied children
+        // via a dot-path or loop token — only then is CMS wrapping useful.
+        // Flipping on child presence alone put ~40% of all templates through
+        // the wrap→inflate→sanitize→strip pipeline for zero bindings.
+        this.isProxyData = true
+      } else if (SpyneAppProperties.debug === true) {
+        SpyneAppProperties.warnUnproxiedCmsData?.(data, this.template)
+      }
+    }
+
     // Normalize triple-bracket tags to double-bracket.
     //
     // DomElementTemplate treats {{{key}}} as an alias for {{key}} — both
@@ -105,6 +126,57 @@ export class DomElementTemplate {
     return /({{\.\*?}})/.test(str)
   }
 
+  /**
+   * Shallow, one-level scan for CMS-proxied values inside a plain container,
+   * bailing on the first hit. Lets wrappers that hold proxied content (a
+   * pageData object, a filtered array of proxied stories) opt in to CMS
+   * template wrapping even though the wrapper itself is not a proxy.
+   * Only ever called in authoring mode (enableCMSProxies true).
+   */
+  /**
+   * Wrapper detection with a binding test: returns true only when data holds
+   * a proxied child under a key that the template actually references via a
+   * dot-path ({{key.prop}}) or loop ({{#key}} / {{#key.path}}) token. A
+   * template that never reaches into the proxied child gains nothing from
+   * CMS wrapping — its own top-level tokens have no dataId to bind — so
+   * flipping it into proxy mode only pays the wrap/sanitize/strip pipeline.
+   */
+  static templateBindsProxiedChild(data, template) {
+    if (data === null || typeof data !== 'object' || typeof template !== 'string') {
+      return false
+    }
+    if (template.indexOf('{{') === -1) {
+      return false
+    }
+    const keys = Object.keys(data)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      const val = data[key]
+      if (val !== null && typeof val === 'object' && val.__cms__isProxy === true) {
+        if (template.indexOf(`{{${key}.`) !== -1 ||
+            template.indexOf(`{{#${key}}}`) !== -1 ||
+            template.indexOf(`{{#${key}.`) !== -1) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  static hasProxiedChild(data) {
+    if (data === null || typeof data !== 'object') {
+      return false
+    }
+    const values = Object.values(data)
+    for (let i = 0; i < values.length; i++) {
+      const val = values[i]
+      if (val !== null && typeof val === 'object' && val.__cms__isProxy === true) {
+        return true
+      }
+    }
+    return false
+  }
+
   /**
    * Normalizes triple-bracket tags to double-bracket form.
    *
@@ -219,8 +291,26 @@ export class DomElementTemplate {
   /**
    * @desc Returns a document fragment generated from the template and any added data.
    */
+  /**
+   * Unwraps <spyne-cms-item> elements whose data-cms-id resolved to an empty
+   * string — tokens that live on a plain wrapper (no __cms__dataId) rather
+   * than on CMS content. Leaves their inner text in place, so the rendered
+   * DOM matches what a non-CMS render would produce. Only runs in authoring
+   * mode (isProxyData true), one pass over the final HTML string.
+   */
+  static stripInertCmsItems(html) {
+    if (html.indexOf('data-cms-id=""') === -1) {
+      return html
+    }
+    const inertRE = /<spyne-cms-item data-cms-id=""[^>]*>[\s\S]*?<spyne-cms-item-text>([\s\S]*?)<\/spyne-cms-item-text>\s*<\/spyne-cms-item>/g
+    return html.replace(inertRE, '$1')
+  }
+
   renderDocFrag() {
     let html = DomElementTemplate.replaceImgPath(this.finalArr.join(''))
+    if (this.isProxyData === true) {
+      html = DomElementTemplate.stripInertCmsItems(html)
+    }
     if (this.testMode !== true) {
       html = sanitizeHTML(html)
     }
@@ -234,6 +324,9 @@ export class DomElementTemplate {
   renderToString() {
     let html = this.finalArr.join('')
     html = DomElementTemplate.replaceImgPath(html)
+    if (this.isProxyData === true) {
+      html = DomElementTemplate.stripInertCmsItems(html)
+    }
     if (this.testMode !== true) {
       // String(...) unwraps TrustedHTML when strict mode is active,
       // keeping this method's string contract.

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

@@ -2,7 +2,7 @@ import { baseCoreMixins } from '../utils/mixins/base-core-mixins.js'
 import { spyneWarn } from '../utils/spyne-warn.js'
 import { DomElementTemplate } from './dom-element-template.js'
 import { deepMerge } from '../utils/deep-merge.js'
-import { sanitizeAttribute, applyIframeHardening } from '../utils/sanitize-data.js'
+import { sanitizeAttribute, applyElementHardening } from '../utils/sanitize-data.js'
 import { is, defaultTo, pick, mapObjIndexed, forEachObjIndexed, pipe } from 'ramda'
 
 class DomElement {
@@ -79,7 +79,7 @@ class DomElement {
     this.getProp('attrs').forEach(addAttributes)
 
     if (testMode !== true) {
-      applyIframeHardening(el)
+      applyElementHardening(el)
     }
 
     return el

package/src/tests/channels/channel-payload-filter.test.js

@@ -191,6 +191,32 @@ describe('should test channel payload filters boolean correctness', () => {
 
     return true
   })
+
+  it('should return false for an invalid css selector instead of throwing', () => {
+    const cpFilter = new ChannelPayloadFilter('!!!not-a-selector')
+    const payloadBool = cpFilter(ChannelPayloadToTestFilters)
+    expect(payloadBool).to.be.false
+  })
+
+  it('should not match a structural lookalike of a selector match', () => {
+    // two identical siblings: the selector matches only the first, the
+    // payload el is the second — Element.matches tests the payload el
+    // itself, so the structurally equal non-matching twin must NOT pass
+    const ul = document.createElement('ul')
+    ul.innerHTML = '<li class="twin"><b>same</b></li><li class="twin"><b>same</b></li>'
+    document.body.appendChild(ul)
+    const cpFilter = new ChannelPayloadFilter('li.twin:first-child')
+    const payloadBool = cpFilter({ srcElement: { el: ul.querySelectorAll('li.twin')[1] } })
+    expect(payloadBool).to.be.false
+  })
+
+  it('should match a detached element against its selector', () => {
+    const li = document.createElement('li')
+    li.className = 'detached-item'
+    const cpFilter = new ChannelPayloadFilter('li.detached-item')
+    const payloadBool = cpFilter({ srcElement: { el: li } })
+    expect(payloadBool).to.be.true
+  })
 })
 
 describe('it should test channel payload filter with data packer ', () => {