React.js security best practices


The React library is known as a powerful tool for creating dynamic and interactive user interfaces. This library is used by many well-known companies, like Facebook, BBC, Instagram, WhatsApp, Netflix. Statistics show that React.js is one of the most popular frameworks in Google Search, which means the popularity of this technology is still growing. It is trusted by top leading companies and platforms. By UppLabs as well. The new version, React 16.8 will offer new features like using React without actually writing a separate class.

  • Reusable components
  • Synchronization of application and interface status
  • Routing and templating systems


If the React.js is an important component of your tech stack, the risks and implications for your business in case of a security leak can be unavoidable. Building React applications for web platforms and SPAs (single page applications) connects your business with various kinds of information. It allows your business to become competitive in the market. The percentage of security flaws identified that appear in every two out of three applications usually show that sometimes developers ignore the importance of such issues and neglect the security practices.

  • Cross-Site Scripting
    This is a client vulnerability that can lead to serious problems. XSS attacks occur when an attacker is able to trick a website and force it to execute arbitrary JavaScript code in the browsers of its users.
    The reflected XSS attack can happen through the link containing text information, which is processed by the browser in the form of code. For example, this can be a form field that requires a special request on the client-side.
    A stored XSS attack happens when an attacker has access to the server, and when the code executed on the server can generate the information to the client’s web page. Typical vectors of such attacks are uploading comments and images to servers.
    The example can be a Samy worm that exploited the MySpace XSS vulnerability. It was one of the fastest spreading viruses of all time.
import React, {useState} from 'react';
import createDOMPurify from ‘dompurify’;
function App(){
const [text, setText] = useState(‘’);
function updateText(e){
return (
<input onChange={updateText} type="text" value={text} />
<div dangerouslySetInnerHTML={{__html: createDOMPurify(text)}}/>
export default App;
  • SQL Injection
    SQL injection vulnerabilities allow attackers to execute arbitrary SQL code in the database, allowing them to receive, modify, or delete data regardless of user permissions. A successful injection attack can fake credentials, create new credentials with administrator privileges, gain access to all data on the server, or destroy/modify data to render it unusable. Types of SQL injection include error-based SQL injection, logical-error-based SQL injection, and time-based SQL injection.
  • Insecure randomness and links
    For web developers, this means that if the content of links is based on data entered by the user, an attacker can add malicious code starting with JavaScript. If the user clicks on this link, an attacker script will be launched in the browser. This happens not only to React projects and the solution depends on the application. In addition, you may need to make corrections on the server. It’s recommended to make the links use the whitelisted protocol (for example, http:) and screen the HTML entities. Links are not the only entities that can be used in this way. But they are the most likely attack target in React applications. Any element can be vulnerable to this attack if an attacker can control its URI (Uniform Resource Identifier) value.
  • Server-Side Rendering Attacker-Controlled Initial State
    This vulnerability can occur if you are server-side rendering an app. Any version of it can be dangerous for any part of the page. When a developer creates an initial state of the page, it can happen that he can generate a document variable from a JSON string. This vulnerability can look like:
<script>window.__STATE__ = ${JSON.stringify({ data })}</script>
  • Arbitrary Code Execution
    The arbitrary code execution (ACE) usually refers to an attacker’s ability to execute arbitrary commands or code on a target process. Arbitrary code execution vulnerability is a security flaw in the software or hardware that allows arbitrary code execution. A program that is designed to exploit such a vulnerability is called arbitrary code execution exploit. This vulnerability is dangerous because if it appears in some public product (for example, Windows OS), then all users of this product will be exposed to it (WannaCry ransomware attack was spread because of this kind of vulnerability).
  • Zip Slip — Arbitrary File write via Archive
    The root of the Zip Slip problem is overwriting arbitrary files used in conjunction with a directory traversal attack, which can be implemented while extracting files from the archives. It is possible to exploit Zip Slip through a special archive that contains the file names necessary to implement directory traversal. If such an archive is unpacked using any vulnerable library, the attacker will eventually be able to unzip the malicious files outside the designated directory. In this case, the attacker gets the opportunity to overwrite even an important system or executable files, configuration files, and so on. Ultimately, this will lead to the remote execution of arbitrary code.


By knowing the most common vulnerabilities of React it’s easier to find a solution and defense against the known enemy. For effective application security, you need to pay special attention to the development of the entire website: to your web application, web server configuration, creating and updating passwords, as well as client-side code. Taking into account the React pitfalls mentioned above and the React security resources, we’ll share with you some of themost common and simple stepsyou can take to protect your React.js application.

  • As a defense against XSS vulnerabilities, remove or disable any markup that could potentially contain instructions for running the code. For HTML, this includes elements such as <script>, <object>, <embed>, and <link>.
  • Protect React.js source code with Jscrambler.
  • Use secure React Native applications. As React Native is the framework of choice for cross-platform mobile development, developers need to explore options to secure React Native applications.
  • Implement Idle Timeout in React.
  • Use snippet libraries like ES7 React, Redux, JS Snippets, etc. They’ll bring additional security and keep your code bug free.
  • Install a visitor identification to block malicious traffic from getting to the internal program codes.
  • Exploit script injection flaws in React.js apps.
  • As a defense from insecure links, use the mechanism for opening custom links in new browser tabs.
  • The code should behave as expected and should be testable easily. It’s recommended to name your test files as the source files with a .test suffix.
  • To escape the rendered JSON, use the serialize-javascript NPM module.
  • Scrub the entire React application during and after the development process to seize all the multi-type DDoS attacks.
  • Test the functionality of every component using a React app, and tests your complete application once it renders in the browser.

These general React practices will help you to keep your code better organized:

  1. To organize all your React components, use tools like Bit. It helps code to become discoverable.
  2. Consolidate duplicate code — DRY (Don’t Repeat Yourself) your code. A common rule for all code is to keep it as brief and precise as possible.
  3. Attach comments to code only where necessary to avoid a potential conflict between comment and code.
  4. Mind the naming conventions like SubmitForm submitForm, submit_form, or submit_form. When working with React, you are using JavaScript Extension files and the components that you create for React should, therefore, be named in Pascal case or upper camel case. This translates to names without spaces and capitalizing the first letter. If you want to create a function that submits a form, you should name it in upper camel case or Pascal case.
  5. Keep the creation of new components to the minimum and create a Button component that can handle icons.
  6. Keep all files relating to any one component in a single folder. This will allow you to easily extract code to any other project or modify the code whenever you want.
  7. Name a component after the executed function so that it’s easily recognizable.
  8. Keep components small and function-specific. This makes testing and maintenance easier.
  9. Separate stateful aspects from rendering as it will lead to the reduction of components complexity.



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



Developing secure and compliant software for Fintech, Healthcare and Real Estate. For tech businesses eager to be #1 in their niche.