sivakumar-kailasam / ember-purify

Purify your html content before marking it safe

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 'dompurify';

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 = {
  // Refer to various config options in DOMPurify's README
};

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 repository
• cd ember-purify
• npm install or yarn

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://ember-cli.com/.