5 React Cybersecurity Best Practices
Package and version management
Use a scanning tool or audit npm packages before you use them. Widely used packages usually are a good indication that it is safe but that is not always the case so it is best to do your research.
Vulnerabilities and weaknesses are found regularly and updated so it is best to keep react and npm packages up to date. Just because it is on npm does not mean it is not malicious. Packages such as react-marked-markdown, react-datepicker-plus, react-dates-sc, awesome_react_utility, react-server-native have been identified as malicious. To test for bad packages you can use tools such as openbase.com or snyk.io/advisor. Snyk is also a great tool to find security problems in your project. Other application security tools include: HCL Appscan Codesweep, and Deepscan. Reference
Use AuthO or PassportJS
While React has many security features, there are many ways a hacker can skip the frontend and target the back. Most often NodeJS and ExpressJS are used in connection to React.
The best way to securely transmit information across the web especially for authenticating users.
Related security measures: Prevent users from using weak passwords, limit brute forcing through blocking users after a number of attempts, logout and recreate session after time away, and require re authentication for sensitive features. Never store sensitive information such as the database connection. These should be local in a .env file. Reference
Obfuscation
Add GENERATE_SOURCEMAP=false to your .env file to uglify your code so that it is harder for a hacker to try to dig through your work and find vulnerabilities. By default sourcemap is true for debugging purposes but when deployed this should be false. To take this a step further you can use javascript-obfuscator, Jscrambler, or netlify-plugin-js-obfuscator package.
Another way to do this is to implement lazy loading. To do so we import Suspense and lazy from react and wrap our code. The difference is that in this case you can control who can see the code. Of course, the benefit of doing this will be lost if your source code is in a public repository. Set the repository to private. Reference
Use a dedicated axios instance or check origin of requests
By checking the origin of the request we can validate that we actually want to give the server the access token which is used to ensure that the user is who they say they are. We don’t want to send our access token unless we really need to provide that information. In the demonstration below we are checking to make sure that the axios requests are using localhost:3001 but we could include more in this allowlist.
Implement Idle Timeout
To reduce chances for injecting malware or hijacking the session it is best practice to implement a timeout indicating when the user has been away for 15 minutes so the user will be logged out. You can do this using react-idle-timer package.The general idea of how this works is shown below. Reference
React Router
To avoid broken access control ensure that your admin and private routes are wrapped in a component that verifies the user should have access to that data. Redirecting users can be done through react router but should be done on the backend.
Redirecting using the ExpressJs backend: