Safe replacement for the v-html directive
npm install 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.
``
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.
You can see setup examples in the examples/ folder.
`js
import { createApp } from 'vue';
import App from './App.vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';
const app = createApp(App);
app.use(VueDOMPurifyHTML);
app.mount('#app');
`
In your SFC:
`vue`
You can also define your DOMPurify configurations:
`js
import { createApp } from 'vue';
import App from './App.vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';
const app = createApp(App);
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:
`vue`
Alternatively, you can define a default DOMPurify configuration:
`js
import { createApp } from 'vue';
import App from './App.vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';
const app = createApp(App);
app.use(VueDOMPurifyHTML, {
default: {
USE_PROFILES: { html: false },
},
});
app.mount('#app');
`
The default DOMPurify configuration will be used:
`vue`
There is also the possibility to set-up DOMPurify hooks:
`js
import { createApp } from 'vue';
import App from './App.vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';
const app = createApp(App);
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:
`vue
`
In your Nuxt folder, add the isomorphic-dompurify dependency
and create a new plugin plugins/dompurify-html.ts with the following content:
`js
import VueDOMPurifyHTML from 'vue-dompurify-html';
import { JSDOM } from 'jsdom';
import DOMPurify from 'isomorphic-dompurify';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(
VueDOMPurifyHTML,
{ enableSSRPropsSupport: true },
() => DOMPurify,
);
});
``
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.