Have you ever wondered what happens when you open your browser (Chrome, Safari, Operamini, Microsoft Edge), type or search for something, hit enter, and almost instantly see the page you were searching for or the content displayed on your screen? Have you ever paused to imagine what happening under the hood? Have you ever thought of the intricate mechanism behind how your browser responds to you?

If you ever wondered how these things work, consider sitting at a a coffee shop, sipping on your favorite brew, and delving into the intricate mechanism behind the scenes. It’s an opportunity to gain a deeper understanding of the workings of the web while enjoying a cup of coffee.

So I assume you’re familiar with what a web browser is, but if not, that’s perfectly okay. Let's explore together, the term “Browser” is an application on your system that allows you to access the internet to retrieve specific information from another part of the web and display it on your desktop or mobile device. The information is transferred using the HTTP ( Hypertext transfer protocol) which defines how images, videos, and text are transferred over the internet.

When you enter a URL (Uniform Resource Locator) in your browser ( Chrome or Microsoft Edge) and you hit the enter button on your system, numerous processes are triggered to swiftly send the requested page to you. It all occurs in the blink of an eye, often leaving little time to contemplate what’s happening. Before we delve into the individual steps involved and expound on them together, allow me to offer a quick overview of all the processes that transpire almost instantaneously.

I hope your coffee is still warm; remember to savor it and keep it from burning your tongue as you enjoy the journey of discovering these processes.

When you enter a URL, your computer sends a request to DNS (Domain Name System), which serves as a directory storing the IP address of the server. For example, when you input https://www.google.com and you hit the enter button, the DNS server returns the IP address associated with https://www.google.com

So, with the IP address, your computer creates a connection to the target server via the IP address. This connection type is called the TCP (Transmission Control Protocol), then your computer can establish these connections through the IP (Internet Protocol), this whole process is called “handshake”.

If your computer is using a firewall or situated behind a firewall, the firewall will filtrate your connection to check if the request you are making is secured or authorized before allowing connections, additionally, the server you want to connect to will do the same check if it is behind a firewall before you can ultimately connect to the server.

Once the connection is established, your browser sends a request to the webpage using the SSL protocol (Secure Socket Layer) or TLS (Transport Layer Security) to encrypt the data that will be shared between your computer and the server. The “s” in “HTTPS” (Hypertext Transfer Protocol Secure) is responsible for the encryption and it serves as a secure connection.

There are times when there is a high volume of requests on a server. To manage this high traffic, companies like Google maintain multiple servers. They use a mechanism called a load balancer to distribute requests among these servers. The load balancer receives requests from your browser and distributes them to the available servers based on a chosen algorithm.

The web server receiving the request sends a response back to the load balancer, which in turn sends back the webpage to your browser. The response typically includes HTML (Hypertext Markup Language) instructing the browser how to display the content, CSS (Cascading Style Sheet) used for styling, and JavaScript files that add interactivity.

When a browser requests dynamic content, such as Google search results, the web server retrieves the content from the application server, which in turn retrieves it from the database server, and then the web server sends back the data to the browser. The browser renders the webpage and displays it to the user.

Now that you're aware of how the processes work and how pages are rendered on your browser, it's time to dive deeper into the details of each process. Let's explore them further to enhance your understanding.

Domain Name System (DNS):

When you input a domain name into your browser, your browser automatically saves the DNS record in its cache. This means that if you input the same domain name into the browser again, the browser checks its cache for the most recent copy of the DNS record associated with that domain. If there is a recent copy of the DNS record of the domain name, the browser uses the IP address of the domain name to connect to the server. As a result, it speeds up the conversion of a domain name to an IP address because it bypasses the need to send a request to the DNS server.

However, if there is no recent copy of the DNS record or if the DNS record has been updated since the last time it was cached, then the browser will have to send a request to the DNS server to get the updated IP address associated with the domain name.

In essence, your browser caches DNS records of visited domain names to streamline the browsing experience. Let's delve deeper into DNS and explore the various stages involved.

DNS Lookup Process

Below is how DNS Lookup works

After inputting the domain name into the browser, the browser sends a DNS query to the local resolver which is often provided by the internet provider (ISP). The local DNS resolver checks its cache for the most recent copy of the DNS record, if it has it, it sends the IP address associated with DNS back to the browser, and if it doesn’t have it, it then sends a recursive query to the root nameservers.

The root nameserver replies with the address of the top-level domain (TLD) nameserver such as (.com, .org, .net), and the resolver then sends a query to the TLD nameserver. In return, the TLD nameserver responds with the address of the authoritative nameserver for the requested domain. The resolver sends a final query to the authoritative nameserver, which responds with an IP address associated with the domain requested.

Once the resolver receives the IP address from the authoritative nameserver, it caches this information for future use and sends it back to the browser. The browser then uses the obtained IP address to establish a connection to the websites requested by the user.

Check out the below diagram to help visualize the explanation above.

TCP/IP:

TCP (Transmission Control Protocol) and IP (Internet Protocol) are two primary protocols that are used on the internet to make a connection or transfer data from the server to the client and vice versa. When you input google.com into the web browser, the browser employs TCP/IP to establish a link between the server that hosts the websites

in more detail...

• The browser uses the IP sent or retrieved to establish a connection.

• The server receives and sends an acknowledgment of a successful connection, known as a handshake

• Once the handshake is completed, then the browser can use TCP to send a request to the webpage it wants to access (Let's assume you want to access the homepage of Google), This request is made using TCP, which ensures that the request is sent securely and in a correct order

• The server receives the request and then sends the content of the webpage requested back to the browser. This response is also sent using TCP to ensure a secure and orderly sequence

• The client browser receives the content of the Google webpage and displays it on your screen.

Firewall Protection

A firewall is a security system that regulates and monitors the incoming and outgoing traffic network based on predetermined network policies. The primary purpose of a firewall is to protect our web server or data from threats such as hackers or malware from gaining access.

When you enter a URL to your browser (google.com), before making a connection to the destination server, it passes through the firewall. the firewall examines the incoming traffic to check if it is permitted to enter based on the rules.

There are two primary types of security policies that a firewall employs to examine incoming requests:

1. Allow policy:
   This policy allows the incoming traffic from a specified port or IP address;

   Allow Traffic from a Specific Port and IP Address:

    Allow from IP
    sudo ufw allow from <IP> to any port <port> proto tcp
    Allow from port 
    sudo ufw allow from any to any port <port> proto tcp
   

2. Deny policy:

   This policy denies incoming traffic or outgoing traffic from a specified port or IP address;
   Deny Traffic from a Specific Port and IP Address:

    Deny from IP
    sudo ufw deny from <IP> to any port <port> proto tcp
    Deny from port 
    sudo ufw deny from any to any port <port> proto tcp
   

HTTPS/SSL

HTTPS (Hypertext Transfer Protocol Secure) is a safe version of HTTP, it is designed to facilitate data transfer from one point to another in an encrypted manner.

SSL (Secure Socket Layer) and TLS (Transport Layer Security) is an encryption protocol that ensures the safety of data transmitted over HTTPS

Lemme explain how HTTPS and SSL/TLS work with a simple analogy.

HTTPS is just like a padlock box I used to store information to send on the internet. When you use HTTPS to send data or messages, you simply put the message inside a padlock box so that any other external party will not have access to it because they do not have the key. Only the recipient has the key to the padlock box

SSL/TLS are like special codes or keys to unlock the padlock box. so when you use HTTPS to send messages over the internet, you and the recipient agree on a code to use to unlock the padlock box.

When you type "google.com" into your browser, your browser acts like someone sending a message. It wants to see the website hosted at google.com, which is like the person receiving the message. Your browser sends a request to the website using HTTPS, which is like a padlock box the message in a padlock box, and sending it to the website. The website then sends the webpage back to your browser, also using HTTPS, which is like putting the webpage in a padlock box and sending it back to your browser.

Load Balancer:

A load balancer is like a traffic manager. It spreads out incoming website visitors among a bunch of servers to make sure no single server gets overwhelmed. This helps keep everything running smoothly, especially for busy websites like Google's.

When you try to visit google.com, the load balancer gets the request from your browser and decides which server in Google's network should handle it. It uses a special method to make this decision, like choosing the least busy server or one that's closest to you.

Web Server:

A web server is like a waiter at a restaurant. It takes your order (the request for a webpage) and brings you what you asked for (the webpage itself).

When your browser sends a request to google.com, the web server gets it from the load balancer. It then gathers all the pieces needed to make the webpage, like the text, images, and layout instructions. Once everything is ready, it sends it back to your browser to display.

Application Server and Database:

An application server is like a chef in the kitchen. It's responsible for making the more complex parts of a webpage, especially when you're interacting with it, like when you're searching for something on Google.

When you type a search query into Google, the request goes to the load balancer, then to the web server, and finally to the application server. The application server figures out what search results to show you and gets any extra information it needs from a database, like details about products if you're shopping online.

Once the application server has everything ready, it sends it back to the web server, which includes it in the response sent back to your browser.

Displaying the Web Page:

When your browser gets all the pieces of the webpage from the web server, it's like assembling a puzzle. It puts together the text, pictures, and layout instructions to create the webpage you see on your screen. Then, you can interact with it, by clicking links, typing in text boxes, and more.

The image that displays the whole processes

In conclusion, I hope this article has provided you with a clearer understanding of what goes on behind the scenes when you type "www.google.com" into your browser. If you found this article helpful, please consider leaving a comment, giving it a thumbs up, and connecting with me on this platform or Twitter @_steveric. Your support is greatly appreciated!