spyne 0.22.4 → 0.24.0

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
   }
 

package/src/spyne/views/view-stream-broadcaster.js

@@ -85,6 +85,10 @@ export class ViewStreamBroadcaster {
       const data = {}// convertDomStringMapToObj(q.dataset);
       data.payload = convertDomStringMapToObj(q.dataset)
       data.payload = omit(['channel'], data.payload)
+      if (data.channel === 'ROUTE') {
+        data.payload.endPreventDefault = true
+      }
+
       data.channel = channel
       // payload needs vsid# to pass verification
 

package/src/tests/channels/channel-fetch.test.js

@@ -1,7 +1,7 @@
 //const { expect, assert } = require('chai')
 //const { ChannelFetch } = require('../../spyne/channels/channel-fetch-class')
 const { expect, assert } = require('chai')
-import { ChannelFetch } from '../../spyne/spyne';
+import { ChannelFetch, SpyneApp } from '../../spyne/spyne';
 
 describe('should test ChannelFetch', () => {
   const mapFn = (p) => {
@@ -95,4 +95,91 @@ describe('should test ChannelFetch', () => {
     const mapTypeUndefined = ChannelFetch.validateMapMethod(props, 'MY_TEST_NAME_2', true)
     // console.log('map methods is not of correct type added and is valid4 ',{mapTypeUndefined}) ;     expect(mapTypeUndefined).to.be.false;
   })
+
+  describe('conformed error action', () => {
+    const createPayloadContext = () => {
+      const context = {
+        props: { name: channelName },
+        sentActions: [],
+        createChannelPayloadItem(payload, action) {
+          this.sentActions.push({ payload, action })
+        }
+      }
+      return context
+    }
+
+    it('should register the generic error action', () => {
+      const context = { props: {} }
+      const actionsArr = ChannelFetch.prototype.addRegisteredActions.call(context)
+
+      expect(actionsArr).to.include('CHANNEL_ERROR_EVENT')
+      expect(actionsArr).to.include('CHANNEL_RESPONSE_EVENT')
+    })
+
+    it('should register the instance-derived error action alongside the response action', () => {
+      const context = {
+        props: {
+          extendedActionsArr: [
+            `${channelName}_RESPONSE_EVENT`,
+            `${channelName}_ERROR_EVENT`,
+            [`${channelName}_REQUEST_EVENT`, 'onFetchUpdate']
+          ]
+        }
+      }
+      const actionsArr = ChannelFetch.prototype.addRegisteredActions.call(context)
+
+      expect(actionsArr).to.include(`${channelName}_ERROR_EVENT`)
+      expect(actionsArr).to.include(`${channelName}_RESPONSE_EVENT`)
+    })
+
+    it('should emit the response action for a successful fetch payload', () => {
+      const context = createPayloadContext()
+      const streamItem = { id: 1, title: 'foo' }
+
+      ChannelFetch.prototype.onFetchReturned.call(context, streamItem)
+
+      expect(context.sentActions[0].action).to.equal(`${channelName}_RESPONSE_EVENT`)
+      expect(context.sentActions[0].payload).to.deep.equal(streamItem)
+    })
+
+    it('should emit the error action for a conformed fetch error payload', () => {
+      const context = createPayloadContext()
+      const streamItem = {
+        isChannelFetchError: true,
+        isError: true,
+        error: true,
+        errorType: 'FETCH_HTTP_ERROR',
+        message: 'Fetch request failed with status 404 Not Found',
+        status: 404,
+        statusText: 'Not Found',
+        url: 'https://jsonplaceholder.typicode.com/posts/does-not-exist'
+      }
+
+      ChannelFetch.prototype.onFetchReturned.call(context, streamItem)
+
+      expect(context.sentActions[0].action).to.equal(`${channelName}_ERROR_EVENT`)
+      expect(context.sentActions[0].payload).to.deep.equal(streamItem)
+    })
+
+    it('should not route a payload to the error action without the discriminator flag', () => {
+      const context = createPayloadContext()
+      const streamItem = { isError: true, message: 'data that merely resembles an error' }
+
+      ChannelFetch.prototype.onFetchReturned.call(context, streamItem)
+
+      expect(context.sentActions[0].action).to.equal(`${channelName}_RESPONSE_EVENT`)
+    })
+
+    it('should add the derived error action to channelActions on a constructed instance', () => {
+      SpyneApp.init({})
+
+      const instanceChannelName = 'CHANNEL_FETCH_ERROR_ACTION_TEST'
+      const fetchChannel = new ChannelFetch(instanceChannelName, { url, pause: true })
+
+      expect(fetchChannel.channelActions).to.have.property(`${instanceChannelName}_ERROR_EVENT`)
+      expect(fetchChannel.channelActions).to.have.property(`${instanceChannelName}_RESPONSE_EVENT`)
+      expect(fetchChannel.channelActions).to.have.property(`${instanceChannelName}_REQUEST_EVENT`)
+      expect(fetchChannel.channelActions).to.have.property('CHANNEL_ERROR_EVENT')
+    })
+  })
 })

package/src/tests/utils/channel-fetch-util.test.js

@@ -49,9 +49,11 @@ describe('ChannelFetchUtil Tests', () => {
 
   describe('stringify body method', () => {
     it('should convert body object to string', () => {
-      let bodyStr = ChannelFetchUtil.stringifyBodyIfItExists(propsPost)
-      bodyStr = R.omit(['mapFn'], bodyStr)
+      const result = ChannelFetchUtil.stringifyBodyIfItExists(propsPost)
+      const bodyStr = R.omit(['mapFn', 'headers'], result)
+
       expect(bodyStr).to.deep.equal(propsStringified)
+      expect(result.headers.get('Content-Type')).to.equal('application/json')
     })
 
     it('should not parse body when its a string', () => {
@@ -127,4 +129,44 @@ describe('ChannelFetchUtil Tests', () => {
       expect(channelFetchUtil.mapFn).to.be.a('function')
     })
   })
+
+  describe('conformed fetch error payload', () => {
+    const metadata = {
+      channelName: 'CHANNEL_MY_FETCHED_DATA',
+      url,
+      responseType: 'json'
+    }
+
+    it('should conform an http error into a flat payload with the discriminator flag', () => {
+      const httpError = ChannelFetchUtil.createFetchError({
+        errorType: 'FETCH_HTTP_ERROR',
+        message: 'Fetch request failed with status 404 Not Found',
+        metadata: { ...metadata, status: 404, statusText: 'Not Found', ok: false },
+        rawBody: '{"error":"not found"}'
+      })
+
+      const errorPayload = ChannelFetchUtil.createFetchErrorPayload(httpError, metadata)
+
+      expect(errorPayload.isChannelFetchError).to.be.true
+      expect(errorPayload.isError).to.be.true
+      expect(errorPayload.errorType).to.equal('FETCH_HTTP_ERROR')
+      expect(errorPayload.status).to.equal(404)
+      expect(errorPayload.statusText).to.equal('Not Found')
+      expect(errorPayload.url).to.equal(url)
+      expect(errorPayload.channelName).to.equal('CHANNEL_MY_FETCHED_DATA')
+      expect(errorPayload.rawBodyPreview).to.equal('{"error":"not found"}')
+    })
+
+    it('should conform a network error using fallback metadata and error type', () => {
+      const networkError = new TypeError('Failed to fetch')
+
+      const errorPayload = ChannelFetchUtil.createFetchErrorPayload(networkError, metadata)
+
+      expect(errorPayload.isChannelFetchError).to.be.true
+      expect(errorPayload.errorType).to.equal('FETCH_UNKNOWN_ERROR')
+      expect(errorPayload.message).to.equal('Failed to fetch')
+      expect(errorPayload.url).to.equal(url)
+      expect(errorPayload.status).to.be.undefined
+    })
+  })
 })

package/src/tests/utils/security.test.js

@@ -1,10 +1,290 @@
-const {
-  expect,
-  assert
-} = require('chai')
-
-describe('root test', () => {
-  it('should run shell tests', () => {
-    return true
+const { expect } = require('chai')
+import { SpyneApp, SpyneAppProperties } from '../../spyne/spyne'
+import sanitizeData, { sanitizeAttribute } from '../../spyne/utils/sanitize-data'
+import sanitizeHTML from '../../spyne/utils/sanitize-html'
+import { DomElement } from '../../spyne/views/dom-element'
+import { DomElementTemplate } from '../../spyne/views/dom-element-template'
+
+describe('sanitization security', () => {
+  before(() => {
+    // Idempotent: configures the sanitizers if no other suite has already.
+    SpyneApp.init({})
+  })
+
+  describe('default posture', () => {
+    it('should default SpyneAppProperties.mode to app', () => {
+      expect(SpyneAppProperties.mode).to.equal('app')
+    })
+
+    it('should sanitize template HTML even when strict is false', () => {
+      const dirty = '<img src="x" onerror="alert(1)"><script>bad()</script><b>keep</b>'
+      const clean = String(sanitizeHTML(dirty))
+
+      expect(clean).to.not.include('onerror')
+      expect(clean).to.not.include('<script')
+      expect(clean).to.include('<b>keep</b>')
+    })
+  })
+
+  describe('sanitizeAttribute', () => {
+    it('should block event-handler attributes', () => {
+      expect(sanitizeAttribute('onclick', 'evil()').allowed).to.be.false
+      expect(sanitizeAttribute('ONERROR', 'evil()').allowed).to.be.false
+    })
+
+    it('should block javascript: URIs on URL attributes', () => {
+      expect(sanitizeAttribute('href', 'javascript:alert(1)').allowed).to.be.false
+      expect(sanitizeAttribute('src', 'JaVaScRiPt:alert(1)').allowed).to.be.false
+      expect(sanitizeAttribute('formaction', 'vbscript:x').allowed).to.be.false
+    })
+
+    it('should block whitespace-obfuscated schemes', () => {
+      expect(sanitizeAttribute('href', 'jav\tascript:alert(1)').allowed).to.be.false
+      expect(sanitizeAttribute('href', ' javascript:alert(1)').allowed).to.be.false
+      expect(sanitizeAttribute('href', 'java\nscript:alert(1)').allowed).to.be.false
+    })
+
+    it('should allow safe and relative URIs', () => {
+      expect(sanitizeAttribute('href', 'https://example.com').allowed).to.be.true
+      expect(sanitizeAttribute('href', '/page/one').allowed).to.be.true
+      expect(sanitizeAttribute('href', '#section').allowed).to.be.true
+      expect(sanitizeAttribute('href', 'mailto:a@b.com').allowed).to.be.true
+      expect(sanitizeAttribute('src', 'data:image/png;base64,AA==').allowed).to.be.true
+    })
+
+    it('should block data URIs that are not images', () => {
+      expect(sanitizeAttribute('src', 'data:text/html,<script>x</script>').allowed).to.be.false
+    })
+
+    it('should sanitize srcdoc as an HTML document', () => {
+      const result = sanitizeAttribute('srcdoc', '<script>bad()</script><p>ok</p>')
+
+      expect(result.allowed).to.be.true
+      expect(result.value).to.not.include('<script')
+      expect(result.value).to.include('<p>ok</p>')
+    })
+
+    it('should pass non-URL attributes through untouched', () => {
+      const result = sanitizeAttribute('id', 'my-id')
+
+      expect(result.allowed).to.be.true
+      expect(result.value).to.equal('my-id')
+    })
+  })
+
+  describe('sanitizeData modes', () => {
+    it('should strip scripts and iframes in app mode', () => {
+      const clean = sanitizeData('<script>bad()</script><iframe src="https://x.com"></iframe><b>keep</b>', { mode: 'app' })
+
+      expect(clean).to.not.include('<script')
+      expect(clean).to.not.include('<iframe')
+      expect(clean).to.include('<b>keep</b>')
+    })
+
+    it('should sanitize nested object and array values', () => {
+      const data = {
+        title: '<script>bad()</script>ok',
+        items: ['<b>fine</b>', { deep: '<script>x</script>deep-ok' }]
+      }
+      const clean = sanitizeData(data, { mode: 'app' })
+
+      expect(clean.title).to.equal('ok')
+      expect(clean.items[0]).to.equal('<b>fine</b>')
+      expect(clean.items[1].deep).to.equal('deep-ok')
+    })
+
+    it('should keep iframes in richtext mode with a forced sandbox', () => {
+      const clean = sanitizeData('<iframe src="https://example.com/embed"></iframe>', { mode: 'richtext' })
+
+      expect(clean).to.include('<iframe')
+      expect(clean).to.include('sandbox=')
+    })
+
+    it('should remove non-https iframe src in richtext mode', () => {
+      const clean = sanitizeData('<iframe src="http://example.com/embed"></iframe>', { mode: 'richtext' })
+
+      expect(clean).to.include('<iframe')
+      expect(clean).to.not.include('src=')
+    })
+
+    it('should drop javascript: hrefs in richtext content', () => {
+      const clean = sanitizeData('<a href="javascript:alert(1)">x</a>', { mode: 'richtext' })
+
+      expect(clean).to.not.include('javascript:')
+    })
+
+    it('should return data untouched with per-call disableSanitize', () => {
+      const raw = '<script>kept-by-request()</script>'
+
+      expect(sanitizeData(raw, { disableSanitize: true })).to.equal(raw)
+    })
+  })
+
+  describe('iframe policy', () => {
+    it('should allow iframes in app mode with iframes.allow', () => {
+      const clean = sanitizeData('<iframe src="https://example.com/embed"></iframe>', {
+        mode: 'app',
+        iframes: { allow: true }
+      })
+
+      expect(clean).to.include('<iframe')
+      expect(clean).to.include('sandbox=')
+    })
+
+    it('should strip iframes from richtext mode with iframes.allow false', () => {
+      const clean = sanitizeData('<iframe src="https://example.com/embed"></iframe><b>keep</b>', {
+        mode: 'richtext',
+        iframes: { allow: false }
+      })
+
+      expect(clean).to.not.include('<iframe')
+      expect(clean).to.include('<b>keep</b>')
+    })
+
+    it('should enforce the origin allowlist on iframe src', () => {
+      const opts = {
+        mode: 'richtext',
+        iframes: { allowedOrigins: ['https://www.youtube.com'] }
+      }
+
+      const allowed = sanitizeData('<iframe src="https://www.youtube.com/embed/abc"></iframe>', opts)
+      const blocked = sanitizeData('<iframe src="https://evil.example.com/embed"></iframe>', opts)
+
+      expect(allowed).to.include('src="https://www.youtube.com/embed/abc"')
+      expect(blocked).to.include('<iframe')
+      expect(blocked).to.not.include('src=')
+    })
+
+    it('should respect a custom sandbox value and sandbox false', () => {
+      const custom = sanitizeData('<iframe src="https://example.com/e"></iframe>', {
+        mode: 'richtext',
+        iframes: { sandbox: 'allow-scripts' }
+      })
+      const disabled = sanitizeData('<iframe src="https://example.com/e"></iframe>', {
+        mode: 'richtext',
+        iframes: { sandbox: false }
+      })
+
+      expect(custom).to.include('sandbox="allow-scripts"')
+      expect(disabled).to.not.include('sandbox')
+    })
+
+    it('should keep an author-specified sandbox attribute', () => {
+      const clean = sanitizeData('<iframe src="https://example.com/e" sandbox="allow-forms"></iframe>', {
+        mode: 'richtext'
+      })
+
+      expect(clean).to.include('sandbox="allow-forms"')
+    })
+
+    it('should apply iframe policy on the DomElement attribute channel', () => {
+      const el = new DomElement({
+        tagName: 'iframe',
+        attributes: { src: 'https://example.com/embed' }
+      }).render()
+
+      expect(el.getAttribute('src')).to.equal('https://example.com/embed')
+      expect(el.getAttribute('sandbox')).to.be.a('string')
+    })
+
+    it('should block non-https iframe src on the DomElement attribute channel', () => {
+      const el = new DomElement({
+        tagName: 'iframe',
+        attributes: { src: 'http://example.com/embed' }
+      }).render()
+
+      expect(el.hasAttribute('src')).to.be.false
+    })
+
+    it('should allow same-origin relative iframe src', () => {
+      const clean = sanitizeData('<iframe src="/static/iframes/tool/index.html"></iframe>', {
+        mode: 'richtext'
+      })
+
+      expect(clean).to.include('src="/static/iframes/tool/index.html"')
+    })
+
+    it('should allow same-origin absolute iframe src regardless of scheme', () => {
+      const sameOriginUrl = `${window.location.origin}/static/iframes/tool/index.html`
+      const clean = sanitizeData(`<iframe src="${sameOriginUrl}"></iframe>`, {
+        mode: 'richtext'
+      })
+
+      expect(clean).to.include(`src="${sameOriginUrl}"`)
+    })
+
+    it('should allow http on localhost hosts as a secure context', () => {
+      const clean = sanitizeData('<iframe src="http://localhost:8123/dev-tool.html"></iframe>', {
+        mode: 'richtext'
+      })
+
+      expect(clean).to.include('src="http://localhost:8123/dev-tool.html"')
+    })
+
+    it('should allow same-origin src even when an origin allowlist is set', () => {
+      const clean = sanitizeData('<iframe src="/local/tool.html"></iframe>', {
+        mode: 'richtext',
+        iframes: { allowedOrigins: ['https://www.youtube.com'] }
+      })
+
+      expect(clean).to.include('src="/local/tool.html"')
+    })
+  })
+
+  describe('DomElement attribute guard', () => {
+    it('should drop unsafe attribute values and keep safe ones', () => {
+      const el = new DomElement({
+        tagName: 'a',
+        attributes: {
+          href: 'javascript:alert(1)',
+          onclick: 'evil()',
+          id: 'safe-id',
+          title: 'safe title'
+        }
+      }).render()
+
+      expect(el.hasAttribute('href')).to.be.false
+      expect(el.hasAttribute('onclick')).to.be.false
+      expect(el.getAttribute('id')).to.equal('safe-id')
+      expect(el.getAttribute('title')).to.equal('safe title')
+    })
+
+    it('should keep safe URL attributes', () => {
+      const el = new DomElement({
+        tagName: 'a',
+        attributes: { href: 'https://example.com/page' }
+      }).render()
+
+      expect(el.getAttribute('href')).to.equal('https://example.com/page')
+    })
+
+    it('should apply dataset values untouched', () => {
+      const el = new DomElement({
+        tagName: 'div',
+        attributes: { dataset: { pageId: 'page-1' } }
+      }).render()
+
+      expect(el.dataset.pageId).to.equal('page-1')
+    })
+  })
+
+  describe('DomElementTemplate output', () => {
+    it('should sanitize renderToString output', () => {
+      const tmpl = new DomElementTemplate('<b>{{word}}</b><script>bad()</script>', { word: 'hello' })
+      const html = tmpl.renderToString()
+
+      expect(html).to.not.include('<script')
+      expect(html).to.include('<b>hello</b>')
+    })
+
+    it('should sanitize renderDocFrag output', () => {
+      const tmpl = new DomElementTemplate('<p>{{word}}</p><img src="x" onerror="alert(1)">', { word: 'hi' })
+      const frag = tmpl.renderDocFrag()
+      const div = document.createElement('div')
+      div.appendChild(frag)
+
+      expect(div.innerHTML).to.not.include('onerror')
+      expect(div.innerHTML).to.include('<p>hi</p>')
+    })
   })
 })