React Security Checklist: 20-Item Guide for XSS, Forms & State

TL;DR

This 20-item checklist covers critical React security configurations: XSS prevention, form security, state management, dependencies, and API calls. 5 critical items must be fixed before launch, 8 important items within the first week, and 7 recommended items when you can.

React does a solid job of escaping output by default, so developers tend to assume they are safe. They mostly are, right up until someone reaches for dangerouslySetInnerHTML or stuffs a token into localStorage. Run through these items to make sure your React app is not quietly exposing things it should not be.

Quick Checklist (5 Critical Items)

No dangerouslySetInnerHTML with user contentReact's escape is intentional - don't bypass with user data

Server-side validation for all formsClient validation is for UX, not security

No tokens/secrets in React stateState persists and can leak via React DevTools

No sensitive data in localStorageXSS can access localStorage - use HttpOnly cookies

HTTPS for all API callsNever send data over HTTP

XSS Prevention 4

No dangerouslySetInnerHTML with user contentReact's escape is intentional - don't bypass with user data. How to prevent XSS

HTML sanitized if dangerouslySetInnerHTML neededUse DOMPurify to sanitize any HTML you must render. How to sanitize HTML

No user content in href without validationjavascript: URLs can execute code - validate protocols. How to validate URLs

::checklist-item{label="External links use rel="noopener noreferrer"" description="Prevents window.opener access from external pages. How to secure external links"} ::

Form Security 4

Server-side validation for all formsClient validation is for UX, not security. How to validate on server

CSRF protection on form submissionsUse anti-CSRF tokens or SameSite cookies. How to prevent CSRF

::checklist-item{label="Autocomplete attributes set correctly" description="autocomplete="off" for sensitive fields if needed. How to configure autocomplete"} :: ::checklist-item{label="Password fields use type="password"" description="Don't use type="text" for passwords. How to secure password fields"} ::

State Management 4

No tokens/secrets in React stateState persists and can leak via React DevTools. How to secure React state

Sensitive data cleared on logoutReset state/stores when user logs out. How to clear state on logout

No sensitive data in localStorageXSS can access localStorage - use HttpOnly cookies. How to store tokens securely

Redux/Zustand not persisting secretsCheck persist configurations for sensitive data. How to secure state persistence

Dependencies 4

npm audit run regularlyCheck for known vulnerabilities in dependencies. How to audit npm packages

Dependencies updated for securityUpdate packages with security patches. How to update dependencies

No unused dependenciesRemove packages you're not using. How to remove unused packages

Lock file committedpackage-lock.json ensures consistent installs. How to use lock files

API Calls 4

HTTPS for all API callsNever send data over HTTP. How to enforce HTTPS

Auth tokens not in URLsUse headers, not query params for tokens. How to secure API calls

Errors don't expose internalsCatch errors and show user-friendly messages. How to handle API errors

Abort controllers for unmounted componentsCancel requests when component unmounts. How to use AbortController

React Security Best Practices

React's default escaping prevents most XSS attacks, making it safer than vanilla JavaScript. However, certain patterns like dangerouslySetInnerHTML, user-provided URLs in href, and storing secrets in state can introduce vulnerabilities.

Is React safe from XSS attacks?

React escapes content by default, preventing most XSS attacks. However, using dangerouslySetInnerHTML bypasses this protection. If you must render user HTML, sanitize it with DOMPurify first. Also validate user-provided URLs before using them in href attributes.

Should I store tokens in React state?

Avoid storing sensitive tokens in React state or localStorage. State can be accessed via React DevTools, and localStorage is accessible to any XSS attack. Use HttpOnly cookies for sensitive tokens instead - they can't be accessed by JavaScript.

How do I prevent CSRF in React?

Use SameSite cookies (Strict or Lax) for session management. If you need additional protection, implement anti-CSRF tokens: generate a token on the server, store it in a cookie, and include it in form submissions or request headers.