JarCastinghastscript
hast utility to create trees in HTML or SVG.
Similar to hyperscript, virtual-dom/h, React.createElement, and Vue’s createElement, but for hast.
Use unist-builder to create any unist tree.
Install
npm:
npm install hastscript
Use
var h = require('hastscript')
var s = require('hastscript/svg')
// Children as an array:
console.log(
h('.foo#some-id', [
h('span', 'some text'),
h('input', {type: 'text', value: 'foo'}),
h('a.alpha', {class: 'bravo charlie', download: 'download'}, [
'delta',
'echo'
])
])
)
// Children as arguments:
console.log(
h(
'form',
{method: 'POST'},
h('input', {type: 'text', name: 'foo'}),
h('input', {type: 'text', name: 'bar'}),
h('input', {type: 'submit', value: 'send'})
)
)
// SVG:
console.log(
s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 500 500'}, [
s('title', 'SVG `<circle>` element'),
s('circle', {cx: 120, cy: 120, r: 100})
])
)
Yields:
{
type: 'element',
tagName: 'div',
properties: {className: ['foo'], id: 'some-id'},
children: [
{
type: 'element',
tagName: 'span',
properties: {},
children: [{type: 'text', value: 'some text'}]
},
{
type: 'element',
tagName: 'input',
properties: {type: 'text', value: 'foo'},
children: []
},
{
type: 'element',
tagName: 'a',
properties: {className: ['alpha', 'bravo', 'charlie'], download: true},
children: [{type: 'text', value: 'delta'}, {type: 'text', value: 'echo'}]
}
]
}
{
type: 'element',
tagName: 'form',
properties: {method: 'POST'},
children: [
{
type: 'element',
tagName: 'input',
properties: {type: 'text', name: 'foo'},
children: []
},
{
type: 'element',
tagName: 'input',
properties: {type: 'text', name: 'bar'},
children: []
},
{
type: 'element',
tagName: 'input',
properties: {type: 'submit', value: 'send'},
children: []
}
]
}
{
type: 'element',
tagName: 'svg',
properties: {xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500'},
children: [
{
type: 'element',
tagName: 'title',
properties: {},
children: [{type: 'text', value: 'SVG `<circle>` element'}]
},
{
type: 'element',
tagName: 'circle',
properties: {cx: 120, cy: 120, r: 100},
children: []
}
]
}
API
h(selector?[, properties][, ...children])
s(selector?[, properties][, ...children])
DSL to create virtual hast trees for HTML or SVG.
Parameters
selector
Simple CSS selector (string, optional). Can contain a tag name (foo), IDs (#bar), and classes (.baz). If there is no tag name in the selector, h defaults to a div element, and s to a g element. selector is parsed by hast-util-parse-selector.
properties
Map of properties (Object.<*>, optional).
children
(Lists of) child nodes (string, Node, Array.<string|Node>, optional). When strings are encountered, they are mapped to text nodes.
Returns
Security
Use of hastscript can open you up to a cross-site scripting (XSS) attack as values are injected into the syntax tree. The following example shows how a script is injected that runs when loaded in a browser.
var tree = {type: 'root', children: []}
tree.children.push(h('script', 'alert(1)'))
Yields:
<script>alert(1)</script>
The following example shows how an image is injected that fails loading and therefore runs code in a browser.
var tree = {type: 'root', children: []}
// Somehow someone injected these properties instead of an expected `src` and
// `alt`:
var otherProps = {src: 'x', onError: 'alert(2)'}
tree.children.push(h('img', {src: 'default.png', ...otherProps}))
Yields:
<img src="x" onerror="alert(2)">
The following example shows how code can run in a browser because someone stored an object in a database instead of the expected string.
var tree = {type: 'root', children: []}
// Somehow this isn’t the expected `'wooorm'`.
var username = {
type: 'element',
tagName: 'script',
children: [{type: 'text', value: 'alert(3)'}]
}
tree.children.push(h('span.handle', username))
Yields:
<span class="handle"><script>alert(3)</script></span>
Either do not use user input in hastscript or use hast-util-santize.
Related
unist-builder— Create any unist treexastscript— Create a xast treehast-to-hyperscript— Convert a Node to React, Virtual DOM, Hyperscript, and morehast-util-from-dom— Transform a DOM tree to hasthast-util-select—querySelector,querySelectorAll, andmatcheshast-util-to-html— Stringify nodes to HTMLhast-util-to-dom— Transform to a DOM tree
Contribute
See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
