spyne 0.20.9 → 0.20.12

package/lib/spyne.umd.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
-     * Spyne 0.20.9
+     * Spyne 0.20.12
      * https://spynejs.org
      *
      * @license
@@ -15,7 +15,7 @@
      */
 
 /*!
- * spynejs 0.20.9
+ * spynejs 0.20.12
  * https://spynejs.org
  * (c) 2017-present Frank Batista
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spyne",
-  "version": "0.20.9",
+  "version": "0.20.12",
   "description": "Reactive Real-DOM Framework for Advanced Javascript applications",
   "sideEffects": true,
   "main": "./lib/spyne.esm.js",

package/src/spyne/channels/channel.js

@@ -412,6 +412,12 @@ export class Channel {
         `channel name ${c} is not within ${registeredStreamNames}`)
     const startSubscribe = (c) => {
       const obs$ = this.streamsController.getStream(c).observer
+      if (obs$.source) {
+        obs$.source.channelName = channelName
+      } else {
+        obs$.channelName = channelName
+      }
+
       if (payloadFilter !== undefined) {
         return obs$.pipe(filter(payloadFilter))
       }
@@ -453,11 +459,14 @@ export class Channel {
     }
 
     // 3) Map array → keyed object
+    // return combined$;
     return combined$.pipe(
       map(resultsArr => {
         const obj = {}
         channelsArr.forEach((item, idx) => {
-          const key = typeof item === 'string' ? item : `channel_${idx}`
+          const iterKey = typeof item === 'string' ? item : `channel_${idx}`
+          const cnKey = item?.source?.channelName || item?.source?.source?.channelName
+          const key = cnKey || iterKey
           obj[key] = resultsArr[idx]
         })
         return obj

package/src/spyne/channels/spyne-channel-ui.js

@@ -2,6 +2,7 @@ import { Channel } from './channel.js'
 import { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { equals, path, compose, prop, filter, replace, lensProp, over, omit, test, keys, either, toUpper } from 'ramda'
+import { sanitizeEventTarget } from '../utils/sanitize-data.js'
 
 export class SpyneChannelUI extends Channel {
   /**
@@ -334,6 +335,7 @@ export class SpyneChannelUI extends Channel {
     const { payload, srcElement } = obs
 
     const event = obs.event
+    sanitizeEventTarget(event?.target)
     // const payload = domStringMapToObject(srcElement?.el?.dataset) ?? obs.payload
     this.sendChannelPayload(action, payload, srcElement, event)
   }

package/src/spyne/spyne-app.js

@@ -3,9 +3,10 @@ import { ViewStream } from './views/view-stream.js'
 import { SpyneUtilsChannelRoute } from './utils/spyne-utils-channel-route.js'
 import { SpyneAppProperties } from './utils/spyne-app-properties.js'
 import { sanitizeHTMLConfigure } from './utils/sanitize-html.js'
+import { sanitizeDataConfigure } from './utils/sanitize-data.js'
 
 const _channels = new ChannelsMap()
-const version = '0.20.9'
+const version = '0.20.12'
 
 class SpyneApplication {
   /**
@@ -42,7 +43,7 @@ class SpyneApplication {
   init(config = {}, testMode = false) {
     // this.channels = new ChannelsMap();
     /*!
-     * Spyne 0.20.9
+     * Spyne 0.20.12
      * https://spynejs.org
      *
      * @license
@@ -141,6 +142,7 @@ class SpyneApplication {
     }
 
     sanitizeHTMLConfigure(SpyneAppProperties.config);
+    sanitizeDataConfigure(SpyneAppProperties.config)
 
   }
 

package/src/spyne/spyne.js

@@ -17,6 +17,7 @@ import { deepMerge } from './utils/deep-merge.js'
 import { safeClone } from './utils/safe-clone.js'
 import { SpyneAppProperties } from './utils/spyne-app-properties.js'
 import { SpyneApp } from './spyne-app.js'
+import sanitizeData, { sanitizeEventTarget } from './utils/sanitize-data.js'
 
 export {
   ViewStreamElement,
@@ -37,5 +38,7 @@ export {
   SpyneAppProperties,
   SpynePlugin,
   deepMerge,
-  safeClone
+  safeClone,
+  sanitizeData,
+  sanitizeEventTarget
 }

package/src/spyne/utils/channel-fetch-util.js

@@ -1,6 +1,8 @@
 import { from } from 'rxjs'
 import { flatMap, map, publish, tap } from 'rxjs/operators'
 import { compose, prop, defaultTo, over, lensProp, has, propEq, when, propIs, allPass, assoc, pick, mergeDeepRight } from 'ramda'
+import sanitizeData, { setSanitizeDataForceStrict } from './sanitize-data.js'
+
 export class ChannelFetchUtil {
   /**
    * @module ChannelFetchUtil
@@ -47,6 +49,8 @@ export class ChannelFetchUtil {
    */
 
   constructor(options, subscriber, testMode, CHANNEL_NAME) {
+    setSanitizeDataForceStrict(true)
+
     const testSubscriber = (p) => console.log('FETCH RETURNED ', p)
 
     this._mapFn = ChannelFetchUtil.setMapFn(options)
@@ -78,7 +82,27 @@ export class ChannelFetchUtil {
       const metadata = { channelName, url, responseType, serverOptions }
 
       return (data) => {
-        return mapMethod(data, metadata)
+        const disableSanitize = props?.disableSanitize === true
+
+        if (disableSanitize) {
+          const env = (typeof process !== 'undefined' && process.env && process.env.NODE_ENV)
+            ? process.env.NODE_ENV
+            : 'development'
+
+          const msg = `SPYNE SECURITY WARNING — Sanitization disabled for fetch from ${url}. Data will enter the reactive stream unsanitized. Only use disableSanitize=true for trusted or controlled sources.`
+
+          if (env === 'production') {
+            throw new Error(`SpyneJS security policy violation: disableSanitize=true is not allowed in production (${url}).`)
+          } else {
+            console.warn(
+              `%c${msg}`,
+              'color:#f33;font-weight:bold;'
+            )
+          }
+        }
+
+        const sanitizedData = disableSanitize ? data : sanitizeData(data)
+        return mapMethod(sanitizedData, metadata)
       }
     }
 

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

@@ -0,0 +1,160 @@
+// src/utils/sanitize-data.js
+import DOMPurify from 'dompurify'
+import { SpyneAppProperties } from './spyne-app-properties.js'
+
+let _sanitizeData
+let isConfigured = false
+let forceStrict = false // legacy compatibility toggle
+
+/* ---------------------------------------------
+ * Mode configurations
+ * ------------------------------------------- */
+const SAFE_FOR_RICH_TEXT = {
+  ALLOWED_TAGS: [
+    'a', 'b', 'i', 'em', 'strong', 'u', 'p', 'br', 'ul', 'ol', 'li',
+    'blockquote', 'pre', 'code', 'span', 'div', 'section', 'article', 'aside',
+    'header', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'table', 'thead', 'tbody', 'tr', 'td', 'th', 'img', 'figure', 'figcaption',
+    'video', 'source'
+  ],
+  ALLOWED_ATTR: [
+    'href', 'src', 'alt', 'title', 'width', 'height', 'style', 'target', 'rel',
+    'controls', 'poster', 'type', 'rows', 'cols'
+  ],
+  ALLOW_DATA_ATTR: true,
+  FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange'],
+  FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'meta', 'link'],
+  SAFE_URL_PATTERN: /^(https?:|mailto:|tel:|data:image\/)/i
+}
+
+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
+}
+
+/* ---------------------------------------------
+ * Determine sanitization mode from SpyneAppProperties
+ * ------------------------------------------- */
+const resolveDefaultMode = () => {
+  try {
+    const mode = SpyneAppProperties?.mode
+    if (mode === 'authoring' || mode === 'development') return 'richtext'
+  } catch (e) {
+    // Fallback: assume production strict mode
+  }
+  return 'app'
+}
+
+/* --------------------------------------------- */
+function makeSanitizeFn(mode = 'app') {
+  const cfg = mode === 'richtext' ? SAFE_FOR_RICH_TEXT : SAFE_FOR_APP
+
+  return (html) => {
+    let clean = DOMPurify.sanitize(html, cfg)
+
+    // 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 SAFE_FOR_RICH_TEXT.SAFE_URL_PATTERN.test(val) ? m : `${attr}=""`
+        })
+      })
+    }
+    return clean
+  }
+}
+
+/* ---------------------------------------------
+ * Configure once (kept for compatibility)
+ * ------------------------------------------- */
+const sanitizeDataConfigure = (config = {}) => {
+  if (isConfigured) {
+    console.warn('sanitizeData is already configured. Reconfiguration is not allowed.')
+    return
+  }
+
+  const { strict = false } = config
+  const processFactory = (mode) => {
+    const sanitizeStr = makeSanitizeFn(mode)
+    const process = (val) => {
+      if (Array.isArray(val)) return val.map(process)
+      if (val && typeof val === 'object') {
+        const out = {}
+        for (const [k, v] of Object.entries(val)) {
+          out[k] = (typeof v === 'string') ? sanitizeStr(v) : process(v)
+        }
+        return out
+      }
+      return (typeof val === 'string') ? sanitizeStr(val) : val
+    }
+    return process
+  }
+
+  _sanitizeData = (data, opts = {}) => {
+    const { disableSanitize = false, mode } = opts
+    const legacyStrict = forceStrict || strict
+    const effectiveMode = mode || (legacyStrict ? 'app' : resolveDefaultMode())
+    if (disableSanitize) return data
+    return processFactory(effectiveMode)(data)
+  }
+
+  sanitizeDataConfigure.sanitizeDataForce = (data, mode) => {
+    const effective = mode || resolveDefaultMode()
+    return processFactory(effective)(data)
+  }
+
+  isConfigured = true
+}
+
+/* ---------------------------------------------
+ * Configurable runtime sanitizer
+ * ------------------------------------------- */
+const sanitizeData = (data, opts = {}) => {
+  if (!isConfigured) {
+    throw new Error('sanitizeData is not configured. Call sanitizeDataConfigure() first.')
+  }
+  return _sanitizeData(data, opts)
+}
+
+/* ---------------------------------------------
+ * Always-on sanitizer with environment default
+ * ------------------------------------------- */
+const sanitizeDataForce = (data, mode) => {
+  if (!isConfigured || !sanitizeDataConfigure.sanitizeDataForce) {
+    const sanitizeStr = makeSanitizeFn(mode || resolveDefaultMode())
+    return (typeof data === 'string') ? sanitizeStr(data) : data
+  }
+  return sanitizeDataConfigure.sanitizeDataForce(data, mode)
+}
+
+/* ---------------------------------------------
+ * Event-target sanitizer
+ * ------------------------------------------- */
+const sanitizeEventTarget = (el, mode) => {
+  if (!el) 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
+
+  if (typeof el.value === 'string' && UNSAFE_RE.test(el.value)) {
+    const clean = sanitizeStr(el.value)
+    if (clean !== el.value) el.value = clean
+  }
+  if (el.isContentEditable && typeof el.innerHTML === 'string' && UNSAFE_RE.test(el.innerHTML)) {
+    const clean = sanitizeStr(el.innerHTML)
+    if (clean !== el.innerHTML) el.innerHTML = clean
+  }
+}
+
+/* --------------------------------------------- */
+const setSanitizeDataForceStrict = (bool = true) => { forceStrict = !!bool }
+
+export {
+  sanitizeDataConfigure,
+  sanitizeData,
+  sanitizeDataForce,
+  sanitizeEventTarget,
+  setSanitizeDataForceStrict
+}
+export default sanitizeData

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

@@ -7,6 +7,7 @@ let _channels
 let _channelsMap
 let _initialized
 let _debug = true
+let _enableCMSProxies = false
 const _excludeChannelsFromConsole = []
 /* eslint-disable */
 let _linksData
@@ -267,6 +268,72 @@ class SpyneAppPropertiesClass {
     _navLinks = arr
   }
 
+  get enableCMSProxies(){
+    return _enableCMSProxies
+  }
+
+  set enableCMSProxies(bool=true){
+    _enableCMSProxies = Boolean(bool);
+  }
+
+  setCMSProxyMethod(fn){
+   // this.formatTemplateForProxyData = fn;
+    this.enableCMSProxies = true;
+  }
+
+  // SpyneJS Enterprise Code Start
+   formatTemplateForProxyData(tmpl) {
+    const isPrimitiveTag = str => /({{\.\*?}})/.test(str);
+
+    const reLines2 = /(({{(?!loopNum|loopIndex))(.*?)(}}))/gm
+    const reStr = '(?<=>)(.*?)(({{)(.*)(}}))'
+
+    const reLines1 =  new RegExp(reStr, 'gm')
+
+    const formatCmsParam = (str) => {
+      const isArrPrimitive = isPrimitiveTag(str)
+
+      const getKeyAndDataId = (s) => {
+        const re = /({{)([\w_]+(\.))*?(\w+)(}})/gm // this is old, will be deprecated.
+        const reNestedData = /^\{\{([^}]+?)\.[^.}]+}}$/gm
+
+        let dataId = '__cms__dataId'
+        const key = isArrPrimitive ? '{{loopIndex}}' : String(s).replace(re, '$4')
+        if (/(\w\.)/.test(s)) {
+          dataId = String(s).replace(reNestedData, '$1.') + dataId
+        }
+        return { key, dataId }
+      }
+
+      const { key, dataId } = getKeyAndDataId(str)
+
+      let prefix = `<spyne-cms-item data-cms-id="{{${dataId}}}" data-cms-key="${key}"`
+
+      // IF AN ARRAY PRIMITIVE CHECK FOR ORIGINAL ARRAY POSITION
+      if (isArrPrimitive) {
+        prefix += ' data-cms-orig-key="{{origKey}}"'
+      }
+
+      // CREATE PROXY TAG
+      const suffix = '</spyne-cms-item>'
+      const param =  isArrPrimitive ? '{{spyneLoopKey}}' : str
+      return `${prefix}><spyne-cms-item-hitbox></spyne-cms-item-hitbox><spyne-cms-item-text>${param}</spyne-cms-item-text>${suffix}`
+    }
+
+    const reSwapTags = (str, m1, m2, m3) => {
+      return formatCmsParam(str)
+    }
+
+    const reMethod = (str, m1, m2, m3, m4) => {
+      const m2Updated = String(m2).replace(reLines2, reSwapTags)
+      return `${m1}${m2Updated}`
+    }
+
+    return String(tmpl).replace(reLines1, reMethod)
+  }
+  // SpyneJS Enterprise Code End
+
+
   tempGetChannelsInstance() {
 
   }

package/src/spyne/utils/spyne-utils-channel-route.js

@@ -93,6 +93,20 @@ export class SpyneUtilsChannelRoute {
   static addRouteDatasets(channelRouteObj) {
     // channelRouteObj.type='query';
 
+    function removeUndefined(arr) {
+      return arr.map(obj => {
+        for (const key in obj) {
+          if (key === undefined || key === 'undefined' || obj[key] === undefined) {
+            delete obj[key]
+          } else if (obj[key] && typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+            // recurse if nested object
+            obj[key] = removeUndefined([obj[key]])[0]
+          }
+        }
+        return obj
+      })
+    }
+
     const { type, isHash } = channelRouteObj
 
     // create href and check to see if need to convert to hash href links
@@ -163,10 +177,11 @@ export class SpyneUtilsChannelRoute {
     }
 
     const reducedArr = createInitialValFn([], channelRouteObj.routes)
-    const routeDatasetsArr = flatten(reducedArr)
+    let routeDatasetsArr = flatten(reducedArr)
+    routeDatasetsArr = removeUndefined(routeDatasetsArr)
 
     const getNavProps = (datasetsArr) => {
-      const exclude = reject(includes(__, ['title', 'href', 'navLevel']))
+      const exclude = reject(includes(__, ['title', 'href', 'navLevel', 'undefined']))
       const getMainKeys = compose(uniq, exclude, flatten, map(keys))
       return getMainKeys(datasetsArr)
     }

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

@@ -140,6 +140,17 @@ export class DomElementTemplate {
     this.isProxyData = data.__cms__isProxy === true
     this.testMode = opts?.testMode
 
+    /*
+    if (this.isProxyData === true) {
+      console.log('PROXY IS ', data.__cms__rootData)
+      this.template = DomElementTemplate.formatTemplateForProxyData(this.template)
+    }
+*/
+
+    if (SpyneAppProperties.enableCMSProxies && this.isProxyData === true) {
+      this.template = SpyneAppProperties.formatTemplateForProxyData(this.template)
+    }
+
     const checkForArrayData = () => {
       if (is(Array, data) === true) {
         data = { spyneData:data }