What is this about? An overview.
Applications like browsers make it look seamlessly easy to navigate through the web and load websites within seconds with nothing more than a couple of clicks or taps. However, in this article, we will be looking at the web not as the homo sapiens we are, but as the bytes of data that travel hence and forth with those clicks and taps. We'll see what happens between the instance you make a request on your browser to browse a website of your liking, and the instance you are served with it.
Aren't you a decade late for this topic?
Yes, I do realize that this topic is a bit too outdated for the time, but the primary reason why I chose this topic was to better understand how web works myself and if you're a newbie to the web ecosystem, I hope this article helps you understand some things better.
Getting started
Before moving forward, it's important that we set the context up. The website that we would be browsing to is goog.com, and we'll be assuming this is our first time to google.com on a brand new machine.
Starting our journey
Step 1:
You start typing google.com on your keyboard. The instant you type "g", the browser will search through its history and start suggesting you all the queries or websites that you have gone through in the past that contain the word "g". If the browser fails to find anything in the history, it would go one step further and send a request to the search engine server and come back with some queries related to the word you have typed. This behavior may vary from browser to browser.
Step 2:
Now that you've typed google.com and hit enter, the browser has to figure out whether the typed query is a search query or an URL. The browser does this by checking whether there is a top-level domain attached to the query or not. In our case, it has a top-level domain attached to it and so the browser takes it as an URL and moves forward with it.
Step 3:
Now that the browser has got an URL, it attempts to create a connection with the server, but before that, the browser has to figure out the protocol that the requested URL uses to communicate. That's where HSTS comes into picture. HSTS stands for HTTP Strict Transport Security and it is basically a list that the browser has. The list contains all the domains that can only be accessed on a HTTPS protocol. google.com uses HTTPS, so the browser will move forward using HTTPS.
Step 4:
Now we've got everything... almost everything, to establish a connection with google.com server. But, we can't initiate a request to establish a connection without knowing where to send the request. google.com is just a domain name and not a literal address. When I say address, I don't mean address like 221B Baker Street, London NW1 6XE. The term address here refers to IP addresses. At it's core, the concept of IP address is very much alike to that of our home address. The browser already knows the domain name to which it has to send the request, now it has to find the IP address of that domain. Generally, the browser would have looked up the cache memory of its own, the OS, router and ISP, in the respective order, to check if it has the IP address of the requested domain name stored there, but since we haven't ever been to google.com, the browser would fail to find anything in the cache. This is where we introduce the nightmare of networking, Domain Name System, or simply, DNS. Consider DNS as a mapping of domain names and their respective IP addresses. You may think of it as your phone contact list, where you save the phone number of someone and then look it up using the name you saved it with. Now replace phone numbers with IP addresses and contact names with domain names, and you have a basic and naive representation of what DNS is. The process of establishing a connection with a DNS server and doing a DNS lookup is very long and complex, and so I won't be going into its details in this article. The browser would now do a DNS lookup and find the IP address for google.com and move forward with it.
Step 5:
Now, the browser is required to establish a connection with google.com using an internet protocol. There are several internet protocols out there but Transmission Control Protocol, or TCP, is the most common of them. The browser would now initiate a TCP connection between the IP address of client and google.com' IP address over HTTPS protocol. Once the TCP connection request reaches google.com, and if everything goes right, google.com responds with a similar request and a TCP connection is then established. There is more to establishing a TCP connection than this but this is briefly what happens when establishing a TCP request.
Step 6:
Finally, we have established a connection with the IP address of google.com, and now we are ready to exchange data, exchange data as TCP connection is a bi-directional connection and it can be used to both send and receive data. A long and tiring journey it was. But before we exchange any byte of data, we need to establish a Transport Layer Security, or TLS, connection and introduce the concept of encryption. TLS connection is important because it helps to secure the data that would be exchanged from outside vulnerabilities. When a TLS connection is established, both client and the server end up having a symmetric key which they use to encrypt and decrypt data.
Step 7.
Now we can start sending requests to google.com. The first request that our browser would send is generally a GET request, unless you are sending some data, like credentials, with your request. Our request will have a header containing some information about the request, like what types of request would it accept in response, a connection header that will tell the server to keep the TCP connection alive for further communication, cookies (if there were any), and etc. Once the request reaches the server, it passes the request through a request handler and reads what it asked of it and generates a response accordingly. The response would somewhat share the same body as that of the request we sent earlier but would include additional information, like response status details, and is probably going to include cookies as well.
Step 8.
In this final step, depending on the content type of response, the browser would act parse the response accordingly. Since we are going to google.com, the response would include the data that would be used to build the google.com homepage.
Conclusion
We've finally reached at our destination, homepage of google.com, with maybe a better understanding of the how.
This is one of my first technical articles related to web development and I would love to hear any feedback on this.
Top comments (0)