DEV Community

Felix Bosire
Felix Bosire

Posted on

What happens when your type holbertonschool com in your browser and press enter?

Before diving in, let’s check some previous concepts:

  • Uniform Resource Locator (URL): In simple words, is a string that allows us to specify a web address. As we know if we want to visit or access some resource on the internet, we need a web address just as if we would want to visit someone, we may need his/her house address, the same applies on the web.
  • Domain Name Service (DNS): This is a naming system for computers, we would mostly use it to relate domain names to IP’s using the record entry type ‘A’ DNS request: A type of request made to get back some server IP, all we know is the domain and what we want to know is the IP of the server that domain refers to. Transmission Control Protocol / Internet Protocol (TCP/IP): Widely used protocols on the internet, provides end to end communication and specifies how data show be handled (packetized, addressed, transmitted, etc), Firewall: Security device that helps protect our network by filtering incoming and outgoing traffic. HyperText Transfer Protocol Secure (HTTPS): Extension of HTTP, is a secure version of the latter protocol, this protocol encrypts the communication using Transport Layer Security (TLS) formerly Secure Sockets Layer (SSL), when we request something using this protocol, that request gets send by default at port 443, and if we refer to HTTP then the port 80 is used.
  • Secure Socket Layer (SSL): Predecessor of TLS, is an encryption-based security protocol that helps to establish authenticated and encrypted links between devices over the internet.
  • Load balancer: Network device able to distribute network or application traffic across multiple servers. Web server: Software and hardware that communicates over HTTP, waiting for incoming requests and giving responses back to each one of them, can serve static content such as HTML, plain text files, images, video, etc.
  • Application server: Hosts applications in the way of business logic and interacts with the database, can manage multiple protocols, and helps with the dynamic interaction between the apps and the clients.
  • Database: An organized collection of data that can be easily managed, updated, and accessed.

Knowing these concepts will help us understand better how the web world works, now, we’ll focus on what we are here, to explain what happens when we type some URL and then press enter.

For example, I’ll take the following URL: https://www.holbertonschool.com, so, imagine you want to visit Holberton’s web page, so you type this URL in your browser, then a series of processes start one after the other.

Your browser asks itself, do I know where to make the query, to get to this URL?
If we want to go somewhere on the web, we must follow a direction that takes us to that place, in this case, we need to know the address of the server where the page we are searching for is hosted, this address is represented as a series .of numbers know as the IP, to help us find this IP address the use of DNS is needed, so a DNS request would take place, following are the DNS record types:

DNS records

The ones that are useful to us, for the example we’re working on, are:

A, AAAA: The ‘A’ in the name stands for address, this type of DNS record helps map domains to IP’s, the difference between the two is the IP version each one is intended for, A for version 4 while AAAA is intended for version 6.
CNAME: The name stands for Canonical Name, and is used to map alias names to actual domains
In this case, we are looking for ‘www.holbertonschool.com’, so the ‘A’ record could look something like:

www.holbertonschool.com <=> 75.324.12.65

To get this information, a series of queries had to happen:

The browser checked its cache memory, if a similar entry was not found then it asked the operating system
The operating system checked its memory, if not found then it asked the resolver
The resolver (normally the Internet Service Provider), requests local DNS, if not found, then it asks the root server, then, to the top-level domain servers to finally get to the authoritative name servers, once the resolver gets the answer, it handles it to the web browser, so he can request the right IP.
The browser sends a request to the corresponding server IP
Once the browser knows the IP, it sends a GET request, due we are requesting HTTPS, the port that will be used will be 443, for this request to be successful, the server must have an SSL certificate to make encryption possible and start communicating securely.

Here are some common request methods we can use on the web:

GET: Requests a representation of the specified resource.
POST: Used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
PUT: Replaces all current representations of the target resource with the request payload.
PATCH: Used to apply partial modifications to a resource.
DELETE: Deletes the specified resource.
OPTIONS: Used to describe the communication options for the target resource.
We are searching for ‘https:www.holbertonschool.com’, so a request that looks like the following gets sent:

http headers

A TCP connection gets established
To make the client and the server understand each other, a connection is needed, and this is where TCP comes to help, the basic connection establishment is made in 3 steps: SYN, SYN-ACK, ACK.

fonts

Once the connection is established, another protocol takes place, the SSL/TLS, remember?, we are asking for HTTPS, then, the communication needs to be encrypted.

TSL handshake

The complete process can be understood as:

Client server Architecture

The server receives a new request, handles it, and gives back a response
All set to start communicating!!, now the server can receive the request made by the browser, so, if you remember, the browser did a GET request to some IP address, for this example, let’s assume that the IP we got back, is some load balancer’s IP, then, what’ll happen could look something like:

The request hits the load balancer
The firewall will examine the incoming request, if everything is ok, then it will allow it, else, the request will be denied.
The load balancer, using a balancing algorithm passes that request to a server that contains a webserver to handle the request
The web server attends the request and, if it needs some dynamic content, it will ask the app server for it, then the app server will make a query to the database to get the asked data.
Finally, a response will be sent back.
The response the server sends could have one of the following status codes:

[100–199]: Informational responses
[200–299]: Successful responses

[400–499]: Client errors
[500–599]: Server errors
A 200 status code is expected if the request was successful, indicating that the specified resource was fetched and transmitted successfully in the response body.

The browser takes the response and renders the content
Finally, the browser gets the response and interprets the content, in this case, the corresponding HTML, subsequent 4. The server receives a new request, handles it, and gives back a response

All set to start communicating!!, now the server can receive the request made by the browser, so, if you remember, the browser did a GET request to some IP address, for this example, let’s assume that the IP we got back, is some load balancer’s IP, then, what’ll happen could look something like:

The request hits the load balancer
The firewall will examine the incoming request, if everything is ok, then it will allow it, else, the request will be denied.
The load balancer, using a balancing algorithm passes that request to a server that contains a webserver to handle the request
The web server attends the request and, if it needs some dynamic content, it will ask the app server for it, then the app server will make a query to the database to get the asked data.
Finally, a response will be sent back.
The response the server sends could have one of the following status codes:

[100–199]: Informational responses
[200–299]: Successful responses

[400–499]: Client errors
[500–599]: Server errors
A 200 status code is expected if the request was successful, indicating that the specified resource was fetched and transmitted successfully in the response body.

The browser takes the response and renders the content
Finally, the browser gets the response and interprets the content, in this case, the corresponding HTML, subsequent calls are made to get the CSS styles, images, and another content present on the page, the result of it will be the HTML page rendered in the browsercalls are made to get the CSS styles, images, and another content present on the page, the result of it will be the HTML page rendered in the browser

Alt Text

Wow, what a trip!!, as we saw, there is a lot of stuff going on when we request something on the internet, the full process can be simplified in the following diagram, considering a simple architecture: firewalls, load balancer, servers, web servers, app servers, and databases.

Well, that’s it, now you know more about the web and how it works, hope this blog post helped you in some way, see you!.

Top comments (0)