The Most Common XSS Vulnerability in React.js Applications

Emelia Smith
Nov 28, 2016 · 3 min read

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:

Image for post
Image for post
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?

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?

  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.
  2. When serializing state on the server to be sent to the client, you need to serialize in a way that escapes HTML entities. This is because you’re often no longer using React to create this string, hence not having the string automatically escaped.

Engineers over at Yahoo have luckily made the latter of these safety practices very easy to implement through their Serialize JavaScript module. Which you can easily drop into any application.

First install the module with: npm install --save serialize-javascript

Then we can change the snippet from earlier to look like the following; In particular notice the change where we use serialize instead of JSON.stringify when assigning the value to __PRELOADED_STATE__

Image for post
Image for post
The patched snippet, which removes the XSS vulnerability by using Yahoo’s Serialize JavaScript module.

As for receiving the data on the client-side, it works just the same as before, excepting that you now just have any HTML Entities in the string escaped (they’ll look like: \\u003C\\u002Fscript\\u003E rather than as </script>)

Remember: Just because you’re building an application with the latest technology on the market, or technology that is used by Facebook, you still have to take care of all the standard security practices you would, if you were writing an application with a Rails, Django, PHP, or older stack.

This article has been translated into Traditional Chinese by Wendell Liu.

This post was produced with the help of a conversation with Jimmy Jia who first revealed this vulnerability to me — I had originally thought the browser worked differently and was aware of content in script tags).

Node Security

Node Security is now at npm, Inc.

Thanks to Jimmy Jia

Emelia Smith

Written by

I’m the founder of Unobvious Technology, a transgender woman, data engineer, kinkster and human.

Node Security

Node Security is now at npm, Inc. helping to build a range of security products.

Emelia Smith

Written by

I’m the founder of Unobvious Technology, a transgender woman, data engineer, kinkster and human.

Node Security

Node Security is now at npm, Inc. helping to build a range of security products.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store