v-sanitize

Whitelist-based HTML sanitizer (sanitize-html) for Vue.js apps.

Note

We should always sanitize user input values on the server. Do sanitize with Vue only for necessary cases (e.g markdown preview).

Install

npm install --save v-sanitize

or

yarn add v-sanitize

Usage

Register the plugin

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

Use with NuxtJS

nuxt.config.js

export default {
  modules: [
    ['v-sanitize/nuxt', { /* options */ }]
  ],
  sanitize: { /* options */ }
}

You can pass default options too:

defaultOptions = {
    allowedTags: ['a', 'b'],
    allowedAttributes: {
      'a': [ 'href' ]
    }
};
Vue.use(VSanitize, defaultOptions);

Use it in your components:

<template>
  <div contenteditable="true" @paste="sanitize"></div>
</template>

<script>
export default {
  methods: {
    sanitize(event) {
      event.preventDefault();
      const html = this.$sanitize(event.clipboardData.getData('text/html'));
      //or
      //const html = this.$sanitize(
      //  event.clipboardData.getData('text/html'),
      //  {
      //    allowedTags: ['b', 'br']
      //  }
      //);
      document.execCommand('insertHTML', false, (html));
    }
  },
}
</script>

API

Vue.use(VSanitize[, defaultOptions])

options

• Type: Object

This plugin is dependent on sanitize-html. For details, see here https://github.com/punkave/sanitize-html#readme.

this.$sanitize(dirty[, options])

dirty

• Type: String
• Required: true

options

• Type: Object

If you don't pass an options, the default options will be used.

VSanitize.defaults

Return sanitizeHtml.defaults.

Directive

Vue's default v-text is HTML-insensitive, while v-html doesn't perform sanitization by default.

v-sanitize is a Vue directive for HTML sanitization, powered by the flexible sanitize-html. The directive can receive either a string, that will undergo a partial sanitization if no modifier is present, or an array of two elements, the first being a sanitize-html whitelist (know more here) and the second being the string to be sanitized.

<div v-sanitize="unsafe_html"></div>

Strip all tags (.strip modifier)

Removes all HTML tags, keeping just the text content.

<span v-sanitize.strip="unsafe_html"></span>

Remove unsafe tags (default/ .basic modifier)

Allows some HTML tags, but remove unsafe content, like <script/> and <iframe/> tags.

<span v-sanitize.basic="unsafe_html"></span> = <span v-sanitize="unsafe_html"></span>

Keep inline styles (.inline modifier)

Removes most tags, keeping only inline formatting and <br/> tags.

<span v-sanitize.inline="unsafe_html"></span>

Allow all tags (.nothing modifier)

Allows all HTML tags, not performing sanitization. For all effects, it's a replacement for v-html.

<span v-sanitize.nothing="unsafe_html"></span>

Change log

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

The MIT License (MIT). Please see License File for more information.