The "Big Four" to escort your Vue application

The world is dealing with the issue of digital transformation, and the rapid development has also brought some pressure to the infrastructure. At the same time, many hackers are constantly updating and upgrading their attack techniques.

If our app has too many bugs and gets caught and exploited, it will turn into a big Barbie Q scene.

That's why so many teams are now turning security to the left, even migrating technology from DevOps to DevSecOps.

Therefore, many developers have certain concerns about program security, and even take some time to focus on security issues, but in fact we do not need to sacrifice rapid version changes in order to ensure absolute security.

This article will introduce you to four convenient ways that can help us to protect our Vue application easily and quickly. These methods are simple and easy to use and will not affect our normal work process.

Vue framework overview

Vue is a progressive framework for building web user interfaces, and it must be mentioned that it integrates perfectly with other frameworks such as React and Angular. Vue is more focused on the view layer than other frameworks, but the obvious advantage is that it can efficiently build Single Page Applications (SPA).

With Vue 3 now in the limelight, it can be written directly in TypeScript, and as the size of the application grows, we no longer need additional tools to prevent potential runtime errors.

4 Ways to Secure Your Vue Application

Below are some of the attacks we will introduce to you, which will give us an idea of how to secure an application running on Vue. These best practices will help you prevent attacks such as Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF), which can be low-key automated attacks or part of an advanced persistent threat used as the first step in an attack . broader attack activity.

1. Cross-site scripting (XSS)

Cross-site scripting (XSS) attack is a type of code injection, and the most common method of XSS attack is DOM-based attack. Attackers aim to inject malicious code into the DOM elements of our website, so that when a user lands on the page, malicious attack instructions, such as stealing user data, will take effect. To prevent this accidental occurrence, developers need to sanitize risky input in the following locations:

• HTML (bind inner HTML)
• Style (CSS)
• property (bind value)
• resource (file content)

However, it is best for developers to sanitize the data before it is displayed on the page to prevent security holes in the application from being attacked.

As developers, we can't force users to input anything, so we need to judge and clean the user's input content, and "handle" the problem content in time. The vue-sanitize library available on npm makes it easy to sanitize user input values on the server.

It cleans up problems in the code and prevents XSS attacks by using a string of HTML. It removes risky HTML, and at the same time we can whitelist the HTML content we need to keep, with custom settings.

import VueSanitize from "vue-sanitize";
Vue.use(VueSanitize);

Easily whitelist tags and options:

defaultOptions = {
    allowedTags: ['a', 'b'],
    allowedAttributes: {
        'a': ['href']
    }
}
Vue.use(VueSanitize, defaultOptions);

VueSanitize will then take the content of the data transmitted by the user and sanitize - keeping our whitelisted content to prevent code injection and XSS attacks.

2. The custom library does not match the new version

The custom Vue library is really a powerful tool in our development process, and we can customize the content settings according to our needs, but for some custom libraries that rely too much on the current version, the drawbacks of doing so are also obvious. Upgrade to a higher version , there is a chance that the application may fail, but if we do not choose to upgrade, we may miss some key security fixes and features of Vue.

The best way to modify and update the Vue library is to share our needs and content through the forum, which allows other developers to see our changes and consider adding them to the next Vue version.

We can also use NPM packages in our Vue application to stay up to date, which ensures that any security issues or updates that are resolved are updated along with it.

3. Risky Vue Libraries

One of the highlights of Vue is that it allows developers to manually render components without editing the browser's DOM; however, this does not mean that developers do not need to access DOM elements directly. To solve this problem, Vue provides users with some APIs , such as findDOMNode and ref.

Use ref to access DOM elements (see below):

<template>
    <div id="account">
        <user-component ref="user" />
    </div>
<template>

<script>
import UserComponent from "/components/UserComponent";

export default {
    name: "user-component",
    components: {
        UserComponent
    },
    mounted() {
        this.$refs.user.$refs.userName.focus();
    }
};
</script>

Using this method, we do not need to manipulate Dom elements through Vue, but directly refer to user components and APIs, and manipulate DOM elements directly through the application. This is convenient, but also makes the application vulnerable to XSS vulnerabilities. To prevent malicious agents from exploiting our application, here are several ways to protect our application.

• Output text content instead of HTML code directly
• Sanitize data with VueSanitize library
• API to generate Dom nodes

4. HTTP Layer Vulnerabilities

Cross-Site Request Forgery (CSRF):

CSRF exploits the user's trust in the website to send malicious commands without the user's authorization. For example, when we want to read some content on some website, the website may require us to log in the user.

In order to verify the authentication of the delete request, the website session is stored in the browser via a cookie. However, this leaves a CSRF vulnerability in the site. If you want to delete it, the user needs to send a delete request to the server using the cookie in the browser.

A common way to mitigate this threat is to have the server send a random authentication token contained in a cookie. The client reads the cookie and adds a custom request header with the same token on all subsequent requests. This will deny requests from attackers without an authentication token.

Cross-Site Scripting Inclusion (XSII)

XSSI allows attackers to read data website data using JSON API. It exploits a vulnerability on older browsers that includes native JavaScript object constructors.

It can use script tags to provide API URLs, which means that we will have other people's code in our program, we can't control the content of the code, and we can't tell whether the server hosting it is secure.

Solving this attack allows the server to render all JSON responses non-executable. For example, prefix the corresponding code with the string ")]}',\n", then remove it before parsing the data. This avoids XSII attacks because the script must have integrity to run.

Summarize

Security is a critical issue that should be addressed not only by security professionals, but also by developers. This article starts from several different attacks and introduces some methods to avoid and solve them.

No application is flawless, and there are inevitably many fixes, patches, and emergencies that need to be responded to during development, but adopting a secure coding mindset can help us reduce many unnecessary risks.

But beyond the framework itself, if we use framework-agnostic web components, we have a complete set of JavaScript UI components and a powerful Excel-like JavaScript spreadsheet component with deep support for Vue as well as Angular and React.

Here is some demo demo

In the future, I will share more interesting content with you~ If you feel good, give it a like.