Skip to content

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

License

Notifications You must be signed in to change notification settings

daichirata/vue-sanitize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-sanitize

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

Software License Packagist Latest Version Issues

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •