XSS in Vue.js

Cross site scripting is a major problem across all the websites and must be prevented in order to make your website safe. Cross Site Scripting or XSS is when someone injects a malicious HTML/JS code which is executed by the browser and defaces your website. This can happen in ways which we cannot imagine and requires prevention from both Frontend and Backend. Let’s see some ways in which this happens.

When the data from the browser is sent to the server, at times people do put in some JavaScript code or some malicious code into the system. If the system does not parse these text data and Sanitize it out, the server stores it out and when the data loads onto the browser it defaces the site. There are injections which affect both the server side as well as the client side. In this particular article, we will see how can we prevent people from injecting these scripts into our sites through the text input.

Vue.js Vulnerability due to v-html directive

XSS in Vue.js can be easily achieved by injecting HTML code in places where the data sanitization is not in effect and moreover when the data render onto the screen the data must undergo sanitization otherwise it leads to defacing the site. Now let’s have a look at few samples that can cause the site to a potential problem if not sanitized properly.

We will be referring the last article of Vue.js where we deal with the directive v-html in order to render Raw HTML data onto a div. We will use fiddle to run some samples of malicious HTML code and then run it onto the JSFiddle.

  1. A simple example while we inject events into the Website can be as follows:-

    On entering this data on our editor that we build previously, we find that the DOM renders the data on the <div> , now just hovering above it the alert pops up as shown in the GIF below. Alternatively, you can copy paste the above code into the JSFiddle Editor to see the result below

    XSS, event injection using link

    XSS, event injection using link


  2. Alternatively, we can deal with images and make an injection using image tag as well. This can lead to injecting some browser based events using the image tag. This can be triggered on the load of the page. So let’s see the script.

    Due to this, you can see that the Page loads the image and on the Load completed this script is executed. You can have complex code that someone can inject into the system. Now let’s see it in Action below. Or you can copy paste the above code in the JSFiddle.

    XSS in Vue.js, caused due to onload in image tags

    XSS in Vue.js, caused due to onload in image tags


These are some of the ways in which you can inject scripts onto the page. The samples as well indicate how these work in a simple example where we have created a basic HTML Editor using Vue.js.

NOTE: If you have not set up your workspace yet you always can refer to these Tutorials to get started as well as Follow these links to any other that is relevant for you.

  1. An introduction to Vue Framework?
  2. Getting Started with Vue using Fiddle
  3. Learn Fast Handling User Inputs & form bindings using Vue
  4. Easily Bind Select and Multi-select using Vue
  5. Learn to make a ToDo List – Vue Component Creation
  6. Vue ToDo list with Delete Option & Global Event Bus – Part II
  7. How to Create Global Event Bus using Vue.js?
  8. Learn how to work with Computed Properties in VueJS
  9. How to Use Vue.js watchers for Async Updates?
  10. Make a Basic HTML Editor using Vuejs v-html directive
  11. Prevent XSS in Vue.js using Google Caja
  12. How does Event Handling work in Vue.js?
  13. How to Create Custome Filters in Vue.js?
  14. Custome Filters with NameSpace
  15. Class Binding in Vue.js
  16. Style Binding in Vue.js

Google Caja with Computed Properties for preventing XSS

XSS Can be easily prevented using Google Caja when used along side the Computed Properties. Computed properties along with Google Caja can work to get the HTML/JS/CSS sanitized. So in order to achieve this, we can go ahead and just modify our previous editor a bit. The new Vue.js Code will look as follows, you can also check the code implementation on JSFiddle with the latest Code with Caja in place.

NOTE: Google Caja is safety tool for the Sanitization of the input values from the Frontend. This is from Google and is pretty effective tool. It has various advance options that can help in order to implement a complicated Sanitation Rules for any input data.

With this code in place, you can see the sanitizeText is a computed value that directly is being calculated from the text value that is being entered by a user in the Textarea. So the HTML template will look like below

Just for just showing you guys how it behaves you can have a look at the GIF below which shows how the outputs are being extracted when Caja is being used. We have illustrated how the entire anchor tag looks like in the Chrome Debugger. As you inspect the computed value, you will understand that how Caja parsed the value in order to get the sanitized value.

Google Caja for Sanitization of XSS

Google Caja for Sanitization of XSS


XSS or Cross Site Scripting can be prevented easily by utilizing some framework that helps to sanitize the data that is being inputted by any user. This as well leads to protection of the website from either perspective, Frontend, and Backend as well. We can very well avoid XSS by using Google Caja and there are various advanced options with Google Caja which we can use to further protect the site.We will also like to hear from you guys regarding other measures that you guys might be taking in order to prevent the site from Cross Site Scripting while using Vue.js.

You can find all the other Vue.js Tutorials out here.

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This