vue-dompurify-html

A "safe" replacement for the v-html directive. The HTML code is sanitized with DOMPurify before being interpreted.

This is only a small wrapper around DOMPurify to ease its usage in a Vue app. You should take a look at the DOMPurify Security Goals & Threat Model to understand what are the limitations and possibilities.

If you are looking for a version compatible with Vue 3 checkout the main branch.

Installation

npm install vue-dompurify-html@vue-legacy

Usage

1import Vue from 'vue'
2import VueDOMPurifyHTML from 'vue-dompurify-html'
3
4Vue.use(VueDOMPurifyHTML)
5
6new Vue({
7  el: '#app',
8  data: {
9    rawHtml: '<span style="color: red">This should be red.</span>'
10  }
11})

In your template:

1<div id="app">
2    <div v-dompurify-html="rawHtml"></div>
3</div>

You can also define your DOMPurify configurations:

1import Vue from 'vue'
2import VueDOMPurifyHTML from 'vue-dompurify-html'
3
4Vue.use(VueDOMPurifyHTML, {
5  namedConfigurations: {
6    'svg': {
7      USE_PROFILES: { svg: true }
8    },
9    'mathml': {
10      USE_PROFILES: { mathMl: true }
11    },
12  }
13});
14
15new Vue({
16  el: '#app',
17  data: {
18    rawHtml: '<span style="color: red">This should be red.</span>',
19    svgContent: '<svg><rect height="50"></rect></svg>'
20  }
21})

Your configuration keys can then be used as an argument of the directive:

1<div id="app">
2    <div v-dompurify-html="rawHtml"></div>
3    <div v-dompurify-html:svg="svgContent"></div>
4</div>

Alternatively, you can define a default DOMPurify configuration:

1import Vue from 'vue'
2import VueDOMPurifyHTML from 'vue-dompurify-html'
3
4Vue.use(VueDOMPurifyHTML, {
5  default: {
6    USE_PROFILES: { html: false }
7  }
8});
9
10new Vue({
11  el: '#app',
12  data: {
13    rawHtml: '<span style="color: red">This should not be red.</span>'
14  }
15})

The default DOMPurify configuration will be used:

1<div id="app">
2    <div v-dompurify-html="rawHtml"></div>
3</div>

There is also the possibility to set-up DOMPurify hooks:

1import { createApp } from 'vue'
2import VueDOMPurifyHTML from 'vue-dompurify-html'
3
4const app = createApp({
5    data: () => ({
6        rawHtml: '<span style="color: red">This should be red.</span>'
7    })
8});
9app.use(VueDOMPurifyHTML, {
10  hooks: {
11    uponSanitizeElement: (currentNode) => {
12      // Do something with the node
13    }   
14  }
15});
16app.mount('#app');

Usage with Nuxt

Client side

The usage is similar than when directly using Vue.

Define a new Nuxt plugin to import and setup the directive to your liking:

1import Vue from 'vue';
2import VueDOMPurifyHTML from 'vue-dompurify-html';
3
4Vue.use(VueDOMPurifyHTML);

and then tell Nuxt to use it as client-side plugin in your Nuxt config:

1export default {
2  plugins: [{ src: '~/plugins/dompurify', mode: 'client' }]
3}

Server side

The usage is similar than when directly using Vue but you need to setup DOMPurify to work with Node.

Install this package, DOMPurify and JSDOM:

npm install vue-dompurify-html@vue-legacy dompurify jsdom

In your Nuxt config you will need to setup a "server-side" directive:

1export default {
2    render: {
3        bundleRenderer: {
4            directives: {
5                'dompurify-html': (el, dir) => {
6                    const insertHook = buildVueDompurifyHTMLDirective(
7                        {},
8                        () => {
9                            const window = new JSDOM('').window;
10                            return createDOMPurify(window);
11                        }
12                    ).inserted;
13                    insertHook(el, dir);
14                    el.data.domProps = { innerHTML: el.innerHTML };
15                }
16            }
17        }
18    }
19}

Note that if you are not using injectScripts: false in your Nuxt config you will also need to register a client-side plugin as described just before.