New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue-safe-html

Package Overview
Dependencies
Maintainers
3
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-safe-html

A Vue directive which renders sanitised HTML dynamically

  • 3.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.8K
decreased by-1.64%
Maintainers
3
Weekly downloads
 
Created
Source

vue-safe-html

Node NPM Github Checks Status Vue.js Vue.js

A Vue directive which renders sanitised HTML dynamically. Zero dependencies, compatible with Vue versions 3 and 2, TypeScript-ready.

Note: This library is not XSS-safe, but only strips tags programmatically.

Installation

Install package:

npm install vue-safe-html
# OR
yarn add vue-safe-html

Use the plugin:

import Vue from 'vue';
import VueSafeHTML from 'vue-safe-html';

Vue.use(VueSafeHTML);

Usage

In your component:

<template>
  <div v-safe-html="myUnsafeHTML">
</template>
export default {
  computed: {
    myUnsafeHTML() {
      return '<script>oh my!</script> I am safe!';
    }
  }
}

Renders to:

<div>I am safe!</div>

Options

allowedTags

Array of strings. Default: ['a', 'b', 'br', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup'].

Customize the tags that are allowed to be rendered, either by providing new ones:

Vue.use(VueSafeHTML, {
  allowedTags: ['marquee', 'blockquote'],
});

Or extending the default ones:

import VueSafeHTML, { allowedTags } from 'vue-safe-html';

Vue.use(VueSafeHTML, {
  allowedTags: [...allowedTags, 'marquee', 'blockquote'],
});

If no tags are passed, all tags are stripped:

import VueSafeHTML from 'vue-safe-html';

Vue.use(VueSafeHTML, {
  allowedTags: [],
});

It is also possible to provide custom allowed tags directly to the directive tag, using directive modifiers. This allows local override of the option:

<template>
  <!-- only allow p and strong tags -->
  <div v-safe-html.p.strong="myUnsafeHTML">
</template>
allowedAttributes

Array of strings. Default: []

Customize the tag attributes that are allowed to be rendered:

Vue.use(VueSafeHTML, {
  allowedTags: ['a'],
  allowedAttributes: ['title', 'class', 'href'],
});

### Nuxt

`vue-safe-html` is written as a Vue plugin so you can easily use it inside Nuxt by following [the Nuxt documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins).

## License

[Do No Harm](./LICENSE)

Keywords

FAQs

Package last updated on 18 Oct 2023

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