Team we45
April 25, 2018

XSS in Bootstrap-Vue - A Case Instance

We recently came across the Cross-Site Scripting(XSS) vulnerability in the Bootstrap-Vue framework. For those of you all who aren’t very perturbed by that statement, Bootstrap is one of the most popular frontend JavaScript frameworks used to implement interactive and responsive views in an application...AND is the second most starred project on Github. VueJS’ recent gain in popularity, despite other popular frontend Javascript frameworks such as AngularJS, ReactJS, is due to the following (non-exhaustive) advantages:

  1. It is extremely lightweight and easy to use
  2. Easy for developers to understand and work with
  3. Simple to integrate with other interfaces
  4. Well supported libraries
  5. Usage of a Virtual DOM
  6. And…. comes with detailed documentation (pretty much takes the cake away right?)

Let me take you through how we stumbled upon this ‘modest’ flaw!A couple of weeks ago, we were to create an application that was vulnerable to XSS attacks as an educational proof of concept for our internal DevSecOps Blue / Red teaming activity. We decided to go with VueJs as the front-end framework for two main reasons: One..it has a UI library for building interactive web interfaces, which was essential to our application, and Two,,it provides benefits of Reactive Data Binding.

[READ : The Most Secure Application Development Language]

In order to create this application so that we can successfully conduct an XSS attack, we invalidated the user data to intermingle with a VueJS component using a v-html directive. Rendering raw HTML code with DOM makes this application vulnerable. We used Bootstrap table component to render the data in UI. Following a few tests, we were successfully able to launch an XSS on the vulnerable app.To draw a comparison between a vulnerable application and a secure application, we created another application was supposed to be secure. We used the same framework and library for developing this secure application. By default, the library uses the ‘double mustache’ syntax, which performs data binding with the DOM. This should ideally make the application immune to XSS. However, after few tests, we discovered that the vulnerability still existed in the secure application.So, our first thought was that we might have made an error in our code. But, after a through code review, it turns out that the coding was done correctly, and everything seemed to be fine from that perspective. Now, we obviously can’t let this go, and took a bit of deductive reasoning to find out where the flaw was coming from. Since the application had two major components to it; VueJS and Bootstrap-Vue library, we had to narrow our focus to one of these components. We therefore built a new application with just VueJS, without using the Bootstrap-Vue library. Following another XSS vulnerability test, the application turned out to be immune to XSS.Turns out that the issue was with the Bootstrap-Vue table component that we used. When we dug deeper, we found that the table component in Bootstrap-Vue library was using VueJS Slots. Slots is a feature that adds an edge to VueJS and can contain any code. This made the application inherently vulnerable to XSS. The Bootstrap-Vue library up to version 1.5.0 uses the Slots feature, and hence are highly likely vulnerable to XSS. The later versions, starting with 2.0.0-rc.0, is not vulnerable to this XSS as it seems to be fixed.As a side note, if you want to experiment and explore vulnerabilities with Bootstrap-Vue, you can use the custom vulnerable application that we built. It is available on our github.