🔒 Frontend Security Essentials
XSS — Cross-Site Scripting
Attacker injects malicious scripts that run in the victim's browser.
- ⚠Reflected XSS — script in URL parameter, reflected in response
- ⚠Stored XSS — script stored in DB, served to all users
- ⚠DOM XSS — script injected via client-side JS (innerHTML, eval)
Prevention:
- ✓Never use innerHTML/dangerouslySetInnerHTML with untrusted data
- ✓Sanitize HTML: DOMPurify before rendering user content
- ✓Content Security Policy (CSP) header — whitelist allowed sources
- ✓React auto-escapes JSX — stay in JSX, do not bypass it
CSRF — Cross-Site Request Forgery
Attacker tricks the user's browser into sending an authenticated request to your server.
- ✓SameSite=Strict/Lax cookie attribute (modern fix)
- ✓CSRF token — server generates, client sends in header
- ✓Check Origin/Referer headers on server
- ✓Do not use GET for state-changing operations
// Send CSRF token with requests axios.defaults.headers.common["X-CSRF-Token"] = getCsrfToken();
Content Security Policy (CSP)
<!-- Via HTTP header (preferred) or meta tag --> Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://cdn.example.com; connect-src 'self' https://api.example.com; frame-ancestors 'none';
Nonce-based CSP is best — no unsafe-inline, each inline script gets a unique nonce.
Auth Patterns
JWT in HttpOnly cookie Most secure — JS can't read it, protected from XSS
JWT in localStorage Convenient but XSS can steal it ❌
Session cookie Server-side session, stateful. SameSite + HttpOnly.
OAuth 2.0 / PKCE For third-party login. Use PKCE flow for SPAs (no client secret)
Refresh tokens Short-lived access token + long-lived refresh token (rotation)
Other Security Headers
X-Content-Type-Options: nosniff Prevent MIME sniffing attacks
X-Frame-Options: DENY Prevent clickjacking (now: frame-ancestors 'none' in CSP)
Strict-Transport-Security Force HTTPS (HSTS)
Referrer-Policy: no-referrer Do not send referrer URL to other origins
Permissions-Policy Restrict browser features (camera, location, mic)
Input Validation & Other Tips
- ✓ Validate on client (UX) + server (security) — never just client
- ✓ Avoid eval(), new Function(), setTimeout(string)
- ✓ Use textContent instead of innerHTML for plain text
- ✓ Subresource Integrity (SRI) for 3rd party scripts/styles
- ✓ Keep dependencies updated — audit with npm audit
- ✓ Don't expose API keys in client-side JS (use env vars + server proxy)