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.

Installation

npm install vue-dompurify-html

The current version is only compatible with Vue 3. If you need Vue 2 support use a 4.1.x version.

Usage

You can see setup examples in the examples/ folder.

1import { createApp } from 'vue';
2import App from './App.vue';
3import VueDOMPurifyHTML from 'vue-dompurify-html';
4
5const app = createApp(App);
6app.use(VueDOMPurifyHTML);
7app.mount('#app');

In your SFC:

1<template>
2    <div v-dompurify-html="rawHtml"></div>
3</template>
4<script setup>
5import { ref } from 'vue';
6
7const rawHtml = ref('<span style="color: red">This should be red.</span>');
8</script>

You can also define your DOMPurify configurations:

1import { createApp } from 'vue';
2import App from './App.vue';
3import VueDOMPurifyHTML from 'vue-dompurify-html';
4
5const app = createApp(App);
6app.use(VueDOMPurifyHTML, {
7    namedConfigurations: {
8        svg: {
9            USE_PROFILES: { svg: true },
10        },
11        mathml: {
12            USE_PROFILES: { mathMl: true },
13        },
14    },
15});
16app.mount('#app');

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

1<template>
2    <div v-dompurify-html="rawHtml"></div>
3    <div v-dompurify-html:svg="svgContent"></div>
4</template>
5<script setup>
6import { ref } from 'vue';
7
8const rawHtml = ref('<span style="color: red">This should be red.</span>');
9const svgContent = ref('<svg><rect height="50"></rect></svg>');
10</script>

Alternatively, you can define a default DOMPurify configuration:

1import { createApp } from 'vue';
2import App from './App.vue';
3import VueDOMPurifyHTML from 'vue-dompurify-html';
4
5const app = createApp(App);
6app.use(VueDOMPurifyHTML, {
7    default: {
8        USE_PROFILES: { html: false },
9    },
10});
11app.mount('#app');

The default DOMPurify configuration will be used:

1<template>
2    <div v-dompurify-html="rawHtml"></div>
3</template>
4<script setup>
5import { ref } from 'vue';
6
7const rawHtml = ref('<span style="color: red">This should be red.</span>');
8</script>

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

1import { createApp } from 'vue';
2import App from './App.vue';
3import VueDOMPurifyHTML from 'vue-dompurify-html';
4
5const app = createApp(App);
6app.use(VueDOMPurifyHTML, {
7    hooks: {
8        uponSanitizeElement: (currentNode) => {
9            // Do something with the node
10        },
11    },
12});
13app.mount('#app');

If needed you can use the directive without installing it globally:

1<template>
2    <div v-dompurify-html="rawHtml"></div>
3</template>
4
5<script setup lang="ts">
6import { buildVueDompurifyHTMLDirective } from '../src/';
7
8const vdompurifyHtml = buildVueDompurifyHTMLDirective(<config...>);
9const rawHtml = '<span style="color: red">Hello!</span>';
10</script>

Usage with Nuxt 3

In your Nuxt folder, add the isomorphic-dompurify dependency and create a new plugin plugins/dompurify-html.ts with the following content:

1import VueDOMPurifyHTML from 'vue-dompurify-html';
2import { JSDOM } from 'jsdom';
3import DOMPurify from 'isomorphic-dompurify';
4
5export default defineNuxtPlugin((nuxtApp) => {
6    nuxtApp.vueApp.use(
7        VueDOMPurifyHTML,
8        { enableSSRPropsSupport: true },
9        () => DOMPurify,
10    );
11});

You can use the same configuration options than the Vue setup. You can see a complete example with some advanced configuration in the Nuxt 3 example.

Note: due to current limitations, the content processed by the directive are only processed client side.