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…