The Most Common XSS Vulnerability in React.js Applications

People are often drawn towards using React.js thanks to the benefits of isomorphic (or universal) rendering. That is, the ability to render your single page application on the server-side, send the html to the client and have the client become interactive without having to re-rendering the entire page.

Libraries like Redux even have documentation as to just how to provide this functionality. In their documentation they featured the following code snippet:

XSS Vulnerable example snippet from the Redux documentation on how to share state from the server with the client.

Now, you may look at that snippet and be unsure as to why there is a security issue.

Don’t worry, you’re not alone.

I recently had a conversation with Jimmy Jia in which I realised that I had accidentally exposed an application that I had worked on to an XSS Vulnerability — despite being a highly experienced software engineer with some security training.

What’s the issue, Em?

The issue with that code snippet is in how we pass the Store state into the application. In the above screenshot, we just do a JSON.stringify call, and assign it to a global variable in a script tag. This is the vulnerability.

When a web browser parses the html of the page, and it encounters that <script> tag, they will continue reading until they see </script> — which means if your redux store has a value like the following in it, then when you load the client, you’ll receive an alert “You have an XSS vulnerability!”.

{
  user: {
    username: "NodeSecurity",
    bio: "as</script><script>alert('You have an XSS vulnerability!')</script>"
  }
}

The browser won’t actually read until the last curly bracket, instead, it will actually finish the script tag after bio: "as

How can you prevent this XSS vulnerability?

The Open Web Application Security Project luckily has a great selection of resources about XSS prevention. To prevent this vulnerability we need a few safety measures in place in our applications:

1. All user input should have HTML entities escaped. When you’re using React, it does prevent most XSS vulnerabilities, due to how it creates DOM Nodes and textual content.