The Browser Contract

A blog series

The Browser Contract: Auth, Storage, Security & HTTP

What happens between the address bar and your React app, and the safety choices interviewers like to ask about: storage, sessions vs JWT, XSS and CSRF, CORS, HTTP caching, status codes, rendering and Core Web Vitals.

Started 
2026
Lessons 
10
Reading 
~3 h

Contents

Every lesson has the same steps: what it is, how it works, a real example, common mistakes, then interview questions with answers you can say out loud.

  1. Lesson 00What Happens When You Type a URL (The Full Version)The full trip from pressing Enter to seeing pixels: DNS, TCP, TLS, HTTP, then reading the page and painting it. Caches skip most steps. Every other lesson in this series fits on this map.18 min
  2. Lesson 01Storage in the Browser: Cookies, localStorage, sessionStorage and IndexedDBHow long each one lasts, how big it can be, and who can read it: the tab, the site, the server or JavaScript. It ends with a table that answers: where should this data go?15 min
  3. Lesson 02Sessions vs JWT: Stateful vs Stateless LoginWhat a signed JWT is, how it is different from a plain session ID, and where “stateless” stops helping: logging out, expiry, refresh tokens and the claims you must check.20 min
  4. Lesson 03Where Do Tokens Live? XSS, CSRF and the Storage Trade-offlocalStorage lets XSS steal tokens. Cookies let CSRF attacks use you. Safe patterns: HttpOnly cookies with SameSite or CSRF tokens, access tokens kept in memory, and a backend-for-frontend.18 min
  5. Lesson 04CORS Explained: Same-Origin Policy, Preflights and CredentialsWhy CORS protects the browser and is not a firewall for the server, what makes a preflight request, and why you cannot use a wildcard origin together with credentials.15 min
  6. Lesson 05HTTP Caching: Cache-Control, ETags and the CDN in BetweenFresh or must-check, no-cache vs no-store, immutable for hashed files, stale-while-revalidate, and what a shared cache must never store.20 min
  7. Lesson 06HTTP Semantics Interviewers Ask: Methods, Idempotency, Status Codes, RedirectsSafe vs idempotent methods, 401 vs 403, 409, 422 and 429, and the 301/302/307/308 table. All based on the HTTP specification.15 min
  8. Lesson 07Frontend Security Checklist: XSS, CSP, Clickjacking and Supply ChaindangerouslySetInnerHTML, CSP nonces, frame-ancestors, Subresource Integrity and risky packages. Each one asks: what would you check in a code review?18 min
  9. Lesson 08Browser Rendering and the Event Loop in PracticeParse, style, layout, paint and composite. Also layout thrashing, and where tasks, microtasks and requestAnimationFrame fit.18 min
  10. Lesson 09Core Web Vitals for Engineers: LCP, INP and CLSWhat each metric measures, its “good” limit at the 75th percentile, why INP replaced FID, and the difference between field data and lab data.18 min

Glossary

42 terms used in this series. Inside any lesson, hover or tap a dotted term to see its meaning without leaving the page. Browse all terms →