Web Security

Why this stage matters

The frontend is where user input enters your system and where tokens live. A single XSS bug can leak every user's session. AI tools also produce insecure code regularly, so you need to recognise it.

What to learn

1. Must know

   XSS, CSRF & Injection

   Mark as done

   How cross-site scripting happens, why frameworks escape by default, the danger of innerHTML-style APIs, and how SameSite cookies stop CSRF.

   You're done when

   • You never render user HTML without sanitising it (for example with DOMPurify).
   • You can explain XSS and CSRF to a teammate.

   Resources

   • OWASP Top 10Docs
   • OWASP Cheat Sheet SeriesDocs
2. Must know

   CORS, CSP & HTTPS

   Mark as done

   Why the browser blocks cross-origin requests (and why the fix is on the server), Content Security Policy, and security headers.

   You're done when

   • You can read a CORS error and say exactly which header is missing.
   • You have added a CSP to a project.

   Resources

   • MDN — CORSDocs
   • MDN — CSPDocs
3. Must know

   Authentication on the Frontend

   Mark as done

   Sessions vs JWTs, where to store tokens (httpOnly cookies over localStorage), refresh flows, OAuth and social login, and never trusting the client.

   You're done when

   • You can explain why access tokens in localStorage are risky.
   • You know that hiding a button is not authorization; the server must check.

   Resources

   • OWASP — Authentication Cheat SheetDocs
4. Learn next

   Dependencies & Secrets

   Mark as done

   npm supply-chain attacks, auditing dependencies, keeping secrets out of the client bundle, and which environment variables are public.

   You're done when

   • You never put a secret key in a NEXT_PUBLIC_ or VITE_ variable.

Common mistakes

• 'Fixing' CORS by disabling it in the browser or with a random proxy.
• Trusting client-side validation for security.