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.
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!”.
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
How can you prevent this XSS vulnerability?
- 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.