XSS in React - Everything You Need to Know

As a front-end developer, who develops React applications, it's important to know how to prevent cross-site scripting (XSS) attacks. XSS attacks can inject malicious code into your application, which can be used to steal users' data or damage your application.

Needless to say, cross-site scripting (XSS) is a big security risk. If you want to develop React application that is secure. You need to know what kind of XSS attacks your application will be facing, and how to prevent them.

And that's exactly what we're gonna learn in this article. We'll talk about the overview of cross-site scripting. How to handle it. And lastly, we'll see how React prevents XSS attacks.

There is a lot of useful information we have to go through. So without any further ado, let's get started.

What Is Cross-Site Scripting

Cross-site scripting (XSS) is a type of security vulnerability that can occur in web applications. XSS allows an attacker to inject malicious code into a web page, which can then be executed by unsuspecting users who visit the page.

Cross-site scripting XSS is a security exploit that allows an attacker to inject into a website malicious client-side code. This code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the seventh most common Web app vulnerability in 2017. (source: MDN)

There are 3 types of XSS attacks:

• Database XSS attack
• Server XSS attack
• DOM XSS attack

In this article, we'll focus on the DOM XSS attack.

A DOM-based XSS attack is possible to execute when the website contains client-side JavaScript code. This code can process data from an untrusted source in an unsafe way. A good example of this scenario is displaying the value on the client-side based on user input.

Possible XSS attack on the client-side

// Get value from the search input
const searchValue = document.getElementById('search').value;

// Get element to display a message about the search
const message = document.getElementById('message');

// searchValue can contain malicious javascript code, and will be executed
message.innerHTML = 'You searched for: ' + searchValue;

As we can see, an XSS attack is also possible on the client-side, and it doesn't always require access to the server, or database. But to answer the million-dollar question, is this kind of attack possible in React app?

How Secure Is React

React is a JavaScript library for building user interfaces, and as such, it has some built-in security measures to help prevent XSS attacks. For example, if we'd rewrite the same code logic from above into React, our site would be entirely secure.

React preventing the XSS attack

import { useState } from "react";

const App = () => {
  const [search, setSearch] = useState("");

  const handleInputChange = (event) => setSearch(event.target.value);

  return (
    <div className="App">
      <input onChange={handleInputChange} value={search} />
      <button>Search</button>
      <p>{`You searched for: ${search}`}</p>
    </div>
  );
};

export default App;

At first, it's not obvious how React is preventing the XSS attack. But as it is with the Italian cuisine, the devil is in the details.

By default, React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS attacks (source: React)

Under the hood, React automatically escapes any user input before rendering it. This means that user input will never be executed, making React secure in the terms of XSS. Additionally, React provides a set of measures that you can use to prevent XSS attacks from happening.

How to Prevent XSS Attack in React

As we already mentioned, React is taking precautions to prevent XSS attacks in our application. But there may be scenarios when we'll try to simply ignore them. A good example of this is using innerHtml to render data inside React. Another good example is the usage of dangerouslySetInnerHTML.

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to expose your users to an XSS attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous. (source: React)

If you're using one of the methods mentioned above, it's necessary to take extra measures.

There are ways to additionally prevent XSS attacks in React:

• Use a templating language that escapes automatically, such as renderToStaticMarkup
• Use a library that sanitizes HTML, such as DOMPurify
• Manually escape any user input before it is placed into the DOM

Concluding Thoughts

It's important to be aware of the dangers of cross-site scripting (XSS) attacks. They can be used to inject malicious code into a website, which can then be executed by unsuspecting users.

If we're using React to build our websites, we got an edge because React provides a number of ways to prevent XSS attacks. In this article, we took a closer look at these measures. In addition, we discussed how an XSS attack can happen, and how it's possible to prevent it with React.

Now, all that's left to do is take all these safety measures and use them in your React application.