Whitelist-based HTML sanitizer (sanitize-html) for Vue.js apps.
We should always sanitize user input values on the server. Do sanitize with Vue only for necessary cases (e.g markdown preview).
npm install --save vue-sanitize
or
yarn add vue-sanitize
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>- Type:
Object
This plugin is dependent on sanitize-html. For details, see here https://github.com/punkave/sanitize-html#readme.
- Type:
String - Required:
true
- Type:
Object
If you don't pass an options, the default options will be used.
Return sanitizeHtml.defaults.
Please see CHANGELOG for more information what has changed recently.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
The MIT License (MIT). Please see License File for more information.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent