Hello, dear readers! Today I’m going to explain one of the most basic and fascinating concepts of the web world: what happens when you navigate to a URL in a browser and hit “Enter”. You probably do this every day without thinking much about it, but behind the scenes there is a lot of magic going on. Let’s dive into it!
What is a URL?
First of all, let’s clarify what a URL is. URL stands for Uniform Resource Locator and it is basically an address that tells your browser where to find the information you want on the Internet. A URL has different parts that have different meanings. For example:
In this URL, the first part https tells your browser which protocol to use for communication. A protocol is a set of rules that define how data is exchanged over the network. There are different protocols for different purposes, such as http, https, ftp, etc. In this case, https means that the communication will be secure and encrypted.
The second part example.com is called the domain name and it identifies the server that hosts the website you want to visit. A server is a powerful computer that stores web files and responds to requests from browsers. Each server has a unique address called an IP address that consists of four numbers separated by dots, such as 203.0.113.0. However, these numbers are hard to remember and type, so we use domain names instead.
The third part /page1 is called the path and it specifies which page or resource on the website you want to access. A website can have multiple pages or resources such as images, videos, scripts, etc., each with its own path.
What happens when you hit “Enter”?
Now that we know what a URL is made of, let’s see what happens when you hit “Enter” after typing it in your browser.
Step 1: DNS lookup
The first thing your browser does is to look up the IP address of the domain name using a service called DNS (Domain Name System). DNS is like a phone book for the Internet that maps domain names to IP addresses. Your browser contacts a DNS server (usually provided by your Internet Service Provider) and asks for the IP address of example.com. The DNS server responds with something like 203.0.113.0.
Step 2: TCP connection
The next thing your browser does is to establish a TCP (Transmission Control Protocol) connection with the server at 203.0.113.0. TCP is another protocol that ensures reliable and ordered delivery of data over the network. Your browser initiates a three-way handshake with the server:
- Your browser sends a SYN (synchronize) packet to the server asking for permission to start communication.
- The server replies with a SYN-ACK (synchronize-acknowledge) packet granting permission.
- Your browser sends an ACK (acknowledge) packet back confirming receipt.
This way, both your browser and the server agree on some parameters such as port numbers and sequence numbers for data transmission.
Step 3: HTTPS handshake
If your URL starts with https, then your browser also performs an HTTPS (Hypertext Transfer Protocol Secure) handshake with
the server before sending any data. HTTPS adds another layer of security on top of TCP by encrypting all data using SSL/TLS (Secure Sockets Layer/Transport Layer Security) protocols.
Your browser initiates an HTTPS handshake with these steps:
- Your browser sends a ClientHello message to the server indicating its supported SSL/TLS versions and cipher suites (encryption algorithms).
- The server replies with a ServerHello message choosing one SSL/TLS version and cipher suite from those offered by your browser.
- The server also sends its digital certificate signed by a trusted Certificate Authority (CA) proving its identity.
- Your browser verifies the certificate against its list of trusted CAs and checks if it matches with
example.com. - If everything checks out, your browser generates a random symmetric key for encryption and sends it to
the server encrypted with its public key. - The server decrypts this key using its private key and sends back an encrypted Finished message indicating readiness.
- Your browser decrypts this message using its symmetric key and sends back another encrypted Finished message confirming completion.
This way both your browser and
the server agree on an encryption key for secure communication.
Step 4: HTTP request
Now that your browser has established both TCP
and HTTPS connections, it’s time to send the actual HTTP (Hypertext Transfer Protocol) request to the server. The request contains the following information:
- The HTTP method (usually GET for retrieving data or POST for submitting data)
- The path of the resource you want to access (
/page1) - The HTTP version (usually HTTP/1.1 or HTTP/2)
- Additional headers that provide more information about your browser, the type of content it accepts, cookies, etc.
Here’s an example of an HTTP GET request:
`
GET /page1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Step 5: Server processing
Upon receiving the HTTP request, the server processes it and generates an appropriate response. This may involve querying databases, executing server-side scripts, or fetching static files, depending on the requested resource. Once the server has prepared the response, it sends it back to your browser over the established TCP and HTTPS connections.
Step 6: HTTP response
The server’s response is also an HTTP message with the following information:
- The HTTP version (e.g., HTTP/1.1 or HTTP/2)
- The status code indicating the result of the request (e.g., 200 OK for success, 404 Not Found for a missing resource)
- Additional headers providing more information about the server, the content type, the content length, etc.
- The actual content (HTML, images, videos, etc.) of the requested resource
Here’s an example of an HTTP 200 OK response:
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 12345
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
...
Step 7: Rendering the page
Now that your browser has received the response, it starts parsing the HTML content and rendering the page on your screen. This involves several sub-steps:
- The browser builds the DOM (Document Object Model), a tree-like structure representing the HTML elements and their hierarchy.
- The browser retrieves and applies CSS (Cascading Style Sheets) rules to style the DOM elements.
- The browser executes JavaScript code (if any) that may manipulate the DOM, fetch additional resources, or provide interactivity.
- The browser calculates the layout and position of each DOM element based on the CSS rules and the available screen space.
- The browser paints the final representation of the page on your screen, including images, videos, and other media elements.
Step 8: Closing the connection
Once the page is fully rendered, your browser may close the TCP and HTTPS connections to the server, unless you have enabled HTTP Keep-Alive or are using HTTP/2 multiplexing features that allow multiple requests and responses to share the same connection.
And that’s it! You’ve now seen the intricate dance of all the underlying events that occur every time you request more cat memes from a site…
Well, sort of 😬
In actuality, this is still a relatively high level view of all of the technologies, events, and protocols that make the internet possible. We didn’t cover a lot of interesting details that allow for each of the topics explained above to even be possible. But this is a blog post… not a book!
If you are interested in learning all of those fascinating details in a fun and engaging “comic book” style type of writing, then check out this book on How the Internet Really Works, which I highly recommend:
It’s amazing how much is going on behind the scenes, and understanding these details can help you appreciate the marvel of modern web technologies. So the next time you visit a website, remember the intricate ballet of protocols, connections, and data transfers that make it all possible.