A safe standalone DOM renderer for writers-mark.
npm install writers-mark writers-mark-dom
This library is meant to consume the output of the core writers-mark-ts library. It consists of a single render()
function that accepts Writer's Mark IR and a target HTMLElement as parameters.
import {Context} from 'writers-mark'
import {render} from 'writers-mark-dom'
const ctx = new Context();
const style = ctx.compileStyle(styleString);
const text = ctx.compileText(contextString, [style]);
render(text, document.getElementById('root'));
N.B. Due to the way IFrame sandboxes work, the target HTML element must be in the dom already.
It is possible to substantially speed up rendering by caching the results of ctx.compileText(). However, there is one important consideration:
render()
expects the Writer's Mark IR to be valid. Unless you have full trust in the entire
chain of custody between the call call to Context.compileText()
and the call to render()
,
you should always check the validity of the IR before rendering it.
import {Context} from 'writers-mark'
import {render} from 'writers-mark-dom'
const ctx = new Context();
const style = ctx.compileStyle(styleString);
fetch("http://example.com/path_to_resource.json")
.then(response => response.json())
.then(text => {
if(ctx.isTextValid(text)) {
render(text, document.getElementById('root');
}
}));
Here are the measures the library takes to ensure rendered User-Generated Content is safe:
- Writer's Mark is rendered in a sandboxed iframe.
-
- The only policy enabled is
allow-same-origin
, which is currently required for the rendering to work.
- The only policy enabled is
- All rendering is performed through the DOM api. No text-based rendering whatsoever is used, including when rendering style rules.
- The list of tags used, and the attributes that are set is:
-
<p>
:class
-
<span>
:class
-
<a>
:href
-
<style>
-
-
- The only selectors used are classes.
-
-
-
- The allowed attributes are determined by the
Context
.
- The allowed attributes are determined by the
-