Organizations around the globe are heavily dependent on web- and mobile-based applications regardless of the business domain in which they operate. Many businesses use JavaScript to remain competitive in this digital era, JavaScript has been the top client-side programming language in use, as per statistics in the W3 Tech survey.

JavaScript is known for its simple and smooth web development capabilities, especially for interactive yet complex solutions. And, React, a JavaScript library, is a popular option for building complex UIs that support great adaptability and simplicity.

React is recognized for its rendering performance and its ability to segregate complexities in UI to simple components. An entire library ecosystem has evolved around React itself. Some of the React component libraries include:

  • React-Bootstrap
  • Semantic-UI
  • Material-UI
  • React-Router

React is open source and backed by Meta (formerly Facebook). However, some of the security vulnerabilities that plague JavaScript can be found in React codebases as well. And, without proper security policies and tools in place, these vulnerabilities can pose serious problems.

In this blog, we’ll discuss React security, including common vulnerabilities like cross-site scripting (XSS), injection-based attacks, and rendering attacks — and best practices for securing your code against these threats.

MORE: Strategies for Designing Reproducible Builds

React Security: Common Vulnerabilities

React has evolved the web development ecosystem by being extremely easy to use, maintain, and scale. However, a stable codebase does not always equal a secure codebase

Unidentified assets (which can be either a component of a library or a third-party integration) may increase the chances of the existence of vulnerabilities. Additionally, each new update release and library may increase the chances of introducing new vulnerabilities that might not be immediately observed.

As such, it is necessary to know what are the common vulnerabilities that exist in React. These include:

  • Cross-site scripting (XSS)
  • Injection-based attacks
  • Rendering attacks: Server-side
  • Zip Slips

Cross-Site Scripting (XSS) in React

CWE-79: Cross-site scripting (XSS) is one of the web’s most common vulnerabilities and has been included in OWASP top 10 for several years. XSS happens when an attacker injects malicious client-side scripts to the web applications. These scripts will most likely be executed as legitimate code and the attacker could get full control over the application. There are several types of XSS attacks, such as DOM-based, Stored, and Reflective.

When using React packages such as graphql-playground-react, Semantic-UI and React-DOM, developers must be aware that they could be prone to XSS unless the code has been developed securely.

Best Practices for Preventing Cross-Site Scripting (XSS) in React

  • Understand how JSX and React createElement auto-escapes data before rendering it
  • Understand dangerouslySetInnerHTML, why it is named as such, and ultimately try to avoid it if you can. If you do need to use it, double-check that you are escaping anything you are passing to it.
  • Conduct data sanitization before rendering in DOM with the use of the “DOMPurify” library
  • Conduct validation testing with blacklists/whitelists

Server-Side Rendering Attacks in React

Server-side rendering is a key feature in React that helps developers improve performance. This is because the HTML isn't generated by JavaScript on the client-side; instead, it’s rendered in the back-end and passed to the front-end to accelerate the page loading process. It also helps with search engine optimization (SEO).

If you are using Redux for state management, ensure that you initialize the state from the server-side. This includes “Inject Initial Component HTML and State.”

Example: This JSON.stringify in the script will not check for dangerous inputs. So, one could inject malicious JavaScript code, which can change legitimate data.

   window.__STATE__ = ${JSON.stringify(
     { username: "AYX",
      Letter: "</script><script>alert('You are compromised!')</script>" })}
</script>```

Best Practices for Preventing Server-Side Rendering Attacks in React

  • Use a module that will avoid serialization, such as Serialize
  • JavaScriptConduct data sanitization before rendering in DOM with the use of the “DOMPurify” library

SQL Injections in React

SQL injection vulnerabilities are found in many web applications, and React is no different. Attackers can use SQL vulnerabilities to bypass user permission, which could eventually lead to database compromise. This is a serious concern because a database breach that includes personal information or sensitive data could cause major compliance issues as well as financial losses.

React applications may be prone to error-based, logic-based, or time-based injections, mostly due to not following principles of least privilege or a coding issue that has failed to filter user inputs.

Best Practices for Preventing SQL Injections in React

  • Apply principles of least privilege: Don’t have the same database roles in different accounts, and only provide access to the action that web or mobile needs to extract. (Example: Only allow UPDATE.) Also, don’t provide direct access from React applications to databases which have super privileges such as admin rights.
  • Filter user inputs via whitelisting mechanisms for internal and external queries
  • Validate API functionalities and API schemas to prevent time-based attacks
  • Employ continuous monitoring and application scanning, especially for third-party application integrations

Zip Slip in React

Developers tend to let users submit zip files to have a reduced file size. Zip Slip is a vulnerability exploited by directory traversal attacks that take advantage of the feature that lets users upload zip files.

If the archive for unzipping the file is insecure, then attackers could extract the files and possibly overwrite them. Eventually, they could upload malicious files and gain access to the client and server-side of the React application. Developers should make sure that these malicious files do not have any entry to the application and to adopt common hygiene approaches.

Best Practices for Preventing Zip Slip in React

  • Conduct dependency vulnerability scanning
  • Force checks to have standard names. For example, JansonAnton.doc instead of ../directors/salary.doc
  • Disallow special characters in filenames
  • Generate a new name for all uploaded files before processing or storing.

React Security: The Bottom Line

As businesses keep growing with the help of cutting-edge technologies, it’s vital that they keep security top of mind. React allows teams to build highly customizable UIs, and some component libraries can be susceptible to vulnerabilities. Organizations can minimize their exposure to React vulnerabilities by using secure coding practices such as data input validations, following principles of least privilege, and implementing clear segregation between components.

FOSSA's software composition analysis solution helps teams identify and remediate vulnerabilities like the ones impacting third-party React component libraries. For more information on bringing FOSSA to your organization, please click here and fill out the form. Our team will then be in touch with you shortly.

About the Author

Gaya Dissanayake has worked in cybersecurity and system engineering for the past decade. She's passionate about helping cloud security, vulnerability management, incident management, and compliance.