How To Prevent DOM XSS Attacks on Your Vue Application

Security is crucial in application development, but the attention is usually not lengthy. It is necessary to protect your application to prevent your users’ data from getting into the hands of cybercriminals and build their trust in your product or application. In this article, we will learn what an XSS attack is, how it can destroy our application, and how we can prevent DOM XSS attacks in our application.

Cross-site Scripting Attacks (XSS)

Cross-site scripting (known as XSS) is a security vulnerability commonly found in web applications. It occurs when a malicious script is injected directly into a vulnerable web application. XSS allows attackers to execute scripts in the victim’s browser, hijack user sessions, destroy websites, or redirect the users to malicious websites. These attacks enable attackers to insert client-side scripts into web pages viewed by other users.

There are three types of XSS attacks:

• Reflected XSS 
• Stored XSS
• Dom-Based XSS

I will give a little definition of each of these attacks.

Reflected XSS: Reflected XSS attacks, also known as non-persistent attacks, are a form of XSS where the cross-site component occurs temporarily due to user input reflected into the DOM.

Stored XSS: stored XSS is a form of cross-site scripting script execution in which the payload (typically Javascript) is persisted, typically in a database, by the application itself by nature of being rendered via application logic from the server’s database.

Dom-Based XSS: This is an XSS attack that arises when an application contains some client-side JavaScript that processes data from an untrusted source in an unsafe way. It is usually caused by writing data to a potential sink within the Dom.

One thing that can lead to this attack in Vue JS is the v-html directive. We use the v-html directive to output raw components into our application. Let’s see a basic example of what v-html does and how we can create an XSS attack with it.

<template>
  <section id="app">
    <h1>Welcome to Your Vue.js App</h1>
    <div>
      <p v-html="dummy text" class="dummy-text"></p>
      <p v-html="test" class="dummy-text"></p>
    </div>
  </section>
</template>

<script>
  export default {
    name: "Xsspage",
    data() {
      return {
        dummytext: "This is an XSS example ",
      };
    },
  };
</script>

This basic code example explains how we can use v-html in our application. Let’s look at the second example, where we will create an XSS attack. 

Creating an XSS Attack

The following code example can cause an XSS attack in our Vue application:

<template>
  <section id="app">
    <h1>Welcome to Your Vue.js App</h1>
    <div>
      <p v-html="dummytext" class="dummy-text"></p>
      <p v-html="test" class="dummy-text"></p>
    </div>
  </section>
</template>

<script>

  export default {
    name: "Xsspage",
    data() {
      return {
        dummytext: "This is an xss example ",
        test: `<img src=x onerror=alert(1)>`,
      };
    },
  };

</script>

Output

The above example shows he created an HTML tag that contains Javascript. In this example, the onerror event handler fired an alert because src = x doesn’t exist. One of the ways v-html can cause an XSS attack is that it gives the attacker access to create its HTML containing script tag when you open the message. That script will be executed, which can cause cross-site scripting in your application.

How To Prevent DOM XSS Attack on Your Vue Application

When working with HTML in our element, we need sanitization. We need to allow only the part of the HTML and the part that contains Javascript to be filtered out.

v-html doesn’t have any filtering or sanitization. How do we solve this problem? Don’t let this freak you out; there is a solution. One of the libraries we can use for sanitization is DomPurify.

DOM Purify

DomPurfiy is a library we can use to sanitize HTML, MathML, and SVG. It’s an XSS sanitizer. You can check out the package on Npm’s official website. Let’s see a code example of how to prevent this attack:

<template>
  <section id="app">
    <h1>Welcome to Your Vue.js App</h1>
    <div>
      <p v-html="dummytext" class="dummy-text"></p>
      <p v-html="purify(test)"></p>
    </div>
  </section>
</template>

<script>
  import DOMPurify from "dompurify";
  export default {
    name: "XssPage",
    data() {
      return {
        dummytext: "This is an xss example ",
        test: `<img src=x onerror=alert(5)>`,
      };
    },
    methods: {
      purify(text) {
        return DOMPurify.sanitize(text);
      },
    },
  };
</script>

Output

You can see the text and the image output, but you can’t see the alert box anymore. This implies that DomPurify has filtered out the dangerous part that contains Javascript that causes cross-site scripting.

Note: Don’t pass a string to a function when using a DOM property.

You can check out the demo and the GitHub link. 

Security Measures:

• Never insert untrusted data into your application.
• Try to use stringified interpolated expressions that the browser cannot output.
• Always ensure that the data coming from your code is sanitized and purified with Dom Purifier. 
• Ensure the data passed through prop is rendered correctly, whether v-HTML or document.write. 
• Always use what the framework suggests, except v-HTML. 
• Do not render templates server-side; keep them static.

Conclusion

There are a lot of cybercriminals searching for websites with little to no security to attack and use for their phishing purposes, so it is essential to secure your application before putting it online. In this article, we have learned what XSS attack is, their types, how to create one, and how we can prevent them. Hopefully, this article will help you secure your application from a DOM XSS attack.