React Security Vulnerabilities: Code Review Checklist for 2025

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:

key management ```

<h3>8. Client-side Route Protection Bypass</h3>
<p>
	Verify that route protection logic cannot be bypassed by manipulating
	client-side state or URL parameters. All security enforcement should happen
	server-side.
</p>
<h3>9. Privilege Escalation</h3>
<p>
	Check for role-based access control bugs where users can access
	higher-privilege functionality by manipulating component props or state.
</p>
<h3>10. Session Fixation</h3>
<p>
	Ensure session tokens are regenerated after login and that old sessions are
	properly invalidated.
</p>
<h3>11. CSRF Token Validation</h3>
<p>
	Verify that all state-changing requests include proper CSRF protection,
	especially in forms and API calls.
</p>
<h2>Data and API Security Issues</h2>
<h3>12. Sensitive Data in Client Code</h3>
<p>
	Review the codebase for hardcoded secrets, API keys, or sensitive
	configuration data. All sensitive data should be server-side only.
</p>
<h3>13. API Key Exposure</h3>
<p>
	Check for API keys in client-side code, environment variables accessible to
	the frontend, or network requests visible in developer tools.
</p>
<h3>14. Insecure HTTP Requests</h3>
<p>
	Ensure all API requests use HTTPS and include proper authentication headers.
	Review error handling to prevent information disclosure.
</p>
<h3>15. GraphQL Query Injection</h3>
<p>
	For GraphQL implementations, check for query injection vulnerabilities and
	ensure proper query depth limiting and rate limiting.
</p>
<h2>Configuration and Dependencies</h2>
<h3>16. Vulnerable npm Packages</h3>
<p>
	Regularly audit dependencies for known vulnerabilities using npm audit or
	tools like Snyk. Pay special attention to packages with high privilege access.
</p>
<h3>17. Debug Code in Production</h3>
<p>
	Check for debug code, console logs with sensitive information, or
	development-only features that shouldn't reach production.
</p>
<h3>18. Misconfigured CORS Policies</h3>
<p>
	Review CORS configuration to ensure it's not overly permissive. Avoid using
	wildcard (*) origins in production.
</p>
<h2>Automated Detection Strategies</h2>
<p>
	Implement these automated security checks in your React code review process:
</p>
<ul>
	<li>
		Use ESLint security plugins like eslint-plugin-security and
		eslint-plugin-react-security
	</li>
	<li>
		Integrate SAST tools like SonarQube or CodeQL for React-specific
		vulnerabilities
	</li>
	<li>Set up dependency scanning with npm audit in your CI pipeline</li>
	<li>Use Content Security Policy (CSP) headers to detect and prevent XSS</li>
	<li>
		Implement automated testing for authentication and authorization flows
	</li>
</ul>
<h2>Code Review Checklist Template</h2>
<p>Use this checklist template during React security code reviews:</p>
<h4>Security Review Checklist</h4>
<label>
	<input type="checkbox" /> No dangerouslySetInnerHTML with unsanitized input
</label>
<label>
	<input type="checkbox" /> User input properly escaped in JSX
</label>
<label>
	<input type="checkbox" /> No sensitive data in client-side code
</label>
<label>
	<input type="checkbox" /> Authentication tokens securely stored
</label>
<label>
	<input type="checkbox" /> Route protection cannot be bypassed
</label>
<label>
	<input type="checkbox" /> All API requests use HTTPS
</label>
<label>
	<input type="checkbox" /> No vulnerable dependencies
</label>
<label>
	<input type="checkbox" /> CORS properly configured
</label>
<p>
	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.
</p>