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.

Advanced track: how attacker __proto__ keys poison Object.prototype through unsafe merge and query parsing, the gadgets that turn pollution into XSS or auth bypass, and the defenses that stop both. With a live demo and exercises.

Advanced track: how injected id/name attributes overwrite the globals your JavaScript trusts — no script needed — why a script-blocking CSP does not stop it, and how to defend. With a live demo and exercises.

Advanced track: why allowlist CSPs get bypassed — JSONP and gadgets on trusted CDNs, open redirects, base-uri hijacks, scriptless exfiltration — and how a nonce + strict-dynamic policy stops them. With a simulator and exercises.

Advanced track: how cross-window messaging goes wrong — missing or substring origin checks, postMessage-to-DOM-XSS, and targetOrigin "*" leaks to popups — and the exact-origin allowlist that fixes it. With a simulator and exercises.

Advanced track: JWT attacks to recognize — alg:none, RS256→HS256 confusion, weak HMAC secrets, kid/jku injection, unchecked exp/aud/iss — why the browser must never trust a claim. With a forge/verify simulator and exercises.

Advanced-track finale: how path-confusion caching serves a private response to an attacker, how unkeyed input poisons a shared cache, and how open redirects chain into OAuth token theft and CSP bypass. With a simulator and exercises.

Bonus track: how a single npm install can run attacker code on your machine — lifecycle scripts, transitive deps, git prepare, bin shadowing — the signals to audit, and a full layered defense. With a live install simulator and exercises.

Bonus track: how a link you open can silently navigate your original tab to a phishing page via window.opener — why modern browsers mostly fixed it, where it still bites, and the safe-link defenses. With a live simulator and labs.

Bonus track: pastejacking rewrites what you copy, the 2024–25 ClickFix wave tricks users into pasting malware into a terminal, and hidden form fields harvest autofill data. The mechanisms, defenses, a live lab, and exercises.

Bonus track: why Spectre forced browsers to disable SharedArrayBuffer and precise timers, and how COOP + COEP + CORP let you safely re-unlock them. The headers, the gotchas when COEP breaks your CDN, a live simulator, and labs.

Bonus track: how an attacker site asks the victim browser one yes/no question about another site — via frame counting, error events, and timing — without reading any response. The oracles, the defenses, a live simulator, and labs.

Bonus track: why escaping, blacklists, and naive sanitizers fail on untrusted HTML, how mutation XSS resurrects payloads when the parser re-reads your clean string, and the right tools: DOMPurify and the native Sanitizer API.

Bonus track: every third-party widget you embed can submit forms, open popups, even navigate your whole tab. How the sandbox attribute flips that to deny-by-default, the allow-scripts + allow-same-origin footgun, and a safe pattern.

Bonus track: why the implicit flow is dead, how Authorization Code + PKCE stops code interception, why PKCE does nothing for token storage, and the BFF pattern that keeps tokens out of the browser. With a live PKCE simulator.

Bonus track: the WebSocket handshake carries the victim cookies and the browser never applies CORS to it — so any site can open an authenticated socket if the server skips the Origin check. The mechanism, the defenses, and a live simulator.

Bonus track: when a CDN is compromised, the script you ship to every user silently changes. SRI pins a cryptographic hash so the browser refuses to run tampered code — the mechanism, the crossorigin requirement, and a live hash simulator.

Bonus track: instead of remembering to sanitize at every sink, Trusted Types makes the browser reject raw strings at innerHTML, eval, and script.src — values must come from a registered policy. Enforce vs report-only, with a live simulator.