How Data Travels from Your Browser to the Server

When you enter the name of a website, within seconds, the site appears on your browser. You might wonder how your browser establishes a connection with the website. How does data travel from the browser to the server? Let’s explore the journey of data from your browser to the server where websites are hosted.

Typing the name of the website

Imagine you want to visit www.chaicode.com. You enter the name of website in the browser and hit the search, your browser starts the process of finding the website.

DNS Resolution : Finding the address

Every website has an IP address (a series of numbers separated by dots) which is the address of the website so that the browser can find it. This address is not known by the browser beforehand. To find the address, the browser performs the following steps:

1. Checks the Cache

   If you have already visited the website before, its IP address is stored in the cache. If stored, the browser directly accesses the website using this address. But if the IP address is not stored in the cache, then the browser follows the next step.

2. DNS Query

   Browser will send a DNS query(request) asking the DNS server, “ What is the IP address of this website? ”.

3. DNS Response

   The DNS server looks for the IP address and sends it back.

Establishing the connection : TCP 3-way Handshake

Now the browser know the IP address of the website, it needs to establish the connection using Transmission Control Protocol (TCP). Here’s the steps :

1. SYN :

   The browser sends the SYN "synchronize" request for the connection with the server.

2. SYN-ACK :

   When the server gets the SYN request, it then responds with a SYN-ACK message, telling the browser it received the request and is ready to form the connection.

3. ACK :

   Finally, when the browser gets the SYN-ACK message, it then responds with the ACK message, indicating it received the message and here’s the acknowledgment.

Securing the connection (If using HTTPS)

Here, HTTPS means Hyper Text Transfer Protocol Secure. When the website starts with https://, it means that the website is secure and needs to perform an extra TLS/SSL handshake to encrypt the website's data. This encryption ensures that the data exchange is private and secure. The steps of the handshake are:

1. Certificate Exchange :

   The server will send the certificate to the browser.

2. Key Agreement :

   Both the browser and server agree on the encryption keys to secure the data.

Sending the HTTP Request : Asking for Data

Once the connection is established, browser will send the HTTP request to the server asking for the webpage or resource.

What’s in the request ?

• Method : Indicates the type of action, such as GET(to retrieve the data) or POST(to send the data).

• URL/Path : Tells what resource is being requested (example, /index.html)

• Headers : It provides the extra information like type of browser, accepted formats, cookies, etc.

• Body(optional) : Contains the data for the method like POST when you submit the form.

Server Processing : Handling the Request

When the server gets the HTTP request, it does the following :

• Routing : It determines which part of the application handles the request.

• Processing : The server process the request by running the code, querying the database or reading the file.

• Generating the Response : When the process the completed, the HTTP response is generated which contain the status code (like 200 for success), headers and the content (JSON data, HTML, CSS or JavaScript).

Sending the HTTP Response : Data on the Way Back

After processing, the HTTP Response is send back to the browser over the same TCP connection.

Components of an HTTP response are

• Status Code : This tells the result (e.g., 200 OK, 404 Not Found)

• Headers : Contain the metadata such as content type, caching policies, etc.

• Body : Contains the actual data (e.g., HTML for webpage)

Rendering the Page : The Final Step

When the response is received by the browser,

• It parses the HTML, CSS and JavaScript.

• It builds and design the webpage for you to interact.

• If the browser need extra information, it sends the HTTP request for image, audio, etc. The same step is followed.

Conclusion

The journey of data from your browser to the server involves several intricate steps that work seamlessly to deliver the web content you request. From typing the website name to DNS resolution, establishing a secure connection, sending and receiving HTTP requests and responses, and finally rendering the webpage, each step plays a crucial role in ensuring a smooth and secure browsing experience. Understanding this process not only enhances our appreciation of the technology behind the internet but also highlights the importance of security protocols like HTTPS in protecting our data.