How to Handle CSRF in Django, React+Redux using Axios

Understanding CSRF with Django and React+Redux using Axios

If you are working on a Django and React+Redux project and need to make POST calls to Django, you may come across the need to handle CSRF (Cross-Site Request Forgery) protection. In this blog post, we will explore how to deal with CSRF in Django and React+Redux using Axios.

What is CSRF?

CSRF is an attack that tricks the victim into submitting a malicious request. It occurs when a malicious website crafts a request on behalf of the victim’s browser, thereby gaining unauthorized access to functionality. To prevent CSRF attacks, Django provides built-in protection using CSRF tokens.

Approaching CSRF Protection Without User Logins

Although CSRF protection is typically associated with user logins, it is still possible to implement it without enabling user authentication in your project. To achieve this, we’ll need to generate and include CSRF tokens in our POST requests.

Using Axios for POST Requests

In your Redux action for making a POST request using Axios, you can include the necessary CSRF token. Here’s an example:

export const addJob = (title, hourly, tax) => {
  console.log("Trying to addJob: ", title, hourly, tax)
  return (dispatch) => {
    dispatch(requestData("addJob"));
    return axios({
      method: 'post',
      url: "/api/jobs",
      data: {
        "title": title,
        "hourly_rate": hourly,
        "tax_rate": tax
      },
      responseType: 'json',
      headers: {
        "X-CSRFToken": getCookie('csrftoken')
      }
    })
      .then((response) => {
        dispatch(receiveData(response.data, "addJob"));
      })
      .catch((response) => {
        dispatch(receiveError(response.data, "addJob"));
      })
  }
};

Obtaining the CSRF Token for Axios

To obtain the CSRF token required for the Axios request, you can use the provided getCookie function. Here’s the function:

function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

In the Axios configuration, you need to set the CSRF token as follows:

import axios from 'axios';
axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";

Adjustments for Safari Users

For users using Safari, there is a slight adjustment to make. Instead of setting the xsrfCookieName to “csrftoken”, you should set it to “XCSRF-TOKEN” to accommodate Safari’s behavior:

axios.defaults.xsrfCookieName = "XCSRF-TOKEN";

Additionally, in your Django settings file, set CSRF_COOKIE_NAME = "XCSRF-TOKEN".

Conclusion

By implementing CSRF protection in your Django and React+Redux project using Axios, you can ensure the security of your application and guard against malicious requests. Don’t forget to handle Safari’s specific behavior for CSRF tokens if necessary. With these steps in place, you can confidently make POST requests without user logins.

Remember, understanding and implementing CSRF protection is vital for securing your applications and protecting user data.

reference :

https://stackoverflow.com/questions/39254562/csrf-with-django-reactredux-using-axios

Read Another Article :

reactjs