Learn How the HTTP Protocol Transforms a URL into a Webpage: A Detailed Walkthrough

Learn How the HTTP Protocol Transforms a URL into a Webpage: A Detailed Walkthrough

Have you wondered what happens when you type an URL in the web browser and press 'Enter', It feels magical right? Well, reason behind is HTTP in this blog we will understand what is HTTP and explore the working of the protocol, versions of HTTP.

Understand the Lingos before diving to HTTP

  • Client: Client is a an end user how takes services from other parties like server etc.

  • Server: Server is just a computer with special software and some configurations are made for serving the information to other computers.

  • IP Address: Unique identifier given to each devices connected to the network.

  • DNS: DNS stands for Domain Name System it is a protocol used for converting domain names to IP address.

What is HTTP 🤔

HTTP stands for Hypertext Transfer Protocol, it is an application layer protocol in the TCP/IP layer which acts as gateway to the internet. It is mostly the client sided protocol which helps in accessing the information from the internet.

Client Server-Architecture

Client Server architecture is the method in which it divides the user and the server into two multiple components. Client is the one takes the service and server is the computer which provides the services to the multiple clients.

Understanding TCP/IP protocol

The TCP/IP model alone is a humongous topic, here we will cover in a very high level in order to understand the HTTP. The TCP/IP protocol are the set of rules which helps in transferring the data from one computer to another computer within the same network or the different network. It transfer the data prepared by the user to other computer or device.

  • Application Layer: Provides protocol for user interaction and data formatting (Ex: HTTP, FTP).

  • Transport Layer: Provides End-to-End connection between the 2 devices (Ex: TCP, UDP).

  • Network Layer: Helps in communicating between different networks (Ex: IP).

  • Network Access Layer: Last layer of TCP/IP layer it transfer the data to electrical signals or radio waves etc. (Ex: Ethernet, Wi-Fi).

Working of HTTP Protocol

  1. Client Request:

    • When user types sumukhasureban.com the browser prepares for HTTP request.

    • The browser includes meta data like client browser information, IP address, operating system.

  2. DNS Lookup:

    • The browser checks in the cache if the IP address to that particular domain name is present.

    • If not found, using DNS protocol the browser requests the ISP or DNS directory and returns the IP address to browser if found.

  3. TCP Connection:

    • Once the IP address has been collected, the browser establishes a TCP connection with the server through 3-way handshake.
  4. Sending HTTP Request:

    • Once the connection is established, the HTTP request is sent to the server
  5. HTTP Response:

    • The sever sends the response in the form text, images, videos or in any other format.

Key Points 🔑:

  • Each HTTP request/response is stateless, meaning the server does not retain information.

  • The server does not remember user settings, which is why we use cookies.

HTTP Request/Response Structure

The above image depicts the structure of HTTP/request response structure, now we will look into each fields in detail

  1. HTTP Request Line: This species what action to specified on the particular resource Example: GET https://devsumukha.vercel.app/ the GET is a method of HTTP.

  2. HTTP Headers: Contains the meta data about the client or server like details of browser, operating system, CPU architecture.

  3. HTTP Body: This contains the content from the server or client, if user is sending the request to server the user might include information like email and password as credentials.

HTTP Methods

    1. GET: Retrieves data from the server.

      • Example: GET https://sumukhasureban.com/users

        • Retrieves a list of users from the website.
      1. POST: Sends data to the server to create a new resource.

        • Example: POST https://sumukhasureban.com/users

          • Sends user data (e.g., name, email) to create a new user account.
      2. DELETE: Removes a resource from the server.

        • Example: DELETE https://sumukhasureban.com/users/123

          • Deletes the user with ID 123 from the database.
      3. PUT: Updates an existing resource on the server.

        • Example: PUT https://sumukhasureban.com/users/123

          • Updates the user information for the user with ID 123 (e.g., changing their email or name).

Status Codes

A status code is a 3 digit code sent by the server to client after the each request, each status code gives information whether it is failed or succeeded.

  1. 1xx (Informational): Request received, continuing process.

    • Example: 100 Continue
  2. 2xx (Successful): The request was successfully received, understood, and accepted.

    • Example: 200 OK
  3. 3xx (Redirection): Further action is needed to complete the request (usually redirection).

    • Example: 301 Moved Permanently
  4. 4xx (Client Error): The request contains bad syntax or cannot be fulfilled due to client error.

    • Example: 404 Not Found
  5. 5xx (Server Error): The server failed to fulfill a valid request due to an error on the server side.

    • Example: 500 Internal Server Error

HTTP vs HTTPS

Image Credits Hostlicia

Lets understand the difference between HTTP and HTTPS

What is HTTPS .?

Have you ever noticed 🔒 symbol on the toolbar for your browser if you have noticed it then that particular website is using HTTPS protocol for communicating with the servers or the internet and connection is secure.

HTTPS stands for Hypertext Transfer Protocol Secure, it is similar to HTTP protocol but encrypts the data between the client and server, it is used to protect sensitive information like password, credit card details etc.

Working of HTTPS

HTTPS relies on the transport layer protocol (TCP) for reliable communication. Additionally, it relies on a security protocol, TLS (Transport Layer Security), to provide encryption, authentication, and data integrity.

“Working of HTTPS is similar to HTTP with extra step for establishing security”

How HTTPS Works: The Step-by-Step Lifecycle

HTTPS (Hypertext Transfer Protocol Secure) builds upon HTTP by adding encryption, authentication, and data integrity to ensure secure communication. Here’s a step-by-step breakdown of how HTTPS works:

1. Client Initiates a Secure Request

  • The user types a URL (starting with https://) into the browser or clicks a secure link.

  • The browser recognizes that HTTPS is required and prepares to establish a secure connection.

2. DNS Lookup

  • The browser queries the DNS server to resolve the domain name (e.g., www.sumukhasureban.com) into an IP address.

  • Once resolved, the browser knows where to send the request.

3. TCP Connection

  • The browser initiates a TCP connection with the server using a process called the three-way handshake.

  • This ensures a reliable communication channel.

4. TLS/SSL Handshake (Establishing Security)

  • Before sending the HTTP request, the client and server perform a TLS handshake to establish a secure connection:

    1. Server Authentication:

      • The server sends its SSL/TLS certificate (a digital certificate issued by a Certificate Authority).

      • The client verifies the certificate to confirm the server's identity.

    2. Key Exchange:

      • The client and server agree on a shared session key using public-key cryptography.
    3. Encryption:

      • The session key is used to encrypt communication for the rest of the session.

5. Sending the HTTP Request

  • Once the secure channel is established, the browser sends the HTTP request (e.g., GET, POST) over the encrypted connection.

6. Server Processes the Request

  • The server processes the request (e.g., fetches the requested webpage or handles data submission).

7. Server Sends the HTTP Response

  • The server sends the HTTP response (e.g., an HTML webpage, JSON data) over the encrypted connection.

8. Client Displays the Response

  • The browser decrypts the response and renders the content for the user.

9. Connection Termination or Reuse

  • The secure connection is either:

    • Terminated (closed).

    • Reused for further requests (using persistent connections).

Evolution of HTTP 🦍 - 🙎🏻‍♂️

  1. HTTP/0.9: Simple, GET-only, no headers or status codes.

  2. HTTP/1.0: Added headers, status codes, POST/HEAD methods.

  3. HTTP/1.1: Persistent connections, pipelining, chunked transfers.

  4. HTTP/2: Binary protocol, multiplexing, header compression, server push.

  5. HTTP/3: QUIC-based, faster, reduced latency, no TCP overhead.

Conclusion

“HTTP is the backbone of web communication, evolving to meet performance and security needs. Its flexibility ensures smooth and secure browsing, making it a key part of the modern internet”.

If you find it useful, don't forget to subscribe to our newsletter for the latest updates.