React is a free open-source front-end javascript library for building user interfaces. It can be used as a boilerplate for single-page web / mobile applications. React is a well-structured framework used to inject javascript codes inside an HTML page for which it uses JSX syntax. This is a very helpful framework for a beginner to develop a dynamic UI effortlessly.
Today, React has become a highly popular framework due to 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, the risks associated with the technologies also increase. Even though React has a smaller number of risks than other frameworks, a small carelessness can cause serious complications in your app. React is rich in open-source components. However, the use of unlicensed, rarely used codes and untrusted sources can make your app vulnerable to security slips.
Prevention is better than cure. It is better to take precaution on the common errors or vulnerabilities as your application will be useless without proper security features.
Getting Started
Let’s 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 which 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 modify(read/write) 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 occurs when the external entity reference is processed with a weakly configured XML parser which may lead to the disclosure of confidential data.
4. Broken Authentication
Authentication plays a vital role in your application. Even though we have two-factor authentication methods available, the authentication bypass or inadequate/poor authorization as it leads to a security breach in your application. This may expose the entire user information to the attacker who can manipulate the same.
5. Zip Slip
Zip Slip is an archive extraction vulnerability, allowing attackers to write arbitrary files into the system, resulting in remote command execution.
6. Arbitrary Code Execution
Arbitrary code execution is an attacker’s ability to run any code of his choice on the target machine. An arbitrary code execution exploit is a program which is run by the attacker to exploit 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 renderingtextContent and non HTML attributes.
Use JSX data-binding syntax{} to place data in your elements.
Do this:
<div>{data}</div>Don’t 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 #"http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24">
Don’t do this:
<a href={url}>About</a>3. Rendering HTML
We can insert HTML directly into the DOM usingdangerouslySetInnerHTML . These contents must be sanitized beforehand. Use a sanitization library such asdompurify on these values before placing them into thedangerouslySetInnerHTML prop.
Try to usedompurify 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 usedangerouslySetInnerHTML and sanitize it usingdompurify before injecting it into the component. The direct DOM access using refs,findDomNode() andinnerHTML also makes our application vulnerable. So, try to avoid the use of these methods and make the use ofdangerouslySetInnerHTML for these purposes.
Do this:
import purify from "dompurify";const App = ({data}: Props) => { <div dangerouslySetInnerHTML={data} />}<App data={__html:purify.sanitize(data)} />Don’t do this:
this.myRef.current.innerHTML = "<div>Hacked</div>";5. Server-side rendering
Use server-side rendering functions such asReactDOMServer.renderToString() andReactDOMServer.renderToStaticMarkup() to provide content escaping when sending the data to the client.
It is not safe to combine unsanitized data with therenderToStaticMarkup() output before sending it for hydration. Avoid concatenation of unsanitized data with therenderToStaticMarkup() output.
Don’t 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. They might have vulnerable dependencies. So, try to install a stable version of dependencies or the latest version with less vulnerability count.
You can use tools such asSnyk for analyzing the vulnerabilities.
Use the following command in the terminal to runSnyk in your project,
$ npx snyk test7. 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 set the initial state of our app with JSON values. This being the case,JSON.stringify() is a function which converts any data into a string even though it is vulnerable. Thus it gives freedom to an attacker to inject a malicious JS object which 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 unlike now. So, it is better to keep your react version up to date to avoid the use of vulnerable versions of thereact andreact-dom . Usenpm 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 gives us the recommendation for security issues and automatically updates to new versions when vulnerabilities exist. UseSnyk ESLint configuration to detect security issues in your code.
Use Snyk to find and fix vulnerabilities in open-source libraries and also to scan your projects for license compliance.
11. Dangerous library code
This library code is often used to perform dangerous operations like directly inserting HTML into the DOM. So, avoid libraries that useinnerHTML,dangerouslySetInnerHTML or unvalidated URLs. Also, configure Linters to detect unsafe usage of React’s security mechanisms.
12. Implement a Web Application Firewall (WAF)
The WAF is just like our windows firewall that monitors the network traffic. It is capable of detecting and blocking malicious content by analyzing the network traffic.
We can implement a WAF mainly in 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 connection
It is important to assign the right database roles to various users in your application. The lack of user role definition may expose a way for the attacker to perform any CRUD operation on the database without a valid role.
It is also important to never permit admin privileges for your application database to anyone unless it is vital so as to keep the admin privilege allocation minimal. This will safeguard your 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!
13 ways to secure your react.js application.pdf
Originally posted on Medium -
13 ways to secure your react.js application
