FSD Frontend System Design

Part II — The Shield

3 Security

GoalKnow the top frontend attack surfaces and the header, config, or code change that closes each one.

  1. 3.1 Security Overview Everything the browser receives is attacker-reachable — your job is to shrink what a breach can reach. Attack surface map of a browser app · 12 min
  2. 3.2 Cross-site Scripting (XSS) Untrusted text becomes executable code, and that code owns the user's session. Stored vs Reflected vs DOM-based flows · 18 min
  3. 3.3 iFrame Protection Two problems: who may frame you, and what the frames you embed are allowed to do. Clickjacking overlay, side view · 14 min
  4. 3.4 Security Headers Six response headers that close whole attack classes without touching application code. Header → attack blocked table + CSP anatomy · 17 min
  5. 3.5 Client-side Security The client is fully controlled by the user — it can enforce nothing and keep no secret. What the user can change vs what the server must re-check · 15 min
  6. 3.6 Secure Communication (HTTPS) TLS gives you three things at once: encryption, integrity, and proof of who you're talking to. TLS 1.3 handshake + what each guarantee stops · 15 min
  7. 3.7 Dependency Security You wrote 5% of the code you ship — the other 95% is your attack surface too. Dependency tree with one compromised node · 15 min
  8. 3.8 Compliance & Regulation Consent gates data collection, and the frontend is where that gate is actually built. Data flow with a consent gate · 13 min
  9. 3.9 Input Validation and Sanitization Validate shape on the way in, escape by context on the way out — they are different jobs. Input → validate → store raw → escape on output · 15 min
  10. 3.1 Server-Side Request Forgery (SSRF) Your server fetches a URL the attacker chose, from inside your trusted network. Server pivoting from the public internet into private IPs · 14 min
  11. 3.11 Server-side JavaScript Injection (SSJI) User input reaches an evaluator on your Node server, and now they own the process. Injection path from request body to process control · 13 min
  12. 3.12 Feature Policy | Permissions-Policy Switch off browser capabilities your app never uses — for your code and every frame you embed. Capability gate per origin and per frame · 12 min
  13. 3.13 Subresource Integrity (SRI) Pin a cryptographic hash to every CDN script, so altered code simply refuses to run. Hash comparison at load time · 11 min
  14. 3.14 Cross-Origin Resource Sharing (CORS) The browser blocks cross-origin reads by default; CORS is the server's way of granting an exception. Preflight OPTIONS sequence + origin comparison · 17 min
  15. 3.15 Cross-Site Request Forgery (CSRF) Another site makes the user's browser send an authenticated request — cookies attach automatically. Attack flow + SameSite and token defences · 16 min

Capstone

Write a Content-Security-Policy for a React app that loads Google Fonts, Stripe Checkout, and Sentry — then explain every directive.