Frontend Security

Why client-side security matters, what the course covers, and two real-world incidents — the 2018 British Airways Magecart breach and the 2024 polyfill.io supply chain attack — that set the stage for every topic that follows.

How XSS works, the difference between stored, reflected, and DOM-based variants, and how to trace a payload from its source through to the sink. Covers contextual output encoding, safe DOM APIs, and sanitization patterns across all major frameworks.

React, Angular, Vue, and Svelte protect you by default, but each exposes specific escape hatches that reintroduce XSS. This module shows exactly where those traps are — `dangerouslySetInnerHTML`, `bypassSecurityTrustHtml`, `v-html` — and how to use them safely with DOMPurify.

How Content Security Policy works at the browser level, how to craft a strict nonce-based policy, and how to roll one out safely using report-only mode without breaking production. Covers common misconfigurations and how to evaluate an existing policy for weaknesses.

A browser-enforced layer that blocks raw strings from reaching dangerous DOM sinks. Learn how to create sanitizer-backed policies, integrate Trusted Types with React, Angular, Vue, and Next.js, and migrate an existing codebase incrementally using the four-step report-then-enforce approach.

The `Secure`, `HttpOnly`, and `SameSite` attributes in depth — what each one protects against, how SameSite context is determined across subdomain architectures, and how to configure secure cookies and security headers in Express, Next.js, and Nuxt.

How attackers use transparent overlaid iframes to hijack authenticated clicks, how to verify your own site is vulnerable, and how to prevent framing with `frame-ancestors` and `X-Frame-Options` across Nginx, Apache, Vercel, Netlify, and Cloudflare Workers.

The difference between the Same-Origin Policy and CORS, how preflight requests work, and the misconfigurations — origin reflection, wildcards with credentials — that turn a CORS policy into a data exfiltration path. Covers building a correct origin allowlist and combining CORS with SameSite cookies as defense-in-depth.

Why every CDN-hosted script is a supply chain risk, how SRI lets the browser verify a resource before executing it, and how to generate and apply integrity hashes. Covers build-tool integration, the `crossorigin` attribute requirement, and how SRI combines with CSP for layered protection.

How `window.postMessage` enables cross-origin communication and how missing origin validation on either end turns it into an attack vector. Covers correct origin checking for receivers, strict `targetOrigin` for senders, and auditing an existing codebase for unsafe usage patterns.

How the browser's automatic cookie-sending behaviour enables Cross-Site Request Forgery, and how to shut it down using synchronizer tokens, double-submit cookies, SameSite cookie attributes, and Fetch Metadata headers (`Sec-Fetch-Site`, `Sec-Fetch-Mode`) as a server-side signal.

How Magecart-style attacks compromise a trusted third-party to reach thousands of sites at once. Covers auditing your script inventory, applying SRI and CSP to constrain what external code can do, sandboxing low-trust widgets, and deciding when self-hosting is worth the overhead.

The security trade-offs between `localStorage`, `sessionStorage`, and `HttpOnly` cookies for token storage, how to implement OAuth 2.0 with PKCE correctly, and when the Backend for Frontend pattern is the right call to remove client-side token exposure entirely.