Cross-Site Scripting (XSS) Attack in React

XSS attacks can happen when an attacker injects malicious scripts by exploiting a vulnerability in an application. One common type of XSS attack is a DOM-based XSS attack. When an application mutates the DOM directly, it becomes easy for an attacker to inject data containing malicious JavaScript.

To prevent XSS attacks, it’s important to validate all data that enters your application from a server or third-party API. Avoid direct DOM manipulation and use innerText instead of innerHTML to render content. When using dangerouslySetInnerHTML, sanitize data before rendering it on the DOM.

An instance of such vulnerability arises when an application modifies the DOM directly, using the append() method on a div. This makes it possible for an attacker to inject malicious scripts that can steal confidential and sensitive information from the user. Similarly, using innerHTML to mutate the DOM directly can also expose the application to potential XSS attacks.

JSX Prevents Injection Attacks

JSX prevents injection attacks by escaping any values embedded in JSX before rendering them on the DOM. This means that any user input or other data that may contain HTML elements or attributes will be converted to a string and rendered as plain text, not as HTML.

For example, if you have a user input like this:

const title = "<script>alert('Hello')</script>";

And you render it using JSX like this:

const element = <h1>{title}</h1>;

The output will be something like this:

<h1>&lt;script&gt;alert('Hello')&lt;/script&gt;</h1>

Notice how the <script> tags are escaped with < and > entities, so they are not interpreted as HTML by the browser. Instead, they are displayed as plain text inside the <h1> element.

React allows you to do that using a prop called dangerouslySetInnerHTML. You can pass this prop to any generic container element. It takes in an object with a key _html whose value is the HTML markup you wish to render inside the container.

function MyComponent({ html }) {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: html,
      }}
    />
  );
}

We again have an XSS vulnerability in our application, and the attacker could inject some malicious scripts.

Sanitize Data in React

To protect your application from a DOM-based XSS attack, you must sanitize data that contains HTML elements before rendering it on the DOM. There are several libraries out there that you can use. One such library is DOMPurify. Let’s see how we can use it in our React application.

To use it, import DOMPurify from the library at the top as shown:

import purify from "dompurify";

function MyComponent({ html }) {
const sanitizedHtml=purify.sanitize(html)
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: sanitizedHtml
      }}
    />
  );
}

Everything should still work the same, but your sanitizedHtml is now protected against any malicious XSS injections.

Escape Hatches in React Can Cause an XSS Attack

While React and JSX provide protections against XSS attacks, there are some escape hatches that, if used improperly, can still leave an application vulnerable to attacks. Here are some examples of how escape hatches in React can be misused and lead to XSS vulnerabilities:

import React, { useEffect, createRef } from 'react';

function App() {
  const divRef = createRef();
  const data = 'Hello, world!';

  useEffect(() => {
    divRef.current.innerHTML = 'This is some new content.';
  }, []);

  return (
    <div className="App">
      <div className="container" ref={divRef}>
        {data}
      </div>
    </div>
  );
}

export default App;

By using the innerHTML property on the divRef reference to modify the content inside a <div> element when the component’s DOM loads, an attacker can inject malicious scripts inside the useEffect hook.

To avoid this issue, it’s best not to use innerHTML to manipulate the DOM directly. Instead, use innerText if you are adding content to HTML elements using refs. This approach is safer and helps to prevent XSS attacks.

useEffect(()=>{
divRef.current.innerText="This is some new content."
},[])

How you can prevent XSS in your application:

1. Validate all data that enters your application from the server or third-party APIs to reduce the risk of attacks.
2. Avoid manipulating the DOM directly, and use innerText instead of innerHTML to render content.
3. Use JSX to render data and let React handle security concerns.
4. Be cautious when using dangerouslySetInnerHTML, and ensure that all data is sanitized before rendering it on the DOM.
5. Use reputable libraries for data sanitization, and avoid creating your own techniques unless you have expertise in this area.

Conclusion:

🚨 Beware of Cross-Site Scripting (XSS) Attacks!

👉 XSS is a type of security vulnerability where attackers inject malicious code into web pages viewed by other users.

💻 This can result in data theft or other harmful attacks.

🛡️ Protect yourself by using best practices such as avoiding innerHTML and using textContent instead, properly setting HTTP response headers, and regularly reviewing security measures. Stay safe!