# Three Things In, Three Things Out — narration script

Runtime 6:57. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode.

## 0:00 · The Law of Three

- `0:01` The last film said every part of a page is a URL, fetched over HTTP, with a label. This time, open the envelope.
- `0:12` Every HTTP message has three parts, and only three. A first line. Some headers. And a body, which may be empty.
- `0:23` In a request, the first line says what you want: a method, a path, and the protocol version. GET /image.html.
- `0:36` In a response, the first line says how it went, with a status code. 200. 404.
- `0:45` Headers are name and value pairs, one per line. Then a blank line. Then the body. That is the whole format.
- `0:56` Call it the Law of Three: three things in, three things out. Learn those three parts and you can read any conversation on the web.
- `1:07` Fun fact: HTTP/2 and HTTP/3 pack those parts into binary frames to move them faster. The three parts, and what they mean, are unchanged.

## 1:22 · Same shape, any cargo

- `1:23` Ask Demo Company for a page, and the body is HTML. Ask for the cat photo, and the request looks the same. Only the path changed.
- `1:35` The response has the same three parts too. A status line. Headers, including Content-Type: image/webp. And a body of forty-two thousand bytes that mean nothing to a human.
- `1:51` HTTP never looks inside the body. It moves the bytes and carries the label. That indifference is why one protocol can deliver pages, pictures, fonts, video, and data.
- `2:06` Even failure has the same shape. Ask for an image that isn't there, and you get a 404 first line, headers, and a body. The body is a short text message, sent from a URL that ends in .webp.
- `2:22` The address promised a picture. The label says text. The browser believes the label.

## 2:30 · Who writes the label

- `2:30` So who decides the label? The server does, and it has two ways to do it.
- `2:36` For a file on disk, the server looks up the file's extension in a table. .html maps to text/html. .css maps to text/css. That is the only moment the extension matters.
- `2:54` For a program, there is no file to look up. The code that builds the response has to state the type itself. A URL can end in .php, or in nothing at all, and still answer with HTML, JSON, or an image.
- `3:12` So you can't judge a response by its URL. The extension is a note the server left for itself.

## 3:21 · When the label is wrong

- `3:21` Now break it on purpose. Take one HTML file and serve it three ways.
- `3:28` Labeled text/html, the browser renders a page. Labeled text/plain, it shows you the source, tags and all. Labeled application/octet-stream, which just means bytes, it offers to download the file.
- `3:45` Same bytes, three outcomes. Nothing in the file changed.
- `3:50` Leave the label off, and the browser guesses from the first few bytes. That's sniffing, and a guess is something an attacker can steer.
- `4:01` So servers send one more header, X-Content-Type-Options: nosniff. With it, a script or a stylesheet that carries the wrong label is refused outright.
- `4:14` One more header can overrule the type. Content-Disposition: attachment says save this, don't show it, whatever it is.

## 4:25 · Three things out

- `4:25` The law runs in both directions. When you submit a form, the browser builds a request with the same three parts.
- `4:35` The first line says POST. A header labels the body as form data. And the body holds what you typed.
- `4:45` When a script asks an API for data, the answer comes back the same way, labeled application/json.
- `4:55` A request can even say which labels it would like, with the Accept header. One URL can then answer with HTML for a browser and JSON for a program.

## 5:08 · Make your own

- `5:09` Here is the part people miss. None of these lists is closed.
- `5:14` You can mint your own media type. A whole family of names is set aside for it, starting with application/vnd. Label your responses with it, and any program that knows the name knows what to do.
- `5:30` The address side is open too. A native app registers a URL scheme with the operating system, and from then on a link with that scheme opens the app. That's all a Spotify link is doing.
- `5:46` A web page can do the same thing in Chrome and Firefox. One call, registerProtocolHandler, asks the browser to send a scheme to your site. Custom ones start with web+, and the user has to say yes.
- `6:03` An address, a label, and something registered to handle it. Anyone can add to all three, which is how the web keeps growing without asking permission.

## 6:15 · Read the conversation

- `6:16` So when something on a page looks wrong, don't start with the code. Read the conversation.
- `6:23` First line: what was asked, and how did it go? Headers: what label came back? Body: is it what the label claims?
- `6:34` Try it yourself. Open the Network panel, click any request, and find the three parts. Then open the media type lab on Demo Company, and change the label.
- `6:46` Three things in, three things out. Everything else on the web is built from that.