Part 1 · Foundations Before System Design

HTTP & HTTPS Explained: Methods, Status Codes and TLS

HTTP is the shared language of the web: a method and URL in, a status code and body out. HTTPS wraps it in TLS so nobody on the path can read or change it. Methods, idempotency, status codes, HTTP/1.1 vs 2 vs 3, and the TLS handshake.

Lesson 0312 min readbeginner#http#tls#web

On this page

  1. The Problem
  2. The Core Idea
  3. How It Works
  4. Trade-offs
  5. In the Real World
  6. Interview Questions
  7. Key Takeaways
  8. Further Reading

The Problem

TCP gets bytes from one computer to another reliably. But bytes alone do not mean anything. The browser and the server need a shared language, a way to say things like:

  • "Give me this page."
  • "Here is a new order."
  • "You are not allowed to see that."
  • "Try again later."

That language is HTTP (HyperText Transfer Protocol). HTTP is a set of rules for how a client (such as a browser) asks a server for something and how the server answers.

There is a second problem too. Your data passes through Wi-Fi routers, internet providers and many other networks. Anyone on the way could read your password or change the page you receive. HTTPS is HTTP with encryption added. Encryption means scrambling data so that only the right people can read it. The encryption protocol is called TLS.

Almost every system you design will talk HTTP. Load balancers (servers that share requests between many servers), CDNs (servers around the world that keep copies of files near users), caches (fast stores of saved answers) and API gateways (one front door for many backend services) all depend on it. Using HTTP correctly is a big part of good system design.

The Core Idea

HTTP is like ordering at a restaurant:

  • You (the client) make a request: "One pizza, no onions, please."
  • The waiter (the server) gives a response: “Here is your pizza” (success), “We are out of pizza” (not found), or “The kitchen is on fire” (server error).

Every request says what action you want (the method) and what thing you want it on (the URL). Every response starts with a status code. This is a number that tells you how the request went.

HTTPS is the same conversation in a sealed, tamper-proof envelope. Only you and the restaurant can read it, and you have checked the restaurant's ID to make sure it is really them.

How It Works

What an HTTP request looks like

HTTP is easy to read. Here is a real request:

HTTP
POST /api/orders HTTP/1.1Host: shop.example.comContent-Type: application/jsonAuthorization: Bearer eyJhbGciOi...Content-Length: 33{"productId": 991, "quantity": 2}
  • First line: the method (POST, the action), the path (/api/orders, the thing) and the HTTP version.
  • Headers: extra information about the request, written as Key: Value pairs.
  • Blank line, then the body (the data).

And the response:

HTTP
HTTP/1.1 201 CreatedContent-Type: application/jsonLocation: /api/orders/5521{"id": 5521, "status": "pending"}

Try it yourself: curl -v https://example.com shows every line. (curl is a command-line tool that sends HTTP requests.)

HTTP methods

MethodMeaningExample
GETRead somethingGET /products/991
POSTCreate something or trigger an actionPOST /orders
PUTReplace something completelyPUT /users/7 with the full profile
PATCHChange part of somethingPATCH /users/7 with {"city": "Pune"}
DELETERemove somethingDELETE /cart/items/3
HEADLike GET, but headers onlyCheck whether a file changed
OPTIONS"What am I allowed to do here?"Used by browsers for CORS checks (explained below)

A resource is the thing a URL points to, such as a user or an order. Three properties of methods matter a lot in system design:

  • Safe means the method does not change anything on the server. GET and HEAD are safe, so crawlers (programs that visit many pages) and caches can call them freely.
  • Idempotent means doing it once or ten times gives the same final result. (Like pressing the "lift up" button in an elevator: pressing it again does nothing new.)
    • GET, PUT and DELETE are idempotent. Deleting item 3 twice still leaves item 3 deleted.
    • POST is not. Sending "create order" twice may create two orders.
  • Cacheable means the response can be saved and reused later. GET responses usually are.

Why idempotency matters: networks fail. Say your app sends "pay ₹500" and the connection drops before the response arrives. Did the payment go through? If the request is idempotent, you can simply send it again. If it is a plain POST, sending it again might charge the customer twice. Companies like Stripe solve this with an idempotency key: a unique ID that you send with the request, so the server can see that a repeat is the same request. We cover this in a later lesson.

Status codes

A status code is a three-digit number in the response. The first digit tells you the category:

RangeMeaningThink of it as
1xxInformational"Hold on…"
2xxSuccess"Done!"
3xxRedirect"It is over there."
4xxClient error"You did something wrong."
5xxServer error"We did something wrong."

The ones you will use most:

  • 200 OK: success.
  • 201 Created: a new thing was created (often with a Location header pointing to it).
  • 204 No Content: success, with nothing to return (common for DELETE).
  • 301 Moved Permanently: the URL has changed for good. Browsers and search engines remember the new one.
  • 302 Found / 307 Temporary Redirect: go there for now.
  • 304 Not Modified: "your saved copy is still good", so no body needs to be sent. This saves a lot of bandwidth (the amount of data you can send).
  • 400 Bad Request: the input is broken (bad JSON, missing field).
  • 401 Unauthorized: "I do not know who you are". You need to log in. (The name is misleading: it is really about authentication, which means proving who you are.)
  • 403 Forbidden: "I know who you are, but you are not allowed". (This is about authorization, which means what you are allowed to do.)
  • 404 Not Found: no such thing.
  • 409 Conflict: clashes with the current state (for example, that username is taken).
  • 429 Too Many Requests: you hit a rate limit (a cap on how many requests you may send in a time). Slow down.
  • 500 Internal Server Error: something unexpected went wrong in the server's code.
  • 502 Bad Gateway: a proxy (a server that passes requests on for another server) or a load balancer got a bad answer from the server behind it.
  • 503 Service Unavailable: overloaded or under maintenance. Try later.
  • 504 Gateway Timeout: a proxy or load balancer waited too long for the server behind it.

When you debug problems on a live system, 502, 503 and 504 point to different problems:

  • 502: the app crashed or returned garbage.
  • 503: there are no healthy servers, or the app is overloaded.
  • 504: the app is too slow.

Important headers

  • Content-Type: what format the body is in (application/json, text/html).
  • Authorization: who you are (a token or login details). A token is a secret string that proves your identity.
  • Cache-Control: caching rules, for example max-age=3600 means "you can reuse this for 3,600 seconds (one hour)".
  • ETag / If-None-Match: a fingerprint (a short code made from the content). The browser sends it back, and if nothing changed the server replies 304.
  • Retry-After: sent with 429 or 503, tells the client when to try again.
  • Location: where the new or redirected thing is.
  • X-Forwarded-For: added by proxies and load balancers so the app knows the real client IP.

HTTP is stateless, and cookies add memory

Stateless means the server keeps no memory between requests. Each HTTP request stands alone. The server does not remember that you logged in a moment ago.

A cookie is a small piece of text that the browser stores and sends back to the server. It fixes this problem. The server sends Set-Cookie: session=abc123, and the browser sends Cookie: session=abc123 with every later request to that site. We look at sessions, cookies and tokens in more detail in the security series.

CORS in one paragraph

Browsers stop a web page on site-a.com from reading responses from api.site-b.com unless site-b clearly allows it. This rule is the same-origin policy. An origin is the combination of protocol, domain and port. The rule protects you from bad sites that try to read your bank data. CORS (Cross-Origin Resource Sharing) is how a server says "requests from site-a.com are OK", using headers like Access-Control-Allow-Origin. If you have built a React frontend and a separate API, you have probably seen a CORS error.

HTTP versions: 1.1, 2 and 3

HTTP/1.1 (1997)

  • Text-based. A connection can be reused (keep-alive), but it handles one request at a time.
  • Browsers open about 6 connections per site to get around this limit.
  • Developers used tricks to need fewer requests, such as bundling all JS into one file and combining icons into one "sprite" image.

HTTP/2 (2015)

  • Binary instead of text (computers read it faster, but people cannot read it directly).
  • Multiplexing means sending many things at once over one path. Here, many requests and responses share one connection at the same time.
  • Headers are made smaller (compressed) with a method called HPACK.
  • The problem that remains: it still runs on TCP, so one lost packet blocks all the streams (this is TCP head-of-line blocking, from the last lesson).

HTTP/3 (2022)

  • Runs on QUIC over UDP (QUIC is a modern protocol built on UDP, from the last lesson).
  • A lost packet only delays the stream it belongs to.
  • Faster connection setup, and better on mobile networks.
HTTP/1.1 (1997)
  • •One request at a time per connection
  • −Browsers open ~6 connections per site to cope
  • −Text headers repeated on every request
Use whenStill everywhere; fine behind a CDN
HTTP/2 (2015)
  • +Many requests multiplexed on one connection
  • +Binary framing and compressed headers (HPACK)
  • −Still TCP: one lost packet stalls every stream
Use whenThe default for most sites and APIs today
HTTP/3 (2022)
  • +Runs on QUIC over UDP
  • +A lost packet only delays its own stream
  • +Faster setup; survives network switches
Use whenMobile users on weak or changing networks gain the most
Three generations of HTTP. Each one removes a waiting line the previous one had. · compare

HTTPS and TLS

HTTPS = HTTP + TLS (Transport Layer Security). TLS is a protocol that protects a connection with encryption. It gives you three things:

  1. Confidentiality. Nobody in the middle can read the data.
  2. Integrity. Nobody can secretly change it on the way.
  3. Authentication. You are really talking to yourbank.com, not a fake site.

Two kinds of encryption working together

  • Symmetric encryption uses one shared secret key to lock and unlock the data (for example, AES). A key is a secret number used to scramble and unscramble data. Symmetric encryption is very fast. The problem: how do two strangers agree on a secret key over a public network?
  • Asymmetric encryption uses a key pair: a public key (shared with everyone) and a private key (kept secret). It is slower, but it solves the "strangers" problem.

TLS uses asymmetric crypto during the handshake to safely agree on a key, then switches to fast symmetric encryption for the actual data.

Here is a comparison. Asymmetric encryption is like a padlock that anyone can snap shut but only the owner can open. You use it once to send a secret code safely. From then on, you both use that code to talk quickly. Difference in one line: symmetric uses one key and is fast, asymmetric uses two keys and is slow.

Certificates: proving who you are

How do you know the public key really belongs to yourbank.com? Through a certificate. A certificate is a digital ID card that says "this public key belongs to yourbank.com". It is signed by a trusted Certificate Authority (CA), a company that checks who owns a domain and vouches for it.

  1. 1
    Root CA
    pre-installed in your OS or browser — trusted by default
  2. 2
    Intermediate CA
    lets the root CA keep its very valuable key offline
  3. 3
    yourbank.com certificate
    contains the site's public key, domain name and expiry date
The chain of trust. Your browser only trusts the top of the chain; each link vouches for the next one. · flow

Your browser checks:

  • Is this chain signed by a CA I trust?
  • Has the certificate expired?
  • Does it match the domain I typed?

If any check fails, you see a big warning page.

The TLS 1.3 handshake

step 1 / 6
Browser
Server
  1. ClientHello + key share
    “I support these ciphers (ways to encrypt); here is my half of the key”
  2. ServerHello + key share
    “Here is my half”
  3. Certificate + Finished
    proof it owns yourbank.com's private key
  4. Both sides now compute the same session key (asymmetric → symmetric)
  5. encrypted GET /account
    fast symmetric encryption (AES) from here on
  6. encrypted 200 OK
A TLS 1.3 handshake. One round trip, then everything is encrypted. · sequence · step through
  • TLS 1.3 needs just one round trip (one trip to the server and back). The older TLS 1.2 needed two.
  • On a repeat visit, TLS 1.3 can even send data immediately ("0-RTT"). But an attacker could copy and send that data again (a replay), so it should only be used for safe requests like GET.

Add it all up for a brand-new HTTPS connection over TCP: 1 round trip (TCP) + 1 round trip (TLS 1.3) + 1 round trip (HTTP request and response) = about 3 round trips before the first byte of the page. (This does not count the DNS lookup.) At 100 ms per round trip, that is 300 ms of pure waiting. This is why connection reuse, CDNs and HTTP/3 matter.

Where to "terminate" TLS

To terminate TLS means to decrypt the traffic at some point. In a real system, you choose where the encryption is removed:

  • At the load balancer (most common). The load balancer (LB) decrypts the traffic, reads the HTTP (so it can route by URL), and forwards it to the app servers. This is simpler, and the certificates live in one place.
  • Re-encrypt to the backend. The LB decrypts, then encrypts again before it sends the data to the app servers. This is safer inside your network and is often required in finance and healthcare.
  • Passthrough. The LB does not decrypt at all; the app servers do. The downside is that the LB cannot see URLs or headers.

HSTS

Even with HTTPS, a user might type http://yourbank.com. That first plain-text request can be intercepted. HSTS (HTTP Strict Transport Security) is a response header that tells the browser: "for a set time (often a year), only use HTTPS for this site".

1 RTT
TCP handshake
100 ms
1 RTT
TLS 1.3 handshake
100 ms (TLS 1.2: 2 RTT)
1 RTT
request + response
100 ms
≈ 300 ms
before the first byte
why connection reuse, CDNs and HTTP/3 matter
The latency bill for the first byte of a brand-new HTTPS page, at 100 ms per round trip. · numbers
Debugging 5xx errors

502 — the app crashed or sent a broken answer back to the proxy. 503 — no healthy servers, or the app is refusing some requests because it is overloaded. 504 — the app was too slow, so the proxy gave up waiting (a timeout). These need three different fixes, so return the right code.

Trade-offs

  • HTTP/2 and HTTP/3 make pages faster but make servers and proxies more complex. Some older tools do not support them.
  • TLS adds a small CPU cost and some handshake latency (waiting time). On modern hardware the CPU cost is tiny, and the latency is the real cost. Reusing connections mostly removes it.
  • Terminating TLS at the load balancer is simple and lets it route smartly, but traffic inside your network is then not encrypted unless you re-encrypt.
  • Long cache times (Cache-Control: max-age) make sites fast but make updates slow to reach users. To get both, put a version in the file name, like app.3f2a.js. A new version has a new name, so it is never served from the old cache.
  • Choosing status codes: returning 200 with {"error": "..."} in the body feels easy, but it breaks monitoring, caching and the retry logic in clients. Use the real codes.

In the Real World

"Not Secure" in Chrome. Since 2018, Chrome labels every plain HTTP page as "Not secure". Together with free certificates, this moved most of the web to HTTPS within a few years.

Let's Encrypt is a non-profit certificate authority that gives out free certificates, and tools like Certbot renew them automatically. It issues certificates for hundreds of millions of websites. Its certificates are short-lived (90 days), so automatic renewal is a must. This is good, because expired certificates are a classic cause of outages. In February 2020, Microsoft Teams went down for hours because an authentication certificate expired. In December 2018, millions of O2 mobile customers in the UK lost data service after an expired certificate in Ericsson's network software.

Stripe's API is a well-known example of good HTTP design. It uses proper status codes (402 when a card is declined, 429 for rate limits), clear JSON error bodies, and an Idempotency-Key header so clients can safely retry payments.

GitHub's API returns ETag headers. If your app sends back If-None-Match and nothing has changed, GitHub replies 304 Not Modified, and these conditional requests do not count against your rate limit. This is a real example of HTTP caching saving money on both sides.

Google and Cloudflare were early to use HTTP/2 and HTTP/3. Much of the traffic from Chrome to Google services now uses QUIC.

Interview Questions

Q1What is the difference between PUT, PATCH and POST?

PUT replaces a resource completely and is idempotent. PATCH changes part of it (it is not guaranteed to be idempotent, though it often is). POST creates something or triggers an action and is not idempotent, so sending it twice may create two orders.

Q2Why does idempotency matter so much?

Networks can fail after a request is sent but before the response arrives, so a client must try again without knowing if the first attempt worked. Idempotent operations are safe to repeat. For operations that are not idempotent, like payments, the client sends an idempotency key. The server uses it to recognise the repeat and ignore the duplicate.

Q3401 vs 403?

401 Unauthorized means “I do not know who you are” — log in first. 403 Forbidden means “I know who you are, and you are not allowed to do this.”

Q4How does TLS use both asymmetric and symmetric encryption?

Asymmetric cryptography (the key shares plus the certificate's key pair) lets two strangers agree on a shared secret and proves the server's identity. It is slow, so after the handshake both sides switch to fast symmetric encryption, such as AES-GCM, with that secret for the real data.

Q5Where would you terminate TLS in a web architecture, and why?

Usually at the load balancer or the CDN edge. The certificates live in one place, and the balancer can read the HTTP to route by path and header. In regulated industries (such as finance), you encrypt again from the balancer to the backends. You use passthrough only when the backend itself must hold the keys.

Key Takeaways

  • HTTP is a simple request/response language: a method + URL in the request, a status code + body in the response.
  • Know which methods are safe and idempotent. That is what makes retries safe or dangerous.
  • Status codes are signals for clients, caches and monitoring. 502, 503 and 504 point to different problems.
  • HTTP/2 multiplexes many requests over one connection. HTTP/3 moves to QUIC to avoid TCP's head-of-line blocking.
  • HTTPS = HTTP + TLS: encrypted, tamper-proof, and verified through certificates. TLS 1.3 needs only one round trip, and most systems terminate TLS at the load balancer.

Further Reading

  • MDN Web Docs: the HTTP overview, methods, status codes, caching and CORS guides
  • High Performance Browser Networking by Ilya Grigorik (chapter 4 on TLS, and the chapters on HTTP/1.1 and HTTP/2)
  • RFC 9110 (HTTP semantics) and RFC 8446 (TLS 1.3)
  • "The Illustrated TLS 1.3 Connection" (every byte of a real handshake, explained)

Published by Jainik · Last updated · How these lessons are made

Keep learning

Related series