Developing web applications with Vue.js is a great thing. But precisely because Vue.js is so flexible, it can quickly become a security trap. All it takes is a little carelessness and suddenly cross-site scripting (XSS), insecure third-party dependencies or spoofing attacks creep in. And that’s just the tip of the iceberg.
In this article, you will not only get the standard recommendations, but also concrete best practices and directly applicable code examples. So let’s dive in and make Vue.js bombproof! Find out more about Vue.js Security now!
1. Avoid XSS (Cross-Site Scripting) - Rule 1 in Vue.js Security
Vue.js inherently tries to prevent XSS by escaping interpolated values. But there are enough places where XSS can still slip through:
1.1. Never use v-html without sanitisation
<template>
<div v-html="userInput"></div>
</template>v-html is a dangerous directive because it renders raw HTML code into the page. If uncontrolled user input is inserted here, attackers can inject malicious scripts.
import sanitizeHtml from 'sanitize-html';
export default {
data() {
return {
safeContent: sanitizeHtml('<script>alert("XSS")</script>') // Script wird entfernt
};
}
};Solution: Use a library such as sanitize-html to clean up HTML content.
<template>
<div v-html="sanitizedHtml"></div>
</template>
<script>
import sanitizeHtml from 'sanitize-html';
export default {
props: ['userInput'],
computed: {
sanitizedHtml() {
return sanitizeHtml(this.userInput);
}
}
};
</script>1.2 Use computed properties instead of complex logic in templates
Avoid writing complex formatting directly in {{ }} expressions or within v-bind. Use computed properties instead.
export default {
data() {
return { input: '<b>Hello</b>' };
},
computed: {
sanitizedInput() {
return sanitizeHtml(this.input);
}
}
};1.3 Pay attention to dynamic attributes
Even if you use v-bind, it can be dangerous:
<img v-bind:src="userInput">An attacker can insert javascript:alert(‘XSS’) here. Therefore, always use a secure whitelist or sanitize-html.
2. Secure use of third-party libraries for more VueJS security
Third-party packages can be a gateway. Malicious updates or hacked maintainer accounts are real threats. This is an important point not only for Vue.js Security, but for all software. Here we are specifically talking about JavaScript-based frameworks that use libraries from npm.
2.1. Avoid unsafe dependencies
- Check before installation:
npm auditornpm audit fix - Install specific versions:
npm install library@1.2.3 - Check security vulnerabilities: snyk.io
- Lock dependencies:
npm shrinkwrap
2.2. Do not use eval() or new Function()
Some libraries use these functions to execute code from strings – a perfect gateway for attackers.
2.3. Check new packages before installation
Before you install a library, check its origin and security:
- GitHub Issues: Are there any current security warnings?
- npm Trends: How popular is the package?
- npm Audit Report: Does it contain known vulnerabilities?
3. Avoid style, URL and HTML injection
Not only scripts are dangerous – manipulated styles or URLs can also lead to security problems.
3.1. Prevent style injection
Avoid direct inline styles with v-bind:style if the values come from user input.
Bad:
<div :style="{ color: userInput }">Text</div>Better:
computed: {
safeStyle() {
return ['red', 'blue', 'green'].includes(this.userInput) ? this.userInput : 'black';
}
}3.2. Prevent URL injection
Never bind user URLs directly in src or href.
Bad:
<a :href="userInput">Click me</a>Better:
computed: {
safeUrl() {
return this.userInput.startsWith('https://') ? this.userInput : 'https://example.com';
}
}3.3. Prevent URL injection with router-link
A classic example:
<router-link :to="userInput">Go to page</router-link>An attacker can insert a manipulated URL here. Secure the Vue router instead:
<router-link :to="sanitizeUrl(userInput)">Go to page</router-link>
4. Save your .env files
Never store API keys and other secrets directly in the code.
Bad:
const apiKey = '12345-ABCDE';Better: Use an .env file and load values with import.meta.env (Vue 3 Vite):
VITE_API_KEY=12345-ABCDE
const apiKey = import.meta.env.VITE_API_KEY;
5. Prevent spoofing and insecure authentication
An attacker can try to impersonate another user. This is particularly dangerous with JWT tokens or cookies.
5.1 Always authorise on the server side
A client can be manipulated. Never check authorisations only in the front end!
5.2 Activate CSRF protection
If you use cookies, set SameSite=strict and HttpOnly.
Set-Cookie: session=abcdef; Secure; HttpOnly; SameSite=Strict
6. Secure logging & generic error messages
6.1. Do not neglect logging
Save suspicious actions:
console.warn('Suspicious input recognised:', input);Better: Send logging to the server (e.g. with LogRocket or Sentry).
6.2. Do not output detailed error messages
If a server error occurs, you should not output detailed stack traces or sensitive information. Instead, use generic messages.
catch(error) {
console.error(error); // Bad
}Instead:
catch(error) {
console.error('An error has occurred.');
}
7. Input validation: the last line of defence
7.1. Validate client AND server side
Vue form validation with Yup:
import * as yup from 'yup';
const schema = yup.object({
email: yup.string().email().required(),
password: yup.string().min(8).required()
});7.2. Do not leave native HTML validations
required and minlength are good, but attackers can easily bypass them. ALWAYS validate on the server side!
Conclusion
✅ No v-html without sanitisation
✅ No direct DOM manipulations
✅ Check security vulnerabilities in npm packages
✅ Always check authentication on the server side
✅ Activate CSRF protection
✅ Avoid XSS through secure bindings
✅ Actively use error logging
✅ Validations on client AND server side
Cybersecurity in Vue.js is not a one-off to-do, but a continuous process. Even small errors can have serious consequences – from XSS attacks to compromised user data. The good news: you don’t have to do it alone!
If you need support, you can find security experts on our marketplace who can help you in any situation – whether it’s securing your Vue.js app, checking dependencies or implementing robust protective measures. Don’t leave any security gaps open! Find the right expert now and make your application more secure. 🚀
