How web browsing works

Internet and web applications are an integral part of our day to day life. Here we will have a short journey on how things work under the hood when we browse any application over the wire. I will keep everything short and will target for non technical people. Lets start

Take an example of browsing www.facebook.com

Before starting the journey we need to understand multiple things. when we browse any application we are talking about request and response model of client and server. Here client is our web browser and server is a remote machine where facebook.com is hosted. facebook.com is an application which is hosted/stored in a different location. We can call our computer as source and facebook.com hosted machine as destination. Please note facebook.com is not hosted in one machine there are lot of infrastructure involved here but lets forget those. Please remember there are lot of networking devices or interface placed in between source and destination.

To communicate with any application over the wire our source machine needs two things IP address and Mac address. Let me explain. We have a name here called facebook.com and it is easy for a human to understand and remember but Internet works on IP address. There are 2 types of IP address IPV4 and IPV6. lets not go in detail. You can compare this with your phonebook where your name is associated with a phone number. Mac address is a permanent and unique address which is hard coded within all network interfaces.

First step is DNS resolution. Consider this as your phonebook/address book where our mappings for domain name(facebook.com) and IP address of server are kept. First we will look within our host machine for the name to ip mapping ,if not found our computer knows which DNS server to reach for the name resolution either via manual DNS server entry or via DHCP default DNS IPs. Lets forget how we got but now our computer has an IP address which we are looking for.

Lets discuss how to get MAC address. Mac address will be added either via ARP or proxy ARP method. If our server is internal, meaning hosted in the same network then a broadcast message will be sent from host machine and destination machine will respond saying here is my Mac address. Since we are talking to facebook server and it is not in the same local network, the mac address will be our router mac address because our router knows how to reach out to the other networks. We will discuss this in detail sometime later but lets forget those and important point here is we have mac address of our router.

Observe your web address bar, it will show something like https://facebook.com. You might also observe `http://` for some other application. The difference here is https operates on a secure web communication. Coming back to our example facebook.com. Now we have IP address and also knows facebook.com operates on a secure communication.

What is secure communication (TLS/SSL) and what kind of security it offers?

In a non secure communication all the request and response will be in plain text so that anyone can read it. It will be dangerous if someone plug into the same network with bad intention. To make it secure we are encrypting our message and only those who have the key to open can decrypt the message. HTTPS uses both asymmetric and symmetric cryptographic method for the communication. In Asymmetric cryptography we will have two keys one is public and another one is private. Private key is used to decrypt and will be stored in server. Public key will be send to the client in our case it is browser. In symmetric cryptography we use same key to encrypt and decrypt. In https to establish the connection we use Asymmetric and once connection is established then we use symmetric cryptography to send the message back and forward. To understand better we need to talk about the role of digital certificate, handshake method later. Lets ignore to make it simple for now.

Start sending

Now we have destination IP, Mac address, digital certificate. Here our message will be broken down to small chunks and start transmitting those via different routes. All the packets will have serial number, data and will be reassembled at the server end. If any packet is lost then the packet will be re transmitted and finally it will all join together. There are protocols which doesn’t care about re-transmission but we can ignore it for now.

All the packet will be routes via different path. You can compare this with our roads. There are many factors which we consider when we start riding and we choose the best and fastest way to reach the destination. Same logic applicable here as well. Every router has a table which tells you the different junctions which can be reached. If not found then incoming packets will be send to default routes.

On every hope, packet will tell to router that this is the IP I want to reach ,will you help me ? So the packet will be updated with the next hope IP and this continues.

Found the server

Finally we reach our server. There are lot of infrastructure which i am not mentioning here like LB, Firewall, IDS etc but it is not important for our topic.

We reached server. Now the question is which application in facebook.com. Consider the fact that a server may contain multiple application which is up and running. Lets us recollect in our journey we never mentioned which application we want to communicate with. Interesting right ? then how server knows where to forward ?

For this we have something called PORT number. We are talking about virtual ports not physical ports. Since we are using HTTPS/HTTP our computer will append a default port if we are not mentioning a port number.

Nice, now we reached our server and all the response from the server will be returning back to our client in similar approach.

Response from Server

Once we get response from server the browser undergoes a lot of process like Parsing the string, Tokenising, creating an Abstract Syntax Tree, Create DOM Tree, create CSSOM, create Render Tree, Layout and Painting etc. For Javascript it is even more complicated and will discuss later.

NAT

In the above section I told there are two type of IP address. IPV4 and IPV6. What is the difference?. IPV6 is the latest version of IP address. IPV4 consist of 4 octets and can generate only about 4 billions of Public IP address but that is not sufficient to serve the demand for internet. Remember any device in internet should have an IP address associated with it.

I think it is also important to understand if you have multiple devices at your home and all needs different IPs to communicate. Think about a company, there might be thousands of computer in one building if we start giving public IPs to each then we will not have sufficient IPs to communicate. To overcome this issue we have Private IPs an Public IPs. In our home network router gets the Public IPs and it will be allocated dynamically and router will take care of Translating Public IP to Private IP and this method called Network Address Translation.

I know there are lot of things i am not mentioning because it is so confusing what not to discuss because of overwhelming infrastructure world. I will bring those topics later

Thank you for reading :)

Frontend Engineer