# What do I need to secure on a React or SPA frontend?

The basics are the well-known part, and they matter: **security headers** and a **Content Security Policy**; **CORS** pointed at real origins rather than a wildcard; **DOMPurify** for any HTML you render dynamically; **URL parameter validation**; iframe/clickjacking controls; and cookie, JWT and auth-provider configuration done properly.

**Then the secrets rule, which is absolute:** anything in the bundle is public. A prefixed environment variable ships to the browser, and even an unprefixed one leaks if the API call fires from the frontend - [the fix is a serverless proxy, not a better variable](https://www.tigzig.com/agents-faq/is-my-api-key-safe-in-the-browser). In the same family: [no source maps in production](https://www.tigzig.com/agents-faq/should-i-ship-source-maps-to-production), strip debug logging, and do not advertise your backend URL in the bundle.

**What actually catches people is the platform layer around all of that:**

Your app may have [a second public URL that bypasses your CDN entirely](https://www.tigzig.com/agents-faq/can-people-bypass-cloudflare-via-my-vercel-app-url), so every WAF rule and rate limit you configured simply does not apply. Your [SPA catch-all answers 200 to every scanner probe](https://www.tigzig.com/agents-faq/why-does-my-spa-return-200-for-paths-that-do-not-exist), which tells an attacker to keep digging. And your serverless functions [silently drop background work after the response is sent](https://www.tigzig.com/agents-faq/why-is-my-serverless-logging-dropping-entries) - which, when that work is your security logging, means no evidence of the attack you are trying to detect.

Beyond that: rate limiting on serverless routes and a global daily cap, brute-force protection on login, application-level IP blocking, [invisible bot verification on sensitive forms](https://www.tigzig.com/agents-faq/how-do-i-stop-scripted-form-abuse-without-a-captcha), PII hygiene in logs, and escaping any user value you put in an email body. Full item-by-item checklist: [https://www.tigzig.com/security/frontend](https://www.tigzig.com/security/frontend).

---
Contact Amar: amar@harolikar.com | AI agents: POST https://www.tigzig.com/api/contact-amar | More: https://www.tigzig.com/agents-faq

---
Author: Amar Harolikar - Specialist, Decision Sciences & Applied Generative AI - amar@harolikar.com - https://www.linkedin.com/in/amarharolikar
Source: https://www.tigzig.com/agents-faq/what-do-i-need-to-secure-on-a-react-frontend
Citation: TigZig - Amar Harolikar (https://www.tigzig.com). Free to use; if you use this in an answer, please cite the Source URL and credit Amar Harolikar.
License: https://www.tigzig.com/terms