React applications face unique security challenges that traditional security scanners often miss. From XSS vulnerabilities in JSX to authentication bypass in React Router, frontend security requires specialized knowledge during code review. This comprehensive checklist helps engineering teams identify and prevent the most critical React security vulnerabilities before they reach production.

Critical React Security Vulnerabilities to Check

XSS & Injection (5 items)

• dangerouslySetInnerHTML misuse
• Unescaped user input in JSX
• DOM-based XSS vulnerabilities
• Script injection via props
• CSS injection attacks

Authentication & Authorization (6 items)

• JWT token exposure
• Insecure token storage
• Client-side route protection bypass
• Privilege escalation
• Session fixation
• CSRF token validation

Data & API Security (4 items)

• Sensitive data in client code
• API key exposure
• Insecure HTTP requests
• GraphQL query injection

Configuration & Dependencies (3 items)

• Vulnerable npm packages
• Debug code in production
• Misconfigured CORS policies

XSS and Injection Vulnerabilities

1. dangerouslySetInnerHTML Misuse

The most critical React XSS vector occurs when developers use dangerouslySetInnerHTML with unsanitized user input. Always sanitize content before rendering HTML.

❌ Dangerous:<div dangerouslySetInnerHTML={__html: userComment} />✅ Safe:

import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={__html: DOMPurify.sanitize(userComment)} />

2. Unescaped User Input in JSX

While React escapes content by default, certain patterns can bypass this protection. Be especially careful with dynamic property names and values.

3. DOM-based XSS Vulnerabilities

Check for direct DOM manipulation that bypasses React's built-in XSS protection, especially when using refs or third-party libraries.

4. Script Injection via Props

Malicious JavaScript can be injected through component props, particularly in dynamic component rendering scenarios.

5. CSS Injection Attacks

CSS-in-JS libraries can be vulnerable to injection if user input is used to construct style objects without proper validation.

Authentication and Authorization Flaws

6. JWT Token Exposure

Check for JWT tokens being logged, stored in unsecured locations, or exposed through developer tools. Tokens should never appear in console logs or localStorage without encryption.

7. Insecure Token Storage

Review where authentication tokens are stored. localStorage and sessionStorage are vulnerable to XSS attacks. Consider httpOnly cookies for sensitive tokens.

❌ Vulnerable:localStorage.setItem('authToken', token);✅ Better:

// Use httpOnly cookies set by server
// Or encrypted storage with proper key management

8. Client-side Route Protection Bypass

Verify that route protection logic cannot be bypassed by manipulating client-side state or URL parameters. All security enforcement should happen server-side.

9. Privilege Escalation

Check for role-based access control bugs where users can access higher-privilege functionality by manipulating component props or state.

10. Session Fixation

Ensure session tokens are regenerated after login and that old sessions are properly invalidated.

11. CSRF Token Validation

Verify that all state-changing requests include proper CSRF protection, especially in forms and API calls.

Data and API Security Issues

12. Sensitive Data in Client Code

Review the codebase for hardcoded secrets, API keys, or sensitive configuration data. All sensitive data should be server-side only.

13. API Key Exposure

Check for API keys in client-side code, environment variables accessible to the frontend, or network requests visible in developer tools.

14. Insecure HTTP Requests

Ensure all API requests use HTTPS and include proper authentication headers. Review error handling to prevent information disclosure.

15. GraphQL Query Injection

For GraphQL implementations, check for query injection vulnerabilities and ensure proper query depth limiting and rate limiting.

Configuration and Dependencies

16. Vulnerable npm Packages

Regularly audit dependencies for known vulnerabilities using npm audit or tools like Snyk. Pay special attention to packages with high privilege access.

17. Debug Code in Production

Check for debug code, console logs with sensitive information, or development-only features that shouldn't reach production.

18. Misconfigured CORS Policies

Review CORS configuration to ensure it's not overly permissive. Avoid using wildcard (*) origins in production.

Automated Detection Strategies

Implement these automated security checks in your React code review process:

Use ESLint security plugins like eslint-plugin-security and eslint-plugin-react-security
Integrate SAST tools like SonarQube or CodeQL for React-specific vulnerabilities
Set up dependency scanning with npm audit in your CI pipeline
Use Content Security Policy (CSP) headers to detect and prevent XSS
Implement automated testing for authentication and authorization flows

Code Review Checklist Template

Use this checklist template during React security code reviews:

Security Review Checklist

No dangerouslySetInnerHTML with unsanitized input User input properly escaped in JSX No sensitive data in client-side code Authentication tokens securely stored Route protection cannot be bypassed All API requests use HTTPS No vulnerable dependencies CORS properly configured

By systematically checking for these React security vulnerabilities during code review, your team can prevent the majority of frontend security issues before they impact users. AI-powered code review tools can automate many of these checks, making security review both faster and more comprehensive.

React Security Vulnerabilities: Code Review Checklist for 2025