How to fix – CSRF token mismatch error

In this article, we are looking for a possible solution to fix the “CSRF token mismatch error”. we will start by understanding what is csrf ? and why we require it. how did this error occur?

What is CSRF?

CSRF stands for Cross Site Request Forgery is a type of malicious attack on a website. In this attack, a hacker sends you a link that actually looks like the original one and excites you to click or log in from that link. After getting privileges he tries to perform certain actions behalf.

CSRF token is a unique, random string that is generated for each user’s session. when you make any sensitive request (like transferring money), our browser adds this token to form a request. The website checks that the CSRF token is valid for the user’s session. If the token is invalid or missing, it knows the request is likely to come from a hacker, and rejects it.

To learn more about CSRF check you can check this article – Click Here

Problem Statement

csrf token mismatch error

This error occurs when the web browser finds that the CSRF token included in the incoming request is not matched with the expected token configured in the web application. Token mismatch shows that the request likely did not come from your application. therefore it causes the CSRF token mismatch error.

Approaches to fix the “CSRF token mismatch error”

There are some common approaches to this problem.

1. Check if the CSRF tokens are actually mismatched.
2. Make sure CSRF tokens are generated and being passed correctly.
3. Check if the session and CSRF token has expired. CSRF tokens expires after a period of inactivity.
4. Check for any javascript errors in the console.
5. Consider using double submit cookies as an additional check. Compare both the CSRF token and cookie values to detect the mismatch.
6. Clear cookies from browser.
7. temporary disable the csrf protection. ( while you debug the issue but be sure to re enable it once fixed).

Solution 1: Check CSRF token and Pass it correctly through request.

Check your projects middlewares if you have correctly added csrf middleware in it.

While submitting form make sure you passed the csrf token.

Run your project, on webpage try to check if the csrf is present or not by inspecting the form

If you are making a request to different domain, in such case you should share the same csrf with the other domain also.

Solution 2: Clear Cookies from browser.

if you are correctly passing csrf and there is no different domain involve. Then you can follow the below steps to apply the solution.

• Open your browser’s setting.
• Click on more tools => click on clear browsing data option.
• Click on Third-party cookie.
• Here, you will see all the listed sites of which cookies are stored in the browser.
• From this stored cookies delete the cookies of your domain it may be “localhost” or name of your hosted domain site.

This is how you can clear the stored cookies from the browser to get rid of token mismatch error.

Solution 3: Temporary disable CSRF Protection

This solution is temporary suggestion to debug the issue more clearly. There is @csrf_excempt decorator availble in python framework. By using this decorator we can disable the csrf protection for a specific views or urls.

e.g here we are showing a login form by using form function. from this function a csrf token is getting passed with the form template itself. so to avoid passing csrf token we are applying @csrf_excempt decorator to the form view.