Ember-purify
When you need to render user provided HTML content but don't want to trust the user content with Ember's Ember.String.htmlSafe
or {{{ }}}
.
Uses DOMPurify to sanitize HTML & SVG. I strongly recommend you watch the video linked under the inspiration section. See XSS in action in Ember in this twiddle.
You can also run ember serve
to see the above mentioned approaches along with the purify-dom
helper. Inspect the DOM on all three broken images to see the difference.
Installation
ember install ember-purify
Usage
For templates,
{{purify-dom '<img src="missing-image.png" onerror=alert(1)//>'}}
will render
<img src="missing-image.png">
To use it in js,
import { sanitize } from 'dom-purify';
Note that global config isn't applied to the functions imported in JS.
Details on DOMPurify, the underlying library can be found in its README
Configuration
To configure the purify helper globally in your app's config/environment.js
,
ENV.APP.purify = {
};
In addition to the global configuration you can also pass the config to the helper which can either be merged to the global config(by default) or replaced(by passing overrideConfig=true)
{{purify-dom "<img src='google.com' data-something='dangerous'>" config=(hash ALLOW_DATA_ATTR=false) overrideConfig=true}}
Inspiration
Securing your EmberJS Application talk By Philippe De Ryck.
Installation
git clone <repository-url>
this repositorycd ember-purify
npm install
or yarn
Running
Running Tests
npm test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
Building
For more information on using ember-cli, visit http://ember-cli.com/.