Hey Fellas 👋. Welcome Back to my blog 😄. So this blog is going to deal about how actually your browser requests data and get it as a cluster of html pages 💻. No , I am not gonna describe in a bore bookish way 📖. Rather , I will mention the members that help to create this connection , in a pointwise manner. It is going to be a precise walkthrough - which will grow your interest about how data transmission is done from far-away server to your webpage. This is common in any development, and important if you decided to go for web development ,but jumped upon it without any prior experience 🔰 😃. Let's start , shall we?

💡 Layered Networking Architechture 🌭

Before hopping into any fancy terms ,let me tell that, all developments are somehow came from a core computer science subject - Computer Networking 🗼 🗼 Although that's another world, but I am going to highlight 🔦 only important concepts that actually get utilised in every corner of various developments. So , computer network majorly plays with some architechtures which actually helps to send your data or request 🌿 🌿. Few of you if know about this , there are 2 types of architechtures - OSI architechture (Open System Interconnections , came at late 1970s) and TCP/IP architechture (Transmission Control Protocol / Internet Protocol , came at 1960s). Though these two big models have their own layerwise differences, but we will just dive into two specific common layers - Application Layer 🌍 and Transport Layer 🚐. Here Application layer is the topmost layer and transport layer is just behind it. Remember, the upper layers in these architechtures are always dependent on its lower ones - that's how request message transcends , breaks into pieces and attached by different headers. In the same way , inside the destination device , the lower layers do certain stuffs , based on the attached headers and uplifts the data-packets into the application layer. Have a look in this diagram,

Overwhelming right ?! 😯. To understand this coordination of layers - let me take one example of how you travel via airplane ✈️. In the airport , you reach with your ticket. Then you go for baggage check. Then you enter inside the plane. The plane have its own routes. After landing , you took your stuff from baggage center and leave .

Now replace the steps with each layers, you will get the brief overview. But what the layers actually Do ?? What happens when you hit the search button in a e-commerce app ?? How do you know about how many items left ?? That's all done by some Protocols , configured in these layers. Protocols are some set of rules defined to perform specific tasks. Although there are many protocols , but we will discuss about two of them -HTTP and TCP protocols. These protocols contribute to create a basic secure connection with the database server and your client browser. Let's dive into that.

💡 HTTP and TCP Protocol 🌐

HTTP (Hypertext Transfer Protocol) is the dominant protocol in the application layer. There are several versions of HTTP (HTTP/1.0 - 1996s , HTTP/1.1 - 1997 , HTTP/2.0 - 2015). Also, there is one more corollary protocol of HTTP which is more reliable in terms of security - HTTPS (Hypertext Transfer Protocol Secure). But we are not bothered about the differences between plain old HTTP and Upgraded HTTPS , in this context. I am just going to share steps that more or less both protocols follow - along with the added security advantages of the HTTPS. But do the HTTP works alone - No . There comes the TCP (Transmission Control Protocol). It is a dominant transport layer protocol beside the UDP (User Datagram Protocol). TCP is known for building a more secure connection between sender and receiver device. It ensures that either the data packets will go to proper receiver or it will be just destroyed. That's why HTTP uses TCP as an underlying protocol. So , how this TCP makes a successful connection - answer is 3-way Handshake 👐. Your browser sents a dummy message or request to the server or another online device. In response , the second device also sends a response that it is live. At the third stage , now the browser sents the appropriate message to the server and got its acknowledgement. Each of this Request-Response Pair takes a certain ammount of time called , Round-Trip Time(RTT) 🌀. Each of these RTT have some computational costs , so it is recommended to create only a single TCP connection between two fixed devices for all transmissions , otherwise multiple TCP connections will create a overload. Now how the sender client (browser here) will know that the receiver (server or any other device) is authentic or not? - SSL/TLS comes into play

💡 SSL and TLS🔑

Before going to talk about these two things - lets know what is socket 📣? In a precise manner , socket is the interface between any architechture's Application layer and Transport Layer. Socket helps to work the HTTP in a partnership with TCP / UDP and helps to interreact your http message with other layers. To provide an additional layer of security to socket - we have SSL(Secure Socket Layer) 🚔🚔.

SSL encrypts the TCP link between two hosts which ensures that all data passed between them remain private and free from attack. Any TCP connection is successfully built after getting the SSL certificate. That means , SSL protocols are actually the part of the 3-way handshake. There are many SSL protocols out there - you can check it out. Wooh!! So many things running 😮 😮. Yeah !! really it is not so simple to just dig into the data servers or to talk online with others 😎. So now let's unveil the TLS.

TLS or Transport Layer Security is another security protocol acts within the TCP link. They share a intimidating history - SSL v3 is earlier version and came before TLS. The SSL protocol was originally designed by Netscape, but the basic ideas behind securing TCP had predated Netscape’s work. So, Since its inception, SSL and its successor TLS have enjoyed this journey together. TLS is supported by all popular Web browsers and Web servers. TLS provides a simple API with sockets, which is similar and analogous to TCP’s API. When an application wants to employ TLS, the application includes SSL classes/libraries. Although TLS technically resides in the application layer, from the developer’s perspective it is a transport protocol that provides TCP’s services enhanced with
security services.

The TLS protocol uses one session encryption key for all subsequent encryption and data integrity checking and that's how the protocol also participates in the 3-way handshake. In simple terms - you can call both TLS and SSL as Digital Signature (Although its a term , majorly used in cryptography and block chain , but the base concept is same). But how servers recognize us (client browsers) , they simply send some cookies (not the things to eat) 🍪. Once the cookie got accepted by our device , it got stored in our system ,and only our browser can access that when we visit the website again.

💡 Host To Ip ♠️♦️

But How this Request response cycle turns out when we type the URL in the browser. Do browsers know Alphabets?? No!!. But what they do know the Ip-address. what is this ? In simple terms , IP is an unique 32 bit (IPV4) or 128 bit (IPV6) online address which can not be altered. This address is generated by IP protocol (Network Layer protocol). But how this pneumonic code to numeric bits happens ? DNS (Domain Name System) manages this matter.

The DNS is an application-layer protocol that allows hosts to query the distributed database. It is a collection of servers where one url are mapped to a certain IP-address - the address at which the website's own database server is located. After making the secure connection , when you hit a request to get data from a web URL , browser tries to find the the hostname in a hierarchy of DNS servers . On gradual assesment , atlast the IP-address is found.

Searching starts from Root Level server. From there browser gets some Top Level Domain Servers (e.g: .com , .in servers) and authorative server. Searching gradually proceeds in these servers and we get the IP address. That's Good!! Now you can realize how actually your URL so quickly shows the data you want to see. DNS is the crucial part of the whole Internet, and if it fails , so fail the internet.

💡 Responding the Request 🌐

Now let's see and make a complete breakdown of general web request and response. A typical web Request can be broken into 2 parts - Request Line and Header lines. On further breakdown , Request Line can be divide into 3 parts - Request Method (GET , POST , PUT , PATCH , HEAD , DELETE etc) , Hostname or Urlname , HTTP Version. On the other hand , a web response includes 3 things - Response line , Header lines , Data or Payload. Response line can be divided into 3 parts - HTTP Version , Status Code , Status Phrase. These things are entirely predefined stuffs , you can observe below -

Request Message -

Response Message -

You can see now , that the first line of the request is the request line as well as response message has its first line as response line . All the other lines apart from the first line , are header lines. Headers can be of many types - General Headers , Request Headers , Response Headers. Else we have different status codes which shows is the success or failure of the data retrieval. You can search online for the varieties of Headers and status codes.

That's It !! Now you have a clear idea of how you can shop items on amazon and do other manipulations with data so quickly. 😄 and tell your friends about the working behind the blackbox. Well , time to leave 👋. Surely we will meet in the next blog and till then stay healthy and Happy Hacking !! 🤖