DEV Community

Someshwar Tripathi
Someshwar Tripathi

Posted on

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

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" />
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

🚀 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
Enter fullscreen mode Exit fullscreen mode

🚀 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! 👇🔥

Top comments (0)