CSRF Explained Like You’re Five (But Smarter) 🔥

Someshwar Tripathi — Tue, 18 Mar 2025 23:30:23 +0000

Imagine you’re at a restaurant. You order a pizza, but some prankster sneaks in and changes your order to pineapple pizza 🍍🍕(the horror!). Worse, they do it without you even noticing.

That, my friend, is how Cross-Site Request Forgery (CSRF) works on the web.

What is CSRF?

CSRF (pronounced "sea-surf") stands for Cross-Site Request Forgery. It’s a sneaky attack where a bad actor tricks your browser into making unwanted requests to another site where you’re already logged in.

Basically, CSRF exploits the fact that browsers automatically include cookies with requests.

💡 Example:

Let’s say you’re logged into your online banking (mybank.com).

A hacker sends you a phishing email with a link to an evil website.
That evil website secretly sends a request like this:

  <img src="https://mybank.com/transfer?amount=1000&to=hacker" />

Your browser automatically includes your banking cookies, making the bank think you made the request.
Boom. You just lost $1000.

Why Does CSRF Work?

Browsers send cookies automatically – If you’re logged in, your cookies get sent with every request, no matter where it came from.
No user interaction needed – Just visiting a malicious page can trigger CSRF.
Servers trust authenticated users – The server thinks requests with valid cookies are legit.

How Do We Stop CSRF?

Now that we know how it works, let’s talk about fixes.

✅ 1. CSRF Tokens (The Secret Handshake)

A CSRF token is a random, secret value that your app generates and checks with every request.

Here’s how it works:

When you load a form/page, the server includes a hidden token in it.
When you submit the form, that token must be sent back.
The server checks if the token is valid—if not, the request is rejected.

Example:


<form action="/transfer" method="POST">  
  <input type="hidden" name="csrf_token" value="a1b2c3d4">  
  <button type="submit">Send Money</button>  
</form>

🚀 Why it works:

The attacker’s evil site can’t guess the CSRF token.
Even if they trick your browser into making a request, it will be missing the token.

✅ 2. SameSite Cookies (The Browser’s Defense)

The SameSite cookie attribute tells browsers not to send cookies with requests coming from other sites.

Set your cookies like this:


Set-Cookie: sessionid=xyz; Secure; HttpOnly; SameSite=Strict

🚀 Why it works:

If an attacker’s site tries to make a request, the browser won’t include your cookies, making the request useless.

✅ 3. Requiring Re-Authentication

Before doing sensitive actions, ask the user to re-enter their password or use 2FA.

🚀 Why it works:

Even if a CSRF attack tricks your browser, it can’t bypass authentication prompts.

The Takeaway 🎯

CSRF tricks your browser into making unwanted requests on your behalf.
The best defenses are CSRF tokens, SameSite cookies, and requiring re-authentication.
If you’re building a web app, always protect sensitive actions from CSRF.

CSRF is sneaky, but now you’re smarter than the hackers. Stay safe out there! 🔒🚀

Ever run into CSRF issues before? Drop your stories below! 👇🔥

CORS Explained Like You’re Five (But Smarter) 🚀

Someshwar Tripathi — Tue, 18 Mar 2025 23:22:18 +0000

If you've ever built a web app that fetches data from an API, there's a good chance you've run into CORS errors. They’re like that annoying bouncer at the club who won’t let you in, even though your friend is already inside waving at you.

So, what is CORS, why does it exist, and how do we deal with it without losing our minds? Let’s break it down.

What Even is CORS?

CORS stands for Cross-Origin Resource Sharing. It’s a security feature built into web browsers that controls which websites (origins) can request resources from another website’s server.

Origins? What’s That?

An origin is simply the protocol + domain + port of a website. For example:

https://myapp.com (origin: https, myapp.com, default port 443)
http://localhost:3000 (origin: http, localhost, 3000)

If your frontend is running on http://localhost:3000 and tries to fetch data from https://api.example.com, that’s a cross-origin request—meaning CORS rules apply.

Why Does CORS Exist?

Think of it as a security guard for your browser. Without CORS, any random website could make requests to your bank, email, or private APIs and steal your data. Not cool.

CORS is the browser’s way of saying:

❌ "Hey, you’re trying to talk to a different website. Are you sure you’re allowed to?"

The server being contacted must explicitly say, “Yes, you are allowed” by including special headers in the response. If it doesn’t, the browser blocks the request.

Common CORS Errors & Fixes

Now, let’s talk about those frustrating CORS errors and how to deal with them.

🚨 Error: No ‘Access-Control-Allow-Origin’ header

💡 What’s happening?

Your frontend made a request to another domain, but the server didn’t include an Access-Control-Allow-Origin header.

🛠 How to fix it:

If you own the API, update the backend to send the header:

  Access-Control-Allow-Origin: *

🚨 Error: Preflight request blocked

💡 What’s happening?
Some requests (like POST, PUT, or requests with custom headers) trigger a preflight request. The browser first sends an OPTIONS request to check if the API allows it. If the API doesn’t respond correctly, the main request is blocked.

🛠 How to fix it:
Make sure the server handles OPTIONS requests and responds with:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
```

`
(This tells the browser, “Yes, I accept these request types.”)

DEV Community: Someshwar Tripathi

CSRF Explained Like You’re Five (But Smarter) 🔥

What is CSRF?

Why Does CSRF Work?

How Do We Stop CSRF?

✅ 1. CSRF Tokens (The Secret Handshake)

✅ 2. SameSite Cookies (The Browser’s Defense)

✅ 3. Requiring Re-Authentication

The Takeaway 🎯

CORS Explained Like You’re Five (But Smarter) 🚀

What Even is CORS?

Origins? What’s That?

Why Does CORS Exist?

Common CORS Errors & Fixes

🚨 Error: No ‘Access-Control-Allow-Origin’ header

🚨 Error: Preflight request blocked