vue-dompurify-html

⚠️ This branch is meant to be used with Vue 3. If you are looking for a version compatible with Vue 2, go to master branch.

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@vue-next

Usage

import { createApp } from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

const app = createApp({
    data: () => ({
        rawHtml: '<span style="color: red">This should be red.</span>'
    })
});
app.use(VueDOMPurifyHTML);
app.mount('#app');

In your template:

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

You can also define your DOMPurify configurations:

import { createApp } from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

const app = createApp({
    data: () => ({
        rawHtml: '<span style="color: red">This should be red.</span>',
        svgContent: '<svg><rect height="50"></rect></svg>'
    })
});
app.use(VueDOMPurifyHTML, {
  namedConfigurations: {
    'svg': {
      USE_PROFILES: { svg: true }
    },
    'mathml': {
      USE_PROFILES: { mathMl: true }
    },
  }
});
app.mount("#app")

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

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

Alternatively, you can define a default DOMPurify configuration:

import { createApp } from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

const app = createApp({
    data: () => ({
        rawHtml: '<span style="color: red">This should be red.</span>'
    })
});
app.use(VueDOMPurifyHTML, {
  default: {
    USE_PROFILES: { html: false }
  }
});
app.mount('#app');

The default DOMPurify configuration will be used:

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

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

import { createApp } from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

const app = createApp({
    data: () => ({
        rawHtml: '<span style="color: red">This should be red.</span>'
    })
});
app.use(VueDOMPurifyHTML, {
  hooks: {
    uponSanitizeElement: (currentNode) => {
      // Do something with the node
    }   
  }
});
app.mount('#app');

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

<template>
    <div v-dompurify-html="rawHtml"></div>
</template>

<script setup lang="ts">
import { buildVueDompurifyHTMLDirective } from '../src/';

const vdompurifyHtml = buildVueDompurifyHTMLDirective(<config...>);
const rawHtml = '<span style="color: red">Hello!</span>';
</script>