Are React apps secure?

React provides automatic XSS protection by escaping values in JSX, but this protection is bypassed when developers use dangerouslySetInnerHTML, inject user input into href attributes or render unsanitized HTML. More critically, React is a frontend framework that cannot enforce security on its own. API keys embedded in client bundles, insecure backend API calls, JWT tokens stored in localStorage and CORS misconfigurations are common vulnerabilities in React applications that require a full-stack security audit.

How do I protect API keys in React?

Never embed secret API keys in React applications. Any value in your client bundle, including REACT_APP_ environment variables, is visible to anyone who opens browser developer tools. Use a backend proxy to make API calls that require secret keys. For keys that must be client-side (like public Stripe keys), restrict them by domain, implement rate limiting on the API provider and use the minimum required permissions. Sherlock Forensics scans your client bundles to identify every exposed key and assess its risk.

What is the biggest React security risk?

The biggest security risk in React applications is the false assumption that the frontend is secure because React escapes JSX. React protects against basic XSS but does nothing to secure API calls, protect authentication tokens, enforce authorization, prevent CORS abuse or manage dependencies. Most React security vulnerabilities exist in the interaction between the frontend and its backend API, not in the React code itself.

Can you audit a React + Node.js stack?

Yes. Sherlock Forensics audits full-stack JavaScript applications including React frontends with Node.js and Express backends. We test both sides of the stack: the React frontend for XSS, API key exposure, JWT handling and client-side vulnerabilities, and the Node.js backend for injection, authentication bypass, SSRF, middleware issues and dependency vulnerabilities. A full-stack audit provides the most comprehensive security assessment.

How do I prevent XSS in React?

Avoid dangerouslySetInnerHTML entirely unless you sanitize input with a library like DOMPurify. Never insert user input into href, src or event handler attributes. Validate and sanitize all data from APIs before rendering. Use Content-Security-Policy headers to restrict inline scripts. Audit third-party components for XSS vulnerabilities. Sherlock Forensics tests your React application for every known XSS vector including DOM-based, reflected and stored XSS through API responses.

React Security

React App Security Audit

React builds the frontend. Who is securing the backend it talks to?

Sherlock Forensics provides React app security audits covering XSS through dangerouslySetInnerHTML, exposed API keys in client bundles (REACT_APP_), insecure API calls, JWT storage in localStorage, CORS misconfiguration, open redirects, prototype pollution in dependencies and exposed source maps. Quick audits from $1,500 CAD. Standard penetration tests from $5,000 CAD.

React applications do not exist in isolation. They make API calls, store authentication tokens, embed configuration values and load dozens of third-party dependencies. React's JSX escaping prevents basic XSS, but it does nothing to protect API keys bundled into your JavaScript, JWT tokens stored in localStorage, misconfigured CORS policies on your backend or prototype pollution in your dependency tree. A React security audit examines the entire attack surface, from the client bundle through the API layer and back.

Order a Quick Audit - $1,500 Scope a Full Pentest

What We Find

React Vulnerabilities We Test For

01 - XSS

XSS Through dangerouslySetInnerHTML

React escapes values rendered in JSX by default, but dangerouslySetInnerHTML bypasses this protection entirely. When user-controlled data flows into dangerouslySetInnerHTML without sanitization, attackers can inject scripts that steal session tokens, redirect users to phishing pages and modify the DOM. This includes data from API responses, URL parameters, CMS content and user profiles. We trace data flow from every input source to identify unsanitized HTML injection points across your component tree.

02 - Keys

Exposed API Keys in Client Bundle (REACT_APP_)

Environment variables prefixed with REACT_APP_ are embedded into your JavaScript bundle at build time and visible to anyone who opens browser developer tools. Developers routinely embed payment API keys, internal service credentials, third-party API tokens and feature flag secrets using this prefix. Once exposed, these keys can be used to make unauthorized API calls, access paid services on your account and exfiltrate data. We extract and analyze every embedded value in your client bundle to identify exposed secrets and assess their impact.

03 - API

Insecure API Calls

React applications communicate with backend APIs through fetch, axios and other HTTP clients. Insecure API call patterns include sending credentials over unencrypted connections, trusting client-side authorization checks, exposing internal API endpoints in client code, failing to validate API responses before rendering and sending sensitive data in URL query parameters that appear in server logs. We analyze your API communication patterns, test backend endpoints directly and identify where the frontend assumes security that the backend does not enforce.

04 - JWT

JWT Storage in localStorage

Storing JSON Web Tokens in localStorage makes them accessible to any JavaScript running on your page, including XSS payloads and malicious third-party scripts. Unlike cookies with HttpOnly flags, localStorage values cannot be protected from JavaScript access. A single XSS vulnerability anywhere in your application or dependencies gives attackers full access to stored JWTs. We assess your token storage strategy, test for XSS vectors that could access stored tokens and recommend secure alternatives like HttpOnly cookies with proper CSRF protection.

05 - CORS

CORS Misconfiguration

Cross-Origin Resource Sharing policies on your backend API control which domains can make authenticated requests. Misconfigured CORS headers including wildcard origins with credentials, reflected origin headers and overly permissive domain patterns allow attackers to make authenticated API calls from malicious websites using your users' sessions. We test your CORS configuration for every permissive pattern including origin reflection, null origin acceptance, subdomain wildcards and regex bypass techniques.

06 - Redirect

Open Redirects

React applications frequently implement client-side routing that redirects users based on URL parameters, query strings or post-authentication return URLs. When redirect destinations are not validated against an allowlist, attackers craft URLs that appear to come from your domain but redirect victims to phishing pages, malware downloads or credential harvesting sites. We test all redirect mechanisms in your application including React Router redirects, window.location assignments and server-side redirect endpoints called by the frontend.

07 - Prototype

Prototype Pollution in Dependencies

Prototype pollution occurs when attackers manipulate JavaScript's object prototype through vulnerable merge, clone or extend functions in third-party libraries. A single polluted prototype can affect every object in your application, enabling property injection, authentication bypass, denial of service and even remote code execution in server-side rendered contexts. We audit your dependency tree for known prototype pollution vulnerabilities and test exploitable paths from user input to vulnerable functions.

08 - Maps

Exposed Source Maps

Source maps for React applications reveal your entire component tree, state management logic, API integration code, authentication flows and business rules. When source maps are accessible in production, attackers can read your application source code as if they had access to your repository. This reveals API endpoints, validation logic, hidden features and security mechanisms that make subsequent attacks far more effective. We check for accessible .map files and assess the information exposure risk.

Our Approach

How We Audit React Applications

Client Bundle Analysis

We extract and deobfuscate your production JavaScript bundles to identify embedded API keys, hardcoded URLs, feature flags, authentication logic and exposed source maps. This static analysis reveals information disclosure that dynamic testing alone cannot find. We catalog every secret and sensitive value embedded in your client-side code.

API Surface Testing

We map every API endpoint your React application communicates with and test each one independently. This includes authentication endpoints, data APIs, file upload handlers, WebSocket connections and third-party integrations. We test for authentication bypass, authorization flaws, injection vulnerabilities, CORS misconfiguration and rate limiting gaps on the backend that the React frontend relies on.

Authentication Flow Review

We test your complete authentication lifecycle including registration, login, session management, token storage, refresh flows, password reset, social login integration and logout. We verify that tokens are stored securely, that session invalidation works correctly, that refresh tokens cannot be replayed and that authentication state is consistent between the frontend and backend.

Dependency Audit

We analyze your package.json and lock files to identify known vulnerabilities in direct and transitive dependencies. We go beyond npm audit by testing whether vulnerable dependencies are actually reachable from user input and assessing the real-world exploitability of each finding. We also check for dependency confusion risks and typosquatting packages in your dependency tree.

Pricing

React Security Engagements

Quick Audit - $1,500 CAD: Focused security review covering client bundle analysis, API key exposure, XSS vectors, JWT storage and common React vulnerabilities. Ideal for SPAs and early-stage applications. Delivered in 3-5 business days. Order online.
Standard Penetration Test - $5,000 CAD: Full penetration test covering the React frontend and its backend API. Includes all eight vulnerability categories, authentication testing, CORS assessment, dependency audit and business logic testing. For production applications with paying users. Order online.
Comprehensive Assessment - $12,000 CAD: Full-scope assessment including source code review of both frontend and backend, infrastructure testing, CI/CD pipeline review, dependency deep-dive and remediation support. For enterprise React applications. Contact us to scope.

Frequently Asked Questions

React Security FAQs

Are React apps secure?: React provides automatic XSS protection through JSX escaping, but this only covers one attack vector. React applications are vulnerable to dangerouslySetInnerHTML XSS, exposed API keys in client bundles, insecure token storage, CORS misconfiguration, prototype pollution in dependencies and open redirects. The biggest risk is the false sense of security that comes from React's default escaping while ignoring the full attack surface.
How do I protect API keys in React?: Never put secret API keys in your React application. Any value in your client bundle is public, including REACT_APP_ environment variables. Use a backend proxy server to make API calls that require secret keys. For keys that must be client-side, restrict them by domain on the API provider, use read-only permissions and implement rate limiting. Sherlock Forensics identifies every exposed key in your bundle and assesses the risk of each one.
What is the biggest React security risk?: The biggest risk is treating React as if it provides comprehensive security. React escapes JSX output, but every other security concern, including authentication, authorization, API security, token storage, CORS and dependency management, falls outside React's protection. Most critical vulnerabilities in React applications are in the API layer and the authentication system, not in the React components themselves.
Can you audit a React + Node.js stack?: Yes. We audit full-stack JavaScript applications including React with Node.js, Express, Fastify and NestJS backends. We also audit React applications backed by Python (Django, Flask), Ruby (Rails), Go, PHP (Laravel) and other backend technologies. A full-stack audit covers both the client-side and server-side attack surfaces for comprehensive protection.
How do I prevent XSS in React?: Avoid dangerouslySetInnerHTML. If you must render HTML, sanitize it with DOMPurify before rendering. Never insert user input into href, src or event handler attributes without validation. Validate and sanitize API response data before rendering. Implement Content-Security-Policy headers that block inline scripts. Audit third-party components for XSS vulnerabilities. Keep React and all dependencies updated.

Get Started

Your React app is only as secure as its weakest API call.

Quick audits from $1,500 CAD. Standard penetration tests from $5,000 CAD.

Order Online

Secure Your React Application

Tell us about your React stack, your backend technology and your security concerns. We will recommend the right assessment for your application.

Call 604.229.1994

Phone: 604.229.1994
Burnaby Office: Burnaby, BC, Canada
Coquitlam Office: Coquitlam, BC, Canada