Frontend Security Hygiene

Frontend is the front door of your app. If a hacker can run a script on your site, they can steal user passwords and credit cards. Security is not just a backend problem; it is an Architectural Requirement.

1. XSS (Cross-Site Scripting)

When a hacker injects a script into your page (usually via a user-generated comment or a URL parameter). React helps by sanitizing strings automatically, but you are still vulnerable if you use dangerouslySetInnerHTML without proper sanitization.

2. Content Security Policy (CSP)

The CSP is a "White List" for your browser. You can tell the browser: "Only download scripts from my domain and Google Analytics. Block everything else." This is the ultimate defense-in-depth against XSS.

3. Handling JWTs Safely

NEVER store sensitive tokens in localStorage. It is vulnerable to XSS. Use HTTP-Only Cookies. For the client side, keep the token in a Memory Variable and refresh it using a secure cookie-based endpoint.

4. Interview Mastery

Q: "What is an 'Evil' NPM package and how do you defend against it?"

Architect Answer: "A supply-chain attack. A legitimate package is sold to a hacker who adds an info-stealing script. To defend, I use 1) **npm audit** for known vulnerabilities, 2) **lockfiles** (`package-lock.json`) to ensure every dev uses the same exact version, and 3) **Sandboxed Dependencies** or specialized scanners in CI/CD to detect suspicious network calls from our own client-side code."