HTTP Crash Course
Hello Reader,
Hope you are doing well !
Before starting the topic and deep diving into it, let me answer you a question, which might pop up in your mind i.e.
Why to read this blog ?
You use it dozens of time a day without even thinking about it, the HTTP protocol that powers the data world wide web. Every time you visit a website , send an email, stream a video, HTTP is hard at work behind the scenes.
So in this blog we will learn what HTTP is, and how it works. Let's begin now,
HTTP vs HTTPS
HTTP (HyperText Transfer Protocol)
What it is: HTTP is a protocol used for transferring data over the web.
How it works: When you send data using HTTP, it is sent in plain text. This means if you send "abcd", it will be stored as "abcd" on the server.
Example: Imagine you are sending a postcard. Anyone who handles the postcard can read the message written on it.
HTTPS (HyperText Transfer Protocol Secure)
What it is: HTTPS is a secure version of HTTP. It uses encryption to protect the data being transferred.
How it works: When you send data using HTTPS, it is encrypted before being sent. This means if you send "abcd", it might look like "xYz123" during transmission. Only the server and the client can decrypt and read the original message.
Example: Imagine you are sending a letter in a sealed envelope. Only the recipient can open the envelope and read the message inside. Anyone who intercepts the envelope cannot read the message.
Now let me tell you about some common terms used. such as -
URL, URI, and URN
URL (Uniform Resource Locator)
What it is: A URL is a specific type of URI that provides the address to access a resource on the internet.
Example:
https://www.example.com/page1
is a URL. It tells you where to find the resource (web page) on the internet.
URI (Uniform Resource Identifier)
What it is: A URI is a string of characters used to identify a resource on the internet. It can be a URL or a URN.
Example:
https://www.example.com/page1
(URL) andurn:isbn:0451450523
(URN) are both URIs.
URN (Uniform Resource Name)
What it is: A URN is a type of URI that names a resource without specifying its location.
Example:
urn:isbn:0451450523
is a URN. It identifies a book by its ISBN number but does not tell you where to find it.
let us imagine an example and understand it in layman lang.
Example Scenario
HTTP: You send "Hello" to a server. Anyone intercepting the message can read "Hello".
HTTPS: You send "Hello" to a server. The message is encrypted to something like "xYz123". Only the server can decrypt it back to "Hello".
URL:
https://www.example.com/page1
tells you where to find a specific web page.URI:
https://www.example.com/page1
(URL) orurn:isbn:0451450523
(URN) identifies a resource.URN:
urn:isbn:0451450523
identifies a book by its ISBN number.
Now let us deep dive into more of HTTP fundamentals.
What are HTTP Headers?
HTTP headers are pieces of information sent along with HTTP requests and responses. They are like extra notes that help the client (like a web browser) and the server (like a website) communicate better.
Key Points:
Metadata: HTTP headers are metadata, meaning they provide information about the data being transferred. (data about data)
Key-Value Pairs: They are sent as key-value pairs, like
Content-Type: text/html
.
Types of HTTP Headers
1. Request Headers
These headers are sent by the client (e.g., your web browser) to the server when making a request.
Example:
User-Agent: Mozilla/5.0
This header tells the server what type of browser is making the request.
2. Response Headers
These headers are sent by the server back to the client in response to a request.
Example:
Set-Cookie: sessionId=abc123; Path=/; HttpOnly
This header sets a cookie on the client's browser, which can be used for session management.
3. Representation Headers
These headers provide information about the data being transferred, such as its encoding or compression.
Example:
Content-Encoding: gzip
This header tells the client that the data is compressed using gzip.
4. Payload Headers
These headers provide information about the actual data being sent in the request or response body.
Example:
Content-Length: 348
This header tells the client or server the size of the data being sent.
Special Notes
Caching: Headers like
Cache-Control
help manage how data is cached.Example:
Cache-Control: no-cache
: This header tells the client not to cache the response.
Authentication: Headers like
Authorization
help manage authentication.Example:
Authorization: Bearer token123
This header sends an authentication token to the server.
Manage State: Headers like
Set-Cookie
help manage state between the client and server.Example:
Set-Cookie: sessionId=abc123; Path=/; HttpOnly
This header sets a session cookie on the client.
Example
Client Request:
GET /login HTTP/1.1
Host:
www.example.com
User-Agent: Mozilla/5.0
Authorization: Bearer token123
Server Response:
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Set-Cookie: sessionId=abc123; Path=/; HttpOnly
Content-Encoding: gzip
Content-Length: 348
In this scenario:
The client sends a request with headers like
User-Agent
andAuthorization
.The server responds with headers like
Set-Cookie
,Content-Encoding
, andContent-Length
.
Along with HTTP Headers , we also need to know about CORS and Security Headers. So let me explain you these term in simple lang.
CORS (Cross-Origin Resource Sharing)
Simple Explanation: CORS is a security feature implemented by web browsers to control how resources on a web page can be requested from another domain outside the domain from which the resource originated. It helps prevent malicious websites from accessing sensitive data on another site.
Real-Life Example: Imagine you are at a library (your website) and you want to borrow a book (resource) from another library (another domain). The librarian (browser) will check if the other library allows you to borrow books. If the other library has a policy (CORS policy) that allows borrowing, you can get the book. If not, the librarian will deny your request.
Key Headers:
Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource.
Access-Control-Allow-Credentials: Indicates whether the response to the request can be exposed when the credentials flag is true.
Access-Control-Allow-Methods: Specifies the methods allowed when accessing the resource (e.g., GET, POST).
Security Headers
Simple Explanation: Security headers are HTTP headers that help protect web applications from various types of attacks by controlling how browsers behave when handling the website's content.
Real-Life Example: Think of security headers as rules set by a building's security team to ensure the safety of its occupants. These rules might include not allowing certain items inside, ensuring doors are locked, and monitoring for suspicious activity.
Key Headers:
Cross-Origin-Embedder-Policy (COEP): Ensures that a document can only load resources from the same origin or resources explicitly marked as loadable from other origins.
Cross-Origin-Opener-Policy (COOP): Ensures that a top-level document can only interact with documents from the same origin. This helps prevent cross-origin attacks.
Content-Security-Policy (CSP): Helps prevent various types of attacks like Cross-Site Scripting (XSS) by specifying which sources of content are allowed to be loaded.
X-XSS-Protection: Enables the Cross-Site Scripting (XSS) filter built into most browsers, which helps prevent XSS attacks.
By implementing these headers, you can significantly enhance the security of your web applications.
Now let us talk about the HTTP Methods
HTTP Methods
HTTP Methods are the set of operations that allow you to interact with a server.
These are some of the most used and basic HTTP methods.
GET: retrieve a resource HEAD : No message body (response headers only)
OPTIONS : what operations are available
TRACE : loop back test (get same data)
DELETE: remove a resource
PUT : replace a resource
Post : interact with resource (mostly add)
PATCH : change part of a resource
HTTP Status Code
HTTP Status code are standard response codes given by web servers on the internet. Which help you understand the result of your request to the server.
1xx: Informational
- 100 Continue: The server has received the request headers, and the client should proceed to send the request body.
2xx: Success
200 OK: The request was successful, and the server returned the requested data.
201 Created: The request was successful, and a new resource was created as a result.
204 No Content: The request was successful, but there is no content to send back.
3xx: Redirection
301 Moved Permanently: The resource has been moved to a new URL permanently.
302 Found: The resource has been temporarily moved to a different URL.
304 Not Modified: The resource has not been modified since the last request, so the client can use the cached version.
4xx: Client Errors
400 Bad Request: The server could not understand the request due to invalid syntax.
401 Unauthorized: Authentication is required, and the client must provide credentials.
403 Forbidden: The client does not have permission to access the resource.
404 Not Found: The server cannot find the requested resource.
405 Method Not Allowed: The request method is not supported for the requested resource.
5xx: Server Errors
500 Internal Server Error: The server encountered an unexpected condition that prevented it from fulfilling the request.
502 Bad Gateway: The server received an invalid response from an upstream server.
503 Service Unavailable: The server is not ready to handle the request, often due to maintenance or overload.
504 Gateway Timeout: The server did not receive a timely response from an upstream server.
Whew, that was a long journey through the inner workings of HTTP! If you've made it this far, congratulations - you're now an HTTP protocols master. Pat yourself on the back.
Why not celebrate your new HTTP knowledge by doing an HTTP happy dance? Just get up, stretch your arms out like you're sending a GET request, then bring them in like you're receiving a 200 OK response.
All jokes aside, understanding HTTP is powerful knowledge that will serve you well, whether you're building websites, debugging network issues, or just trying to be an informed digital citizen.
So keep studying, keep building, and as we've learned, just keep requesting and responding. The internet thanks you for your service!
Thankyou.
Subscribe to my newsletter
Read articles from SATYA directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
SATYA
SATYA
Satya Prakash Dwivedi, a self-taught web developer and student, is passionate about creating beautiful and functional web experiences. He contributes to open-source projects and enjoys educating school students.