Preserve React’s safe rendering defaults
React escapes values rendered through JSX, which is an important protection against cross-site scripting. Keep untrusted values in ordinary text positions and avoid constructing JSX or component names from uncontrolled strings. The protection can be bypassed when an application uses direct DOM APIs, unsafe URLs, third-party widgets, or React’s intentionally named dangerouslySetInnerHTML escape hatch.
If rich text must be rendered, sanitize it before it reaches the component using a maintained HTML sanitizer and a deliberately small policy. Sanitization should occur at a clear trust boundary; do not sanitize, then append or transform strings in a way that reintroduces markup. Document every use of dangerouslySetInnerHTML and cover it with security tests.
Separate interface state from authorization
Hiding a button, route, or component is not access control. The server must verify the authenticated user and their permission for each protected object and operation. Test direct requests, altered identifiers, stale sessions, and users crossing tenant boundaries.
Keep tokens out of URLs and browser storage when a safer server-managed session is available. Session cookies should use Secure, HttpOnly, and an appropriate SameSite value. Protect state-changing requests against CSRF when the browser sends credentials automatically. Ensure logout and account-disable events invalidate the relevant sessions.
Validate data across client and server boundaries
Client-side validation improves usability but can be bypassed. Validate request bodies, query values, route parameters, uploaded files, and server-action inputs on the server. Use explicit schemas and return limited error messages. React Server Components and server actions change where code executes; mark and review the boundary carefully so secrets and privileged modules do not enter client bundles.
Do not expose private environment variables through public build prefixes. Inspect production bundles and source maps for tokens, internal endpoints, customer data, and debug output. Treat hydration data embedded in HTML as an output-encoding problem and use framework-supported serialization.
Review URLs, navigation, and external content
Allow only expected URL schemes and destinations for links, redirects, images, and embedded media. React 19 blocks some javascript: URL uses, but application-specific URL validation is still required, as noted by the OWASP XSS prevention guidance. Avoid open redirects and do not trust a return URL merely because it came from the application’s query string.
Third-party components execute inside the application’s trust boundary. Assess their maintenance, permissions, network requests, accessibility, and update path. A component that handles editors, file uploads, charts, authentication, or payments deserves additional scrutiny.
Harden the surrounding delivery stack
React security depends on the framework, API, CDN, headers, and identity system around it. Configure a Content Security Policy, framing restrictions, MIME sniffing protection, HTTPS enforcement, and a suitable referrer policy. Set CORS on the API to the origins and methods actually needed. Add rate limits and abuse controls to expensive or sensitive operations.
Lock dependencies and use reproducible builds. Review framework security advisories and keep the supported runtime and build toolchain current. Production error handling should not expose stack traces or server internals. Monitor authentication anomalies, authorization failures, unexpected client errors, and changes in third-party network destinations.
React security review checklist
- JSX escaping remains intact and unsafe HTML rendering is inventoried.
- Server-side authorization protects each object and action.
- Server and client modules are separated; no secrets reach the bundle.
- Inputs, redirect destinations, and external URLs are validated.
- Session, CSRF, CORS, and security-header choices fit the architecture.
- Dependencies and third-party components have owners and update plans.
- Security tests cover multiple roles, tenants, direct requests, and error paths.
A React review should include the API and deployment platform, not only component code. Many serious issues occur where the interface meets identity, data access, and server-side operations.
