Cross-Site Request Forgery (CSRF) is a type of attack where a malicious website tricks a user into making unwanted requests to another site where they are authenticated. To prevent this, web applications implement CSRF tokens, which must be included in requests to verify their legitimacy.
If you encounter a “CSRF token validation failed” error, it means the server has rejected a request because it was missing a valid CSRF token.
1. What is CSRF?
CSRF occurs when a user is authenticated on a website, and an attacker forces them to execute unwanted actions without their knowledge.
Example of a CSRF Attack:
- A user logs into
bank.comand has an active session. - The attacker sends the user a malicious email containing a link:
<img src="https://bank.com/transfer?amount=5000&to=attacker" /> - If the user is still logged in, the bank processes the request without confirmation, transferring money to the attacker.
How Do CSRF Tokens Prevent This?
A CSRF token is a unique, randomly generated value stored in the user’s session and included in every form submission or API request. If a request lacks this token or it doesn’t match the stored value, the server rejects the request.
2. Common Reasons for “CSRF Token Validation Failed” Error
1️⃣ Missing CSRF Token in Request
If your request does not include the CSRF token, the server will reject it.
Fix: Ensure the CSRF token is included in every request.
Example in HTML Forms:
<form action="/submit" method="POST">
<input type="hidden" name="csrf_token" value="YOUR_CSRF_TOKEN">
<input type="text" name="data">
<button type="submit">Submit</button>
</form>
Example in AJAX Requests (JavaScript):
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken // Ensure you retrieve this token
},
body: JSON.stringify({ data: "example" })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("CSRF error:", error));
2️⃣ Expired or Invalid CSRF Token
Some CSRF tokens expire after a session ends or after a set duration.
Fix: Refresh the page to get a new CSRF token or configure your server to issue a fresh token with each request.
3️⃣ Incorrect Token in API Calls
If your backend expects the CSRF token in a specific header but it is sent in the body (or vice versa), validation will fail.
Fix: Check where your backend expects the token.
Example in Django (Python Backend):
def post(self, request):
if request.headers.get("X-CSRF-Token") != request.session.get("csrf_token"):
return JsonResponse({"error": "CSRF validation failed"}, status=403)
Example in JavaScript (Client-Side Fetch API):
fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": document.getElementById("csrf_token").value
},
body: JSON.stringify({ data: "example" })
});
4️⃣ Token Not Sent Due to Missing Cookies
Some frameworks store CSRF tokens in cookies (SameSite=Lax). If cookies are blocked, the token won’t be sent.
Fix: Ensure your browser allows cookies for your domain.
5️⃣ Different Origin Issues (CORS Conflict)
If the request is made from a different domain (e.g., frontend.com to api.backend.com), the CSRF token may not be included.
Fix: Enable CSRF token sharing across subdomains in your backend.
Example in Django Settings:
CSRF_TRUSTED_ORIGINS = ["https://frontend.com"]
Example in Express (Node.js Backend):
app.use(cors({
origin: "https://frontend.com",
credentials: true
}));
3. How to Fix CSRF Token Issues in Different Frameworks
Fixing CSRF in Django
Django includes CSRF protection by default using a middleware.
Steps to fix CSRF errors in Django:
1️⃣ Ensure you include {% csrf_token %} in all forms:
<form method="POST">
{% csrf_token %}
<input type="text" name="data">
<button type="submit">Submit</button>
</form>
2️⃣ If making an AJAX request, send the token in headers:
fetch('/submit', {
method: 'POST',
headers: {
'X-CSRFToken': getCookie('csrftoken')
},
body: JSON.stringify({ data: "example" })
});
3️⃣ Allow trusted domains if making cross-origin requests:
CSRF_TRUSTED_ORIGINS = ["https://yourfrontend.com"]
Fixing CSRF in Express (Node.js)
In an Express.js backend, use csurf middleware.
const express = require("express");
const csrf = require("csurf");
const cookieParser = require("cookie-parser");
const app = express();
app.use(cookieParser());
app.use(csrf({ cookie: true }));
app.get("/form", (req, res) => {
res.send(`<form method="POST"><input type="hidden" name="_csrf" value="${req.csrfToken()}"><input type="text" name="data"><button type="submit">Submit</button></form>`);
});
app.post("/submit", (req, res) => {
res.send("CSRF token validated!");
});
app.listen(5000, () => console.log("Server running on port 5000"));
Fixing CSRF in Laravel (PHP)
Laravel has built-in CSRF protection.
Steps to fix CSRF issues in Laravel:
1️⃣ Ensure forms include @csrf directive:
<form method="POST" action="/submit">
@csrf
<input type="text" name="data">
<button type="submit">Submit</button>
</form>
2️⃣ Include CSRF tokens in AJAX requests:
fetch("/submit", {
method: "POST",
headers: {
"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
body: JSON.stringify({ data: "example" })
});
3️⃣ If using APIs, disable CSRF for specific routes in VerifyCsrfToken.php:
protected $except = [
'/api/*'
];