diff --git a/.gitignore b/.gitignore index 72e9b45..9df4e9f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /dist /node_modules /npm-debug.log +package-lock.json .DS_Store diff --git a/.travis.yml b/.travis.yml index 8524235..965fe2d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js -node_js: - - 4 +node_js: node +cache: npm diff --git a/package.json b/package.json index b9b826d..6e3d2ff 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vhtml", "amdName": "vhtml", - "version": "2.0.0", + "version": "2.2.0", "description": "Hyperscript reviver that constructs a sanitized HTML string.", "main": "dist/vhtml.js", "minified:main": "dist/vhtml.min.js", diff --git a/src/empty-tags.js b/src/empty-tags.js new file mode 100644 index 0000000..6f91e68 --- /dev/null +++ b/src/empty-tags.js @@ -0,0 +1,18 @@ +export default [ + 'area', + 'base', + 'br', + 'col', + 'command', + 'embed', + 'hr', + 'img', + 'input', + 'keygen', + 'link', + 'meta', + 'param', + 'source', + 'track', + 'wbr' +]; \ No newline at end of file diff --git a/src/vhtml.js b/src/vhtml.js index 10962fe..0e03f69 100644 --- a/src/vhtml.js +++ b/src/vhtml.js @@ -1,12 +1,20 @@ +import emptyTags from './empty-tags'; + // escape an attribute let esc = str => String(str).replace(/[&<>"']/g, s=>`&${map[s]};`); let map = {'&':'amp','<':'lt','>':'gt','"':'quot',"'":'apos'}; +let setInnerHTMLAttr = 'dangerouslySetInnerHTML'; +let DOMAttributeNames = { + className: 'class', + htmlFor: 'for' +}; let sanitized = {}; /** Hyperscript reviver that constructs a sanitized HTML string. */ export default function h(name, attrs) { - let stack=[]; + let stack=[], s = ''; + attrs = attrs || {}; for (let i=arguments.length; i-- > 2; ) { stack.push(arguments[i]); } @@ -18,26 +26,35 @@ export default function h(name, attrs) { // return name(attrs, stack.reverse()); } - let s = `<${name}`; - if (attrs) for (let i in attrs) { - if (attrs[i]!==false && attrs[i]!=null) { - s += ` ${esc(i)}="${esc(attrs[i])}"`; + if (name) { + s += '<' + name; + if (attrs) for (let i in attrs) { + if (attrs[i]!==false && attrs[i]!=null && i !== setInnerHTMLAttr) { + s += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs[i])}"`; + } } + s += '>'; } - s += '>'; - while (stack.length) { - let child = stack.pop(); - if (child) { - if (child.pop) { - for (let i=child.length; i--; ) stack.push(child[i]); - } - else { - s += sanitized[child]===true ? child : esc(child); + if (emptyTags.indexOf(name) === -1) { + if (attrs[setInnerHTMLAttr]) { + s += attrs[setInnerHTMLAttr].__html; + } + else while (stack.length) { + let child = stack.pop(); + if (child) { + if (child.pop) { + for (let i=child.length; i--; ) stack.push(child[i]); + } + else { + s += sanitized[child]===true ? child : esc(child); + } } } + + s += name ? `` : ''; } - sanitized[s += ``] = true; + sanitized[s] = true; return s; } diff --git a/test/vhtml.js b/test/vhtml.js index 0ab297c..f88ddf2 100644 --- a/test/vhtml.js +++ b/test/vhtml.js @@ -40,6 +40,14 @@ describe('vhtml', () => { ); }); + it('should not sanitize the "dangerouslySetInnerHTML" attribute, and directly set its `__html` property as innerHTML', () => { + expect( +
Injected HTML" }} /> + ).to.equal( + `
Injected HTML
` + ); + }); + it('should flatten children', () => { expect(
@@ -77,4 +85,109 @@ describe('vhtml', () => { `

Hi!

  • one

    This is item one!
  • two

    This is item two!
` ); }); + + it('should support sortof components without args', () => { + let items = ['one', 'two']; + + const Item = () => ( +
  • +

    +
  • + ); + + expect( +
    +

    Hi!

    +
      + { items.map( (item, index) => ( + + This is item {item}! + + )) } +
    +
    + ).to.equal( + `

    Hi!

    ` + ); + }); + + it('should support sortof components without args but with children', () => { + let items = ['one', 'two']; + + const Item = ({ children }) => ( +
  • +

    + {children} +
  • + ); + + expect( +
    +

    Hi!

    +
      + { items.map( (item, index) => ( + + This is item {item}! + + )) } +
    +
    + ).to.equal( + `

    Hi!

    • This is item one!
    • This is item two!
    ` + ); + }); + + it('should support empty (void) tags', () => { + expect( +
    + + +
    + + + +
    + + + + + + + + + + {/* Not void elements */} +
    + +

    +

    + ).to.equal( + `


    ` + ); + }); + + it('should handle special prop names', () => { + expect( +
    + ).to.equal( + '
    ' + ); + }); + + it('should support string fragments', () => { + expect( + h(null, null, "foo", "bar", "baz") + ).to.equal( + 'foobarbaz' + ); + }); + + it('should support element fragments', () => { + expect( + h(null, null,

    foo

    , bar,
    baz
    ) + ).to.equal( + '

    foo

    bar
    baz
    ' + ); + }); + }); pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy