CSRF in Web application

CSRF stands for Cross Site Request Forgery. It means hackers sends request to a server by using hacked person's AUTH details. When an user logged into a website, browser will store the authentication related details such as authentication token in session cookies. Whenever user sends API request to backend server, the session cookies will be sent along with the request to user authentication. The backend server will confirm the user by the token stored in the session cookies.

This method works better when we have browser reliability. But hackers will use this as an advantage. Hackers will generate the script which will send the request to the backend server with request body filled by them. They will insert into own site and tricks the users to visit their site by using malicious links. Usually we use multiple tabs for different sites in browser. User logged into a website by using their credentials and then visited the malicious site in another tab. Users may be tricked to call the script injected into that site by buttons or images. Then the script will run and send request to the site logged in another tab by using the session cookies. Mostly these type of hacking is used to alter the user's profile state and money transfer in banking websites.

To prevent this kind of attack, developers used many methods. One of those is including referrer header. Whenever sending request, URL of the page that initiated the request will be added in header in the name of referrer. Backend server will check the referrer URL having the same domain or allowed domain and then process the request. Another method is including CSRF token with every request. Amending CSRF tokens must in for every post, put, and delete calls. When the web page loaded, the backend will send a CSRF token which is randomly generated, having alpha numerical characters and unique to each session. The CSRF token is only valid for certain period of time. So hackers could not predict the tokens. For every request, backend server will validate the token and then process the request.

CSRF in Django:

In Django, CSRF is prevented by CSRF token. CSRF protection is enabled for all data changing methods such as Post, Put and Delete. To include the CSRF Token, need to include the {% csrf_token %} template tag in forms which going to submit. This template tag will generate a hidden input field in the name of csrf_token. If we neglect this tag, it will cause 403 error.

In Django, this tag is mandatory for all types of form submission. We can neglect CSRF tag only by adding CSRF token manually in request headers and include ensure_csrf_cookie decorator in view function. For this method, we need to get CSRF token by calling getCookie() function (code is available in Django documentation page). Then add the token in headers in the name of x-CSRFToken. The request should be done by Ajax.

CSRF token is validated by CsrfViewMiddleware. For every request, this middleware intercept the request and check for CSRF token in the headers and request body. The CSRF token obtained from request is validated against CSRF token stored in current session. If the token is mismatched or missed, this middleware will raise the CSRF error or missing exception.

CSRF in React- Django:

To enable CSRF protection in Django React, we need to create an API endpoint which will return a CSRF token and include ensure_csrf_cookie decorator in the required CSRF protection Class or view functions. In client side, need to get the CSRF token by api request and include the obtained token in the headers in the name of x-CSRFToken for further request. By doing this, we can prevent the CSRF by somewhat. But still hackers finding using many ways to do CSRF.