7 KiB
Week 1 — The Web Under the Hood
What is the web, actually?
When you open a browser and type https://google.com, it looks instant — but a lot happens between pressing Enter and seeing the page. Understanding that process is the foundation of everything we'll do this year, including how to break things and how to secure them.
The web runs on a protocol called HTTP (HyperText Transfer Protocol). A protocol is just an agreed-upon language — a set of rules two computers follow so they can understand each other. When your browser wants a page, it sends an HTTP request. The server reads it and sends back an HTTP response. That's it. The entire web is built on this loop.
The Request–Response Cycle
Every interaction on the web is a request followed by a response.
Browser Server
| |
| -- HTTP Request ----------> |
| | (server processes)
| <-- HTTP Response --------- |
| |
A request contains:
- Method — what action do you want?
- URL — where are you sending it?
- Headers — metadata about the request
- Body — optional data you're sending (e.g. a filled-in form)
A response contains:
- Status code — did it work?
- Headers — metadata about the response
- Body — the actual content (HTML, JSON, an image, etc.)
HTTP Methods
Methods tell the server what you want to do. The most common ones:
| Method | Meaning | Typical use |
|---|---|---|
GET |
Retrieve something | Load a page, fetch data |
POST |
Send something new | Submit a form, create a record |
PUT |
Replace something | Update a full resource |
PATCH |
Partially update | Change one field |
DELETE |
Remove something | Delete a record |
GET requests have no body — all information is in the URL. POST requests carry data in the body, which is why form submissions use POST, not GET (you don't want passwords in the URL).
HTTP Headers
Headers are key-value pairs that travel with every request and response. They carry metadata — information about the data, not the data itself.
Common request headers:
| Header | What it does |
|---|---|
Host |
Which domain you're requesting |
User-Agent |
What browser/client is making the request |
Cookie |
Sends stored cookies to the server |
Content-Type |
What format the body is in (e.g. application/json) |
Authorization |
Carries authentication credentials |
Common response headers:
| Header | What it does |
|---|---|
Content-Type |
What format the response body is in |
Set-Cookie |
Tells the browser to store a cookie |
Location |
Used with redirects — where to go next |
Cache-Control |
How long the browser should cache the response |
Headers are also where a lot of security happens — we'll spend a whole week on security headers later in the course.
Status Codes
Status codes are three-digit numbers that tell you what happened. They're grouped by their first digit:
| Range | Category | Examples |
|---|---|---|
1xx |
Informational | 100 Continue |
2xx |
Success | 200 OK, 201 Created, 204 No Content |
3xx |
Redirection | 301 Moved Permanently, 302 Found |
4xx |
Client error | 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found |
5xx |
Server error | 500 Internal Server Error, 502 Bad Gateway |
The difference between 401 and 403 matters a lot in security: 401 means "you're not logged in", 403 means "you're logged in but you don't have permission." Confusing them is a common mistake.
What Does a Raw HTTP Request Look Like?
When your browser sends a request, it looks something like this:
POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 29
Cookie: session=abc123
username=user&password=1234
And the response might look like:
HTTP/1.1 302 Found
Location: /dashboard
Set-Cookie: session=xyz789; HttpOnly; Secure
Content-Length: 0
Notice the blank line between headers and body — that separator is part of the protocol.
HTTPS — The Secure Version
HTTP sends everything as plain text. Anyone sitting between your computer and the server (your ISP, someone on the same Wi-Fi, a router along the way) can read your requests and responses. That means passwords, cookies, everything.
HTTPS is HTTP with a layer of encryption on top called TLS (Transport Layer Security). Before any HTTP data is exchanged, the browser and server perform a TLS handshake — they agree on encryption keys without ever sending the keys in plaintext. After that, everything is encrypted.
From a developer's perspective, you write the same HTTP code — the encryption is handled transparently. But from a security perspective, the difference is enormous. We'll go deep on TLS in Block 4.
Key things HTTPS gives you:
- Confidentiality — nobody can read the data in transit
- Integrity — nobody can tamper with the data in transit
- Authentication — you're actually talking to the real server, not an impersonator
Cookies
Cookies are small pieces of data the server asks the browser to store and send back with every subsequent request to that domain.
Server → browser: Set-Cookie: session=abc123
Browser → server: Cookie: session=abc123 (on every future request)
This is how websites "remember" you're logged in — the session ID in the cookie identifies you to the server.
Cookies have attributes that control their behavior:
| Attribute | What it does |
|---|---|
HttpOnly |
JavaScript cannot access this cookie — protects against XSS |
Secure |
Only sent over HTTPS, never plain HTTP |
SameSite |
Controls when cookies are sent cross-site — protects against CSRF |
Expires / Max-Age |
When the cookie expires |
Cookie attributes are a big security topic — we'll revisit them multiple times throughout the year.
DevTools: Your Window Into HTTP
Every browser has Developer Tools (F12). The Network tab shows you every request and response your browser makes. You can see:
- The URL, method, and status code of every request
- All request and response headers
- The request body (e.g. form data)
- The response body
- Timing information
This is one of the most useful tools you'll use all year — both for building and for breaking things.
Key Takeaways
- The web is a request–response cycle over HTTP
- Requests have a method, URL, headers, and optional body
- Responses have a status code, headers, and optional body
- Headers carry metadata including cookies, content types, and security directives
- HTTPS = HTTP + TLS encryption; always use it
- Cookies persist state between requests and carry security-sensitive attributes
- DevTools Network tab shows you exactly what your browser is sending and receiving