spyne 0.23.0 → 0.25.0

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

@@ -1,10 +1,354 @@
-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, allowCustomElements } 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('CMS wrappers and custom elements', () => {
+    const cmsMarkup = '<spyne-cms-item data-cms-id="post.title" data-cms-key="title">' +
+      '<spyne-cms-item-hitbox></spyne-cms-item-hitbox>' +
+      '<spyne-cms-item-text>Hello</spyne-cms-item-text>' +
+      '</spyne-cms-item>'
+
+    it('should keep spyne-* CMS wrappers and data-cms attributes in app mode', () => {
+      const clean = sanitizeData(cmsMarkup, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('data-cms-key="title"')
+      expect(clean).to.include('<spyne-cms-item-hitbox')
+      expect(clean).to.include('<spyne-cms-item-text>Hello</spyne-cms-item-text>')
+    })
+
+    it('should keep spyne-* CMS wrappers in richtext mode', () => {
+      const clean = sanitizeData(cmsMarkup, { mode: 'richtext' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('data-cms-id="post.title"')
+    })
+
+    it('should keep spyne-* CMS wrappers at the template layer', () => {
+      const clean = String(sanitizeHTML(cmsMarkup))
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('<spyne-cms-item-text>Hello</spyne-cms-item-text>')
+    })
+
+    it('should still sanitize content inside CMS wrappers', () => {
+      const dirty = '<spyne-cms-item data-cms-key="body">' +
+        '<spyne-cms-item-text><script>bad()</script><b>ok</b></spyne-cms-item-text>' +
+        '</spyne-cms-item>'
+      const clean = sanitizeData(dirty, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.not.include('<script')
+      expect(clean).to.include('<b>ok</b>')
+    })
+
+    it('should not allow event-handler attributes on CMS wrappers', () => {
+      const dirty = '<spyne-cms-item onclick="evil()" data-cms-key="x">y</spyne-cms-item>'
+      const clean = sanitizeData(dirty, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.not.include('onclick')
+    })
+
+    it('should admit elements registered via allowCustomElements', () => {
+      allowCustomElements(['my-widget'])
+      const clean = sanitizeData('<my-widget data-config="a">w</my-widget>', { mode: 'app' })
+
+      expect(clean).to.include('<my-widget')
+      expect(clean).to.include('data-config="a"')
+    })
+
+    it('should reject invalid custom element names', () => {
+      allowCustomElements(['script', 'iframe', 'div'])
+      const clean = sanitizeData('<script>bad()</script>', { mode: 'app' })
+
+      expect(clean).to.not.include('<script')
+    })
+  })
+
+  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>')
+    })
   })
 })

package/src/tests/views/dom-el-selectors.test.js

@@ -41,14 +41,14 @@ describe('Dom Item Selector', () => {
     const el = document.querySelector('ul#my-list')
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
-    expect(liList.el.length).to.eq(5)
+    expect(liList.els.length).to.eq(5)
   })
   it('should add class to li', () => {
     const el = document.querySelector('ul#my-list')
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.addClass('foo')
-    const hasFooClassBool = liList.el[0].classList.contains('foo')
+    const hasFooClassBool = liList.els[0].classList.contains('foo')
     expect(hasFooClassBool).to.eq(true)
   })
 
@@ -57,7 +57,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.removeClass('has-svg')
-    const hasSvgClassBool = liList.el[0].classList.contains('has-svg')
+    const hasSvgClassBool = liList.els[0].classList.contains('has-svg')
     expect(hasSvgClassBool).to.eq(false)
   })
 
@@ -66,8 +66,8 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.setClass('foo bar')
-    // console.log('liList ',liList.el[0].className)
-    const isFooBarClassBool = liList.el[0].className === 'foo bar'
+    // console.log('liList ',liList.els[0].className)
+    const isFooBarClassBool = liList.els[0].className === 'foo bar'
     expect(isFooBarClassBool).to.eq(true)
   })
 
@@ -76,7 +76,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.inlineCss = 'background:orange;'
-    const backgroundSetBool = liList.el[0].style.getPropertyValue('background') === 'orange'
+    const backgroundSetBool = liList.els[0].style.getPropertyValue('background') === 'orange'
     expect(backgroundSetBool).to.eq(true)
   })
 
@@ -85,7 +85,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.toggleClass('foo', true)
-    const hasFooClassBool = liList.el[0].classList.contains('foo')
+    const hasFooClassBool = liList.els[0].classList.contains('foo')
     expect(hasFooClassBool).to.eq(true)
   })
 

package/src/tests/views/view-stream-selector.test.js

@@ -0,0 +1,178 @@
+const { expect } = require('chai')
+import { ViewStreamSelector } from '../../spyne/views/view-stream-selector'
+
+describe('ViewStreamSelector', () => {
+  let container
+
+  const el$ = (sel) => ViewStreamSelector(container, sel)
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML =
+      '<ul>' +
+      '<li class="item">A</li>' +
+      '<li class="item">A</li>' +
+      '<li class="item special">C</li>' +
+      '</ul>' +
+      '<p class="solo">only</p>'
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+  })
+
+  describe('el (always a single element)', () => {
+    it('should return the element for a single match', () => {
+      const el = el$('.solo').el
+      expect(el.nodeType).to.equal(1)
+      expect(el.textContent).to.equal('only')
+    })
+
+    it('should return the first element for multiple matches', () => {
+      const el = el$('.item').el
+      expect(el.nodeType).to.equal(1)
+      expect(el.textContent).to.equal('A')
+    })
+
+    it('should return null for no matches, mirroring querySelector', () => {
+      expect(el$('.nope').el).to.equal(null)
+    })
+
+    it('should support direct element methods on multi-match selectors', () => {
+      el$('.item').el.setAttribute('data-first', 'true')
+      const items = container.querySelectorAll('.item')
+      expect(items[0].dataset.first).to.equal('true')
+      expect(items[1].dataset.first).to.be.undefined
+    })
+  })
+
+  describe('els (always an Array)', () => {
+    it('should return an Array for multiple matches', () => {
+      const els = el$('.item').els
+      expect(Array.isArray(els)).to.be.true
+      expect(els).to.have.length(3)
+    })
+
+    it('should return a single-item Array for one match', () => {
+      const els = el$('.solo').els
+      expect(Array.isArray(els)).to.be.true
+      expect(els).to.have.length(1)
+    })
+
+    it('should return an empty Array for no matches', () => {
+      const els = el$('.nope').els
+      expect(Array.isArray(els)).to.be.true
+      expect(els).to.have.length(0)
+    })
+
+    it('should support Array methods directly', () => {
+      const texts = el$('.item').els.map(el => el.textContent)
+      expect(texts).to.deep.equal(['A', 'A', 'C'])
+    })
+
+    it('should keep arr as an equivalent legacy alias', () => {
+      expect(el$('.item').arr).to.deep.equal(el$('.item').els)
+      expect(Array.isArray(el$('.item').arr)).to.be.true
+    })
+  })
+
+  describe('length and len', () => {
+    it('should return the match count from length', () => {
+      expect(el$('.item').length).to.equal(3)
+      expect(el$('.solo').length).to.equal(1)
+      expect(el$('.nope').length).to.equal(0)
+    })
+
+    it('should keep len in agreement with length', () => {
+      expect(el$('.item').len).to.equal(el$('.item').length)
+    })
+  })
+
+  describe('chainability', () => {
+    it('should chain class mutators', () => {
+      el$('.item').addClass('x').toggleClass('y', true).removeClass('x')
+
+      const item = container.querySelector('.item')
+      expect(item.classList.contains('y')).to.be.true
+      expect(item.classList.contains('x')).to.be.false
+    })
+
+    it('should return the selector from mutators', () => {
+      const s = el$('.item')
+      expect(s.addClass('z')).to.equal(s)
+      expect(s.toggleClass('z')).to.equal(s)
+      expect(s.setClass('q')).to.equal(s)
+      expect(s.setActiveItem('active', '.special')).to.equal(s)
+    })
+  })
+
+  describe('appendChild', () => {
+    it('should append to the first element on a multi-match selector', () => {
+      const span = document.createElement('span')
+      span.className = 'appended'
+
+      el$('.item').appendChild(span)
+
+      const items = container.querySelectorAll('.item')
+      expect(items[0].querySelector('.appended')).to.not.be.null
+      expect(items[1].querySelector('.appended')).to.be.null
+    })
+
+    it('should warn and not throw on a non-matching selector', () => {
+      expect(() => el$('.nope').appendChild(document.createElement('b'))).to.not.throw()
+    })
+  })
+
+  describe('setActiveItem', () => {
+    it('should activate only the exact matching node', () => {
+      el$('.item').setActiveItem('active', '.special')
+
+      const items = container.querySelectorAll('.item')
+      expect(items[0].classList.contains('active')).to.be.false
+      expect(items[1].classList.contains('active')).to.be.false
+      expect(items[2].classList.contains('active')).to.be.true
+    })
+
+    it('should use identity, not deep equality, for duplicate siblings', () => {
+      const items = container.querySelectorAll('.item')
+
+      // items[0] and items[1] are identical markup; only the exact node activates
+      el$('.item').setActiveItem('active', items[1])
+
+      expect(items[0].classList.contains('active')).to.be.false
+      expect(items[1].classList.contains('active')).to.be.true
+    })
+  })
+
+  describe('elLegacy (undocumented pre-0.24 el contract)', () => {
+    it('should return a single element for a single match', () => {
+      expect(el$('.solo').elLegacy.nodeType).to.equal(1)
+    })
+
+    it('should return a NodeList for multiple matches', () => {
+      const el = el$('.item').elLegacy
+      expect(el.length).to.equal(3)
+      expect(el.nodeType).to.be.undefined
+    })
+
+    it('should return an empty list for no matches', () => {
+      expect(el$('.nope').elLegacy.length).to.equal(0)
+    })
+  })
+
+  describe('removed legacy members', () => {
+    it('should no longer define setActiveItem2, element, exist, nodeList, or getNodeListArray', () => {
+      const s = el$('.item')
+      expect(s.setActiveItem2).to.be.undefined
+      expect(s.element).to.be.undefined
+      expect(s.exist).to.be.undefined
+      expect(s.nodeList).to.be.undefined
+      expect(s.getNodeListArray).to.be.undefined
+    })
+
+    it('should keep unmount as a callable no-op for legacy apps', () => {
+      expect(() => el$('.item').unmount()).to.not.throw()
+    })
+  })
+})