React Cybersecurity
Most Common Vulnerabilities
Cross-Site Scripting (XSS)— React DOM escapes any values embedded in JSX before rendering them. In other words, when you use curly braces to bind data, React automatically escapes bad values. That does not mean XSS is not possible though. There are other concerns where XSS is relevant:
dangerouslySetInnerHTML
Avoid setting the HTML with dangerouslySetInnerHTML if possible. If you must use it consider researching and using DOMPurify to prevent XSS attacks.
URL
When using anchor tags with user provided URL’s be very careful about attackers adding payloads prefixed with JavaScript. Disallow HTTP links.
CSV Injection — Monitor the input of Input Validation design operators and encode CSV files.
Insecure Randomness — Do not use predictable values to store, access, or send private information. For example, having a simple index value to store users not intended to be accessible.
Arbitrary Code Execution (ACE)— Be aware of possible network bug exploits. Take steps to protect your operating system.
Zip Slip — Vulnerabilities could come from your library or your code. Use directory traversal validation to protect against zip slip.
Resources downloaded over insecure protocol — Research insecure protocols and ensure the packages you are using are not vulnerable to tis attack. Replace Telnet gear with SSH-2, and upgrade SNMPv1 and SNMPv2c with SNMPv3.
Malicious Packages — Best practice is to scan/audit packages before you use them. Ie. Don’t use vulnerable or malicious packages such as react-marked-markdown, react-datepicker-plus, react-dates-sc, awesome_react_utility, react-server-native. Don’t try to implement your own security fixes if other well used and documented packages can solve the same problem. As long as you can verify they are trustworthy, they are a better option.
Web Application Firewall detects and blocks malicious content by monitoring and filtering traffic.
Distributed Denial of Service (DDoS) — Scan the React app for known DoS vulnerabilities. Identity users such as by using react-recaptcha to avoid robot traffic. You can secure your system by taking down infected links and backing up your files through scanning and protection sites.
Cross-site Request Forgery (CSRF) — Use JWT tokens for session management such as using PassportJS. Make sure your app reads only the stored CSRF tokens. For URL related issues use react router.
XML eXternal Entity (XXE)— XML parsers fall victim to XXE attacks. To prevent this attack disable External Entities in your XML parser library and ensure it is up to date. Ensure that the attack cannot exhaust system resources.
SQL Injection (SQLi )— Don’t give more privilege than needed to any user. Never give admin/database access unless it is vital.
General security concerns
- Authentication issues — For every login, create a new session ID for the user and store it server side.
- Broken access control — Ensure that users can only access what they were intended to use. They should not be able to access another user's data or utilize admin control pages.
- Security misconfigurations — Keep third party libraries and React up to date to ensure security patches are added when vulnerabilities are discovered. Configure your server according to the companies documentation.
- Unreliably incorporated protection layers — Disable form caching and update encryption algorithms used.
- Lack of End-to-End encryption — Use E2EE to ensure only the sender and receiver can access the data. TLS provides encryption between users and service providers. E2EE encrypts communication directly between the users of a system.
- Malicious File Upload — Validate file uploads. S3 has services to prevent malicious uploads if you choose to use it.
General best practices may include keeping code simple, using blacklists when sanitizing code, using many layers of security for any given problem, don’t give users more information or privilege than they require, log database requests for attack detection, and never put off implementing detection and prevention.
To detect what problems are most relevant in your scenario plan out a threat model, review the source code, use pen testing, and test architecture, people, policies, and processes.
You may use WSTG as a blueprint to determine where to start after you have created a threat model and when your application meets specific security criteria. Security should be on the mind of every developer through all stages of the SDLC.
Summary of Best Practices:
- Use default XSS protection with data binding
- Watch out for dangerous URLs and URL-based script injection
- Sanitize and render HTML
- Check for known vulnerabilities in dependencies
- Avoid JSON, CSV, and SQL injection attacks
- Use non-vulnerable versions of React
- Use linter configurations
- Avoid dangerous library code
- Ensure your routes and files are protected
- Identify protected resources and build a threat model
- Plan to test security throughout the development process using Jest or other testing frameworks
References:
React.js Security Guide: Threats, Vulnerabilities, and Ways to Fix Them (relevant.software)
How to Secure Your React.js Application (freecodecamp.org)
snyk-javascript_report_2019.pdf
Simple is more secure (linkedin.com)
Why and How to Run NPM Security Scans | JFrog
React Security | React Resources