Gathering detailed insights and metrics for vue-dompurify-html
Gathering detailed insights and metrics for vue-dompurify-html
Gathering detailed insights and metrics for vue-dompurify-html
Gathering detailed insights and metrics for vue-dompurify-html
@cmss-cli/vue-dompurify-html
Safe replacement for the v-html directive
vue-dompurify-html-ssr
Safe replacement for the v-html directive
mt-v-safe-html
A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on DOMPurify
mt-v-safe-html-nuxt
A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on DOMPurify for nuxt
npm install vue-dompurify-html
Typescript
Module System
Node Version
NPM Version
TypeScript (96.95%)
JavaScript (1.58%)
Nix (1.47%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
314 Stars
3,439 Commits
25 Forks
5 Watchers
5 Branches
6 Contributors
Updated on Jul 09, 2025
Latest Version
5.3.0
Package Id
vue-dompurify-html@5.3.0
Unpacked Size
13.11 kB
Size
4.63 kB
File Count
8
NPM Version
10.9.2
Node Version
22.14.0
Published on
May 05, 2025
Cumulative downloads
Total Downloads
1
1
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.
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>
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.
No vulnerabilities found.
Reason
30 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
all dependencies are pinned
Details
Reason
license file detected
Details
Reason
SAST tool is run on all commits
Details
Reason
security policy file detected
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
1 existing vulnerabilities detected
Details
Reason
branch protection is not maximal on development and all release branches
Details
Reason
Found 0/2 approved changesets -- score normalized to 0
Reason
project is not fuzzed
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year