Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-dompurify-html

Package Overview
Dependencies
Maintainers
0
Versions
36
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-dompurify-html

Safe replacement for the v-html directive

  • 5.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

vue-dompurify-html

npm Build Status Code Coverage

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.

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:

<template>
    <div v-dompurify-html="rawHtml"></div>
</template>
<script setup>
import { ref } from 'vue';

const rawHtml = ref('<span style="color: red">This should be red.</span>');
</script>

You can also define your DOMPurify configurations:

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:

<template>
    <div v-dompurify-html="rawHtml"></div>
    <div v-dompurify-html:svg="svgContent"></div>
</template>
<script setup>
import { ref } from 'vue';

const rawHtml = ref('<span style="color: red">This should be red.</span>');
const svgContent = ref('<svg><rect height="50"></rect></svg>');
</script>

Alternatively, you can define a default DOMPurify configuration:

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:

<template>
    <div v-dompurify-html="rawHtml"></div>
</template>
<script setup>
import { ref } from 'vue';

const rawHtml = ref('<span style="color: red">This should be red.</span>');
</script>

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

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:

<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>

Usage with Nuxt 3

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

import VueDOMPurifyHTML from 'vue-dompurify-html';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueDOMPurifyHTML);
});

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.

Keywords

FAQs

Package last updated on 24 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc