13 ways to secure your react.js application

React is a free open-sourced front-end javascript library for building user interfaces. It can be used as a boilerplate for single-page web / mobile applications. React is so much efficient for injecting javascript codes inside an HTML page. It uses JSX syntax for that. This is very helpful for a beginner to develop a dynamic UI effortlessly.

Today, React become highly popular because of its extra simplicity and flexibility. It is estimated that more than 1,300K developers and over 10.2 million sites utilize React.js.

Nowadays, with more data being shared than ever, you must be aware of the risks associated with the technologies that you have used in your projects. Even though, React has a smaller number of attacks than other frameworks, a small point of failure may cause big issues in your app. React is rich in open-source components. However, the use of unlicensed, rarely used codes and untrusted sources make your app vulnerable to security slips.

Prevention is better than cure. Its better to take a precaution on the common errors or vulnerabilities. Because your application will be useless without proper security features.

Getting Started

Lets start with the most common security threats to your react application.

1. Cross-Site Scripting (XSS)

XSS is a serious client-side vulnerability where a hacker is able to add some malicious code to your program that is interpreted as valid and is executed as a part of the application.

2. SQL Injection

SQL injection is a code injection technique used to attack database contents by inserting the malicious SQL queries into the input fields. It allows the attacker to read/write the database contents and may tamper with data or even destroy the entire content.

3. XML External Entity Attack (XXE)

An XXE attack is a type of attack targeted with XML parsers. This may become occur while the external entity reference is processed with a weakly configured XML parser and may lead to the disclosure of confidential data.

4. Broken Authentication

Authentication is played a vital role in your application. Even though, we have two-factor authentication methods available to authenticate the user, the authentication bypass or inadequate/poor authorization leads to a security breach in your application. This may open the entire user information to the attacker and give a chance to manipulate the same.

5. Zip Slip

Zip Slip is an archive extraction vulnerability, allowing attackers to write arbitrary files on the system, resulting in remote command execution.

6. Arbitrary Code Execution

Arbitrary code execution is an attackers ability to run any code of the attackers choice on a target machine. An arbitrary code execution vulnerability is a security flaw where a program that is designed to exploit such a vulnerability is called an arbitrary code execution exploit will be run on the target machine using the remote code execution method.

13 React security best practices

1. XSS protection with data binding

Use data binding with curly braces {} and React will automatically escape values to protect against XSS attacks. However, this protection only helps when rendering textContent and non HTML attributes.
Use JSX data-binding syntax {} to place data in your elements.
Do this:

<div>{data}</div>

Dont do this:

<form action={data}> ...

2. Dangerous URLs

URLs may contain dynamic script content. So, always validate the URL to ensure the links are http: or https: to avoid javascript: URL-based script injection. Use the native URL parsing function to validate the URL and match the parsed protocol property to an allow list.
Do this:

function validateURL(url) {  const parsed = new URL(url)  return ['https:', 'http:'].includes(parsed.protocol)}<a href={validateURL(url) ? url : ''}>About</a>

Dont do this:

<a href={url}>About</a>

3. Rendering HTML

We can insert HTML directly into the DOM using dangerouslySetInnerHTML, these contents must be sanitized beforehand. Use a sanitization library like dompurify on these values before placing them into the dangerouslySetInnerHTML prop.
Try to use dompurify when injecting native HTML codes into the react DOM:

import purify from "dompurify";<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4. Direct DOM access

If you must inject HTML then use dangerouslySetInnerHTML and sanitize it using dompurify before injecting it into the component. The direct DOM access using refs, findDomNode() and innerHTML also makes our application vulnerable. So, try to avoid the use of these methods and make the user of dangerouslySetInnerHTML for these purposes.
Do this:

import purify from "dompurify";const App = ({data}: Props) => { <div dangerouslySetInnerHTML={data} />}<App data={__html:purify.sanitize(data)} />

Dont do this:

this.myRef.current.innerHTML = "<div>Hacked</div>";

5. Server-side rendering

Use server-side rendering functions like ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup() to provide content escaping while sending the data to the client.
It is not safe to combine unsanitized data with the renderToStaticMarkup() output before sending it for hydration. Avoid concatenation of unsanitized data with the renderToStaticMarkup() output.
Dont do this:

app.get("/", function (req, res) {  return res.send(    ReactDOMServer.renderToStaticMarkup(      React.createElement("h1", null, "Hello World!")    ) + otherData  );});

6. Detecting vulnerabilities in dependencies

Always check the vulnerability index of the dependency before importing it into your project. There might have vulnerable dependencies. So, try to install a stable version of dependencies or the latest one with less vulnerability count.
You can use tools like Snyk for analyzing the vulnerabilities.
Use the following command in the terminal to run Snyk in your project,

$ npx snyk test

7. Injecting JSON state

JSON and XML are the two widely used formats for transmitting data over the network. However, most of them prefer to use JSON. Also, it is possible to send JSON data along with server-side rendered react pages. So, try to replace < character with a gentle value (Unicode value) to prevent injection attacks.
Always try to replace HTML specific codes from JSON with its Unicode equivalent characters:

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8. Never serialize sensitive data

We often use set the initial state of our app with JSON values. In that case, JSON.stringify() a function converts any data into a string even though its vulnerable. So, this gives freedom to an attacker to inject a malicious JS object that can modify valid data.

<script>window.__STATE__ = ${JSON.stringify({ data })}</script>

9. Detecting vulnerable versions of React

React had a few high vulnerabilities in its initial release. Now, it becomes stable and has very few vulnerabilities. So, it is better to keep your react version up to date and avoid the use of vulnerable versions of the react and react-dom . Use npm audit command to verify dependency vulnerabilities.

10. Configuring security linters

We can automatically detect security issues in our code by integrating the Linter configurations and plugins. It will give us the recommendation for security issues and automatically update to new versions when vulnerabilities exist. Use Synk ESLint configuration to detect security issues in your code.
Use Snyk to find and fix vulnerabilities in open source libraries. It also helps you to scan your projects for license compliance.

11. Dangerous library code

The library code is often used to perform dangerous operations like directly inserting HTML into the DOM. So, avoid libraries that use innerHTML, dangerouslySetInnerHTML or unvalidated URLs. Also, configure Linters to detect unsafe usage of React security mechanisms.

12. Implement a Web Application Firewall (WAF)

The WAF is just like our windows firewall to monitor the network traffic. It is capable to detect and block malicious content by analyzing the network traffic.
We can implement a WAF majorly three ways in your application:

• Network based firewall on the hardware level
• Host based firewall on the software level (by integrating into the app)
• Cloud based### 13. Principle of least privilege for database connectionIt is important to assign the right database roles to various users in your application. The lack of user role definition may open a way to the attacker to perform any CRUD operation on the database without valid role.

It is also important that never give admin privileges for your application database to anyone unless it is vital and keep the admin privilege allocation minimal. This will safe our application and reduce the chance of database attacks.

Thanks for reading this article.

If you enjoyed this article, please click on the heart button and share to help others find it!

Originally posted on Medium -
13 ways to secure your react.js application