Tutorial 3: Browsers, Servers, and Proxies

Unit 1 · Web architecture and protocols

Objectives

Not every response comes from the application

The browser is a client that sends requests, stores cache entries and cookies, executes scripts, and renders representations. An origin server owns the resource and application rules. A reverse proxy sits in front of one or more origins and can terminate TLS, route requests, compress responses, enforce limits, and serve cached content. A CDN distributes cacheable assets closer to users.

Browser -> DNS -> CDN or reverse proxy -> origin server -> database
Browser <- response headers and body <- cache or origin

Intermediaries must respect cache and authorization rules. A public response may be cached broadly, while a personalized response needs private or no-store policy. The Origin request header and CORS response headers govern whether browser JavaScript may read a cross-origin response; CORS is not an authentication mechanism.

Inspecting a request

Developer tools expose method, URL, status, timing, request headers, response headers, transferred size, and initiator. Compare a cache hit with a network fetch. Look for Age, ETag, Last-Modified, Cache-Control, and Vary when diagnosing freshness.

Exercises

  1. Draw a request path that includes a browser cache, CDN, reverse proxy, and origin.
  2. Decide whether a personalized dashboard response may be shared by a public CDN cache.
  3. Explain why allowing an origin in CORS does not grant database access.

Self-check

  1. What does a reverse proxy do?
  2. Why can a CDN reduce latency?
  3. What does CORS control?

Self-Check Quiz

1. Which component normally executes JavaScript and renders HTML?

Answer(A) The browser executes client code and renders the received representation.

2. Is CORS an access-control system for your API data?

AnswerCORS controls whether browser scripts may read responses across origins; it does not replace server authentication or authorization.

3. Why might a cache refuse to share a response?

AnswerThe response may be personalized, marked private or no-store, or vary based on request headers.

Homework

  1. Inspect one web request in browser developer tools and record its route through cache or network.
  2. Design cache headers for a public CSS asset and a private account page.
  3. Write a threat note explaining why a reverse proxy must preserve authorization context.
Sample answer

A public versioned CSS asset can use a long max-age and immutable naming. A private account page should use Cache-Control: private, no-store where appropriate. A proxy must forward identity and authorization context safely, avoid caching private responses for other users, and preserve the original request scheme and host only through trusted forwarding configuration.

👤