vue-html-secure 

Vue.js plugin to add HTML secure directives v-html-remove, v-html-escape, v-html-safe which are secure alternatives to official v-html. Using official v-html can easily lead to XSS attacks and must be used on trusted content only and never on user-provided content. Most popular JavaScript libraries to sanitize HTML string are too huge (from several hundred KB to several MB) with lot of dependencies. This plugin is lightweight (only 2kB packed size) without dependency. The main feature is to secure HTML string to avoid XSS attacks such as or .

Install

To install with npm or yarn, use

``shell
npm install --save vue-html-secure

// or

yarn add vue-html-secure
`

Directives and functions

$3

This leaves all HTML tags except for <script> and removes insecure elements's attributes starting "on" and also values starting "javascript:".

$3

This replaces chars <, >, $ to appropriate HTML entities <, >, &. This does not escape single or double quotes for string usage in HTML attribute (it is not aim of this plugin to do that).
Note that in case v-html-escape you can directly use official v-text, but using function can have sense e.g. message : 'My secure part and user-provided insecure part: ' + this.$escapeHTML(...).

$3

This removes all HTML tags but preserves it's text content.

Usage

`js
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use(VueSecureHTML);

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue({
el: '#app',
data() {
return {
message : "Hello VUE",
}
},
});
`

`js
////////// JS for Vue 3.x \\\\\\\\\\

import * as Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

const App = Vue.createApp({
data() {
return {
message : "Hello VUE",
}
},
});

// Optional
App.config.globalProperties.$safeHTML = VueSecureHTML.safeHTML;
App.config.globalProperties.$escapeHTML = VueSecureHTML.escapeHTML;
App.config.globalProperties.$removeHTML = VueSecureHTML.removeHTML;

App.use(VueSecureHTML);
App.mount('#app');
`

Example 01

`html


`html


`js
new Vue({ // or Vue.createApp({
data() {
return {
message : 'My secure part and user-provided insecure part: ' +
this.$escapeHTML("

Foo

`html



> Note 1: This is for Vue.js 2.x and Vue.js 3.x.

> Note 2: In future releases will be added whitelist and blacklist of HTML tags.