Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
vue-html-secure
Advanced tools
Readme
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 <img src='' onerror=alert('XSS!')>
or <a href="javascript:alert('XSS!')"></a>
.
To install with npm or yarn, use
npm install --save vue-html-secure
// or
yarn add vue-html-secure
This leaves all HTML tags except for <script> and removes insecure elements's attributes starting "on*" and also values starting "javascript:*".
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 <b>secure part</b> and user-provided insecure part: ' + this.$escapeHTML(...)
.
This removes all HTML tags but preserves it's text content.
////////// 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 <img src='' onerror=alert('XSS!')> VUE",
}
},
});
////////// JS for Vue 3.x \\\\\\\\\\
import * as Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';
const App = Vue.createApp({
data() {
return {
message : "Hello <img src='' onerror=alert('XSS!')> 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
<div v-html-safe="message"></div>>
<div v-html-escape="message"></div>
<div v-html-remove="message"></div>
Example 02
<div>{{ $safeHTML(message) }}</div>
<div>{{ $escapeHTML(message) }}</div>
<div>{{ $removeHTML(message) }}</div>
Example 03
new Vue({ // or Vue.createApp({
data() {
return {
message : 'My <b>secure part</b> and user-provided insecure part: ' +
this.$escapeHTML("<h1>Foo</h1>"),
}
},
});
<!-- note official v-html here -->
<div v-html="message"></div>
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.
FAQs
Vue.js 2.x and 3.x plugin to add HTML secure directives v-html-remove, v-html-escape, v-html-safe
The npm package vue-html-secure receives a total of 3,073 weekly downloads. As such, vue-html-secure popularity was classified as popular.
We found that vue-html-secure demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.