Whitelist-based HTML Sanitizer (sanitize-html) for Vue.js Apps

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

or

yarn add vue-sanitize

Usage

Register the plugin

import VueSanitize from "vue-sanitize";
Vue.use(VueSanitize);

You can pass default options too:

defaultOptions = {
    allowedTags: ['a', 'b'],
    allowedAttributes: {
      'a': [ 'href' ]
    }
};
Vue.use(VueSanitize, 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(VueSanitize[, defaultOptions])

options

• Type: Object

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

this.$sanitize(diarty[, options])

diarty

• Type: String
• Required: true

options

• Type: Object

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

VueSanitize.defaults

Return sanitizeHtml.defaults.

Change log

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please email daichirata@gmail.com 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.

Download Details:

Author: daichirata

Source Code: https://github.com/daichirata/vue-sanitize

#vue #vuejs #javascript