ReactJS Web Security Best Practices

While developing modern Web Application using ReactJS/AngularJS, NodeJS/Java along with Data Stores, it is very important to consider the Security best practices to secure applications from top security threats such as Phishing, Ransomware, SQL Injection, Cross-site scripting, Code Injections, Viruses, Spyware etc. The question is how well we secure our Web Application considering all of these threats. This document is intended to provide some of the best practices to be followed in ReactJS Web Application.

1. Add Security to HTTP Authentication

There are multiple applications where authentication is done on user login or account creation and this process should be secure as the client-side authentication and authorization can be exposed to many security defects that may destroy these protocols in the application.

To avoid this most commonly used techniques for adding authenticity can be validated using: 

• JSON Web Token (JWT):

  Following are some points that has to be taken into account while implementing security using JWT:
  –Please avoid keeping JWT tokens based on Local Storage. As it would be very easy for someone to get a token using the browser’s Dev tools console and write console.log(localStorage.getItem(‘token’))
  –Store your tokens to an HTTP cookie rather than localStorage.
  –Or, you can keep your tokens to your React app’s state.
  –Tokens should be kept in the backend. It would be easy to sign and verify these keys at the backend side.
  –You should use long and unpredictable secrets similar to the passwords field while creating an account asking for a strong and long password.
  –Always make sure you use HTTPS in place of HTTP. This will give assurance for your web-based app to provide a valid certificate that can be sent over a secure SSL network.

• OAuth:

  –OAuth is an open-standard authorization protocol or framework that describes how unrelated servers and services can safely allow authenticated access to their assets without actually sharing the initial, related, single logon credential. In authentication parlance, this is known as secure, third-party, user-agent, delegated authorization.

• AuthO:

  –Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that come with building your own solution to authenticate and authorize users.

• React Router:

  –React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

• PassportJS:

  –Passport is authentication middleware for Node. It is designed to authenticate requests. When writing modules, encapsulation is a virtue, so Passport delegates all other functionality to the application. This separation of concerns keeps code clean and maintainable, and makes Passport extremely easy to integrate into an application.

2. Secure Against Broken Authentication

Sometimes when you enter authentication details, and the application crashes which might lead to exploitation of user credentials. So to remove this kind of vulnerability, make sure you follow the measures mentioned below.

• Do use multi-factor and 2-step authorization (2FA).
• You can use cloud-based authentication (for instance Cognito, Keycloak) for secure access.

3. Broken Access Control

With the improper management of restrictions and limitations on authenticated users can cause exploitation of unauthorized data and functionality of a React native app. Sometimes unauthorized users can also change the primary key of data and manipulate the functionality of the application. To ensure security from unauthorized access, follow these practices:

• Add a role-based authentication mechanism to your react code
• To secure your application, deny functionality access

4. Cross-Site Scripting (XSS)

• You can create automated overseeing features that can sanitize the user input
• Discard malicious and invalid user input from being rendered into the browser.

5. Secure Against DDoS Attacks

The vulnerable security concerns take place when the whole application state management has loopholes and it masks the IPs. This will restrict the communication caused due to the termination of services. Here are some methods to stop this:

• Limitation of rate on APIs- This will add limitations to the number of requests for a given IP from a specific source with a complete set of libraries using the Axios-rate limit.
• Add app-level restrictions to the API.

6. SQL Injection

This attack is related to data manipulation. Due to this vulnerability, attackers can modify any data with or without the user’s permission or can extract any confidential data by executing arbitrary SQL code.

• To eliminate SQL injection attacks, first, validate API call functions against the respective API schemas. In order to handle the issue of time-based SQL injection attacks, you can use timely validation of the schema to avoid any suspicious code injections (Backend)
• Another effective way to secure against the SQL vulnerability is by using an SSL Certificate (Frontend).

7. Using dangerouslySetInnerHTML instead of innerHTML

In React, you can use ‘innerHTML’ for an element inside DOM which is a risky practice as it’s a wide-open gate for XSS attack. So to remove this issue, React has provided a “dangerouslySetInnerHTML” prop to safeguard against this type of attack. Also, you can use libraries such as DOMPurify in order to sanitize user input and remove any malicious inputs. React already has an inbuilt function called “dependency injection” for properly managing user interfaces.

8. Protect React.js source code with Jscrambler.

To Protect your JavaScript code with the most advanced obfuscation techniques and prevent it from being stolen, hijacked or reverse-engineered

9. Update Package/Library/Software versions

Update the packages/libraries/software version as appropriate especially security related patches.

• Apache Vulnerabilities – outdated Apache httpd version: Update Apache httpd version to the latest version and hide the version
• Update jQuery version to the latest version & Bootstrap to the latest version

10. Form Auto Complete

It is recommended to make autocomplete=off so that browser doesn’t cache especially UserID/Password

11. Username Enumeration

During forgot password request, error message sent by the server after entering a non-existing user is not recommended. No matter if the e-mail address exists or not, only a generic message should be displayed, like “If the e-mail address is known to us, a password recovery link will be sent to your e-mail“

12. Access & Deployment

• Use a non-root user without sudo privilege to run your web application.
• Use a non-admin user with limited privileges to access your database from your web app.
• Remove ~/.bash_history whenever possible.
• Store hashes of the users’ passwords in your database.
• Use a slow hashing algorithm like BCrypt to hash the passwords.
• Mask sensitive request parameters in all of your log files, or don’t log them at all.

13. TCP & NMAP Scan

• Only Port 22 and 443 are to be opened
• NMAP Scan Report and discover open ports and services, and detect vulnerabilities and fix the vulnerability based on the scan report