01 What is CSRF?
Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they are currently authenticated.
With a little help from social engineering (like sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker's choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth.
02 How CSRF Works
CSRF attacks rely on the browser's behavior of automatically sending cookies (including session cookies) with cross-site requests.
Scenario:
- You are logged into your bank account (
bank.com). Your session cookie is stored in your browser. - You visit a malicious website (
evil.com). evil.comcontains a hidden form or script that makes a request tobank.com/transfer?amount=1000&to=attacker.- Your browser sends this request to
bank.comalong with your session cookie. bank.comsees the valid session cookie and executes the transfer, thinking you initiated it.
03 Prevention Techniques
Defending against CSRF involves verifying that the intention to perform an action originated from your own site.
1. Anti-CSRF Tokens
The server generates a unique, unpredictable token for the user's session. This token must be included in every state-changing request (POST, PUT, DELETE). The server verifies the token before processing the request.
2. SameSite Cookie Attribute
Setting the `SameSite` attribute on cookies to `Strict` or `Lax` prevents the browser from sending the cookie with cross-site requests. This is a powerful browser-level defense.
3. Double Submit Cookie
A stateless alternative where a random value is sent as both a cookie and a request parameter. The server checks if they match. Useful for APIs.
4. Custom Request Headers
Adding a custom header (e.g., `X-Requested-With: XMLHttpRequest`) prevents simple cross-site forms from triggering the request, as they cannot set custom headers.
04 CSRF vs XSS
It's important to distinguish between CSRF and XSS:
- CSRF (Cross-Site Request Forgery): Tricks the user's browser into performing an unwanted action on a trusted site. The attacker cannot read the response.
- XSS (Cross-Site Scripting): Allows the attacker to execute malicious scripts within the user's browser. An attacker can read data, steal tokens, and perform actions. XSS is generally more dangerous and can even be used to bypass CSRF protections!
05 Frequently Asked Questions
Do I need CSRF protection for GET requests?
Ideally, GET requests should be safe and idempotent (not changing state), so they shouldn't need CSRF protection. However, if your GET requests modify data (bad practice), they are vulnerable.
Is SameSite cookie attribute enough?
The SameSite attribute is a strong defense, but it shouldn't be your only line of defense. Older browsers may not support it, and there are edge cases. Anti-CSRF tokens are still recommended.
does HTTPS prevent CSRF?
No. HTTPS encrypts the traffic, but it doesn't verify the intent or origin of the request in a way that prevents CSRF. CSRF attacks can happen over HTTPS.
How do I implement CSRF tokens in React/Next.js?
Most modern frameworks have built-in CSRF protection or middleware libraries (like `csurf` or NextAuth.js) that handle token generation and validation automatically.