Web Security for Frontend Devs

The foundation every frontend dev must own: what an origin is, what the Same-Origin Policy protects (and what it does not), how cookies and credentials cross the wire, and the mental model for the whole series — with exercises.

Cross-Site Scripting (XSS) for frontend devs: why it tops the threat list, stored vs reflected vs DOM-based, dangerous sinks, textContent vs DOMPurify, escaping contexts, Trusted Types, and defense-in-depth — with exercises.

How Content-Security-Policy contains XSS even when sanitization fails: directives, nonces, strict-dynamic, report-only rollout, Trusted Types, and a starter strict policy — with exercises.

CSRF abuses the gap SOP leaves open: the browser sends cookies cross-origin but blocks reading the reply. SameSite cookies, anti-CSRF tokens, Origin checks, and layered defenses — with exercises.

Where to store session and auth tokens in the browser: httpOnly cookies vs localStorage vs in-memory, JWT pitfalls, OAuth PKCE + BFF for SPAs, Set-Cookie hardening, and strict TypeScript patterns — with exercises.

CORS is not a firewall for your API — it relaxes SOP so browsers can read cross-origin responses when the server opts in. Preflight, credentials, misconfigurations, and what CORS cannot fix — with exercises.

Clickjacking (UI redressing) tricks users into clicking your real UI through invisible iframes. Defend with CSP frame-ancestors, X-Frame-Options, safe embedding, and postMessage hygiene — with exercises.

HTTPS/TLS, HSTS, mixed content, the production security-header stack (CSP, COOP/COEP, Permissions-Policy, SRI), static-host `_headers` examples, and audit tooling — with exercises.

There are no secrets in the browser: env vars, source maps, and third-party scripts leak. Plus npm supply-chain threats — lockfiles, audit, SRI, typosquatting — and practical defenses, with exercises.

Series finale: why client validation is UX not security, open-redirect fixes, DOM risks beyond XSS, postMessage hygiene, and a practical frontend threat-model checklist tying Parts 1–9 — with exercises.