In many cases, it is desirable to enhance a form so that it can be submitted over Ajax. These also need to be protected using CSRF tokens, and while it is possible to inject the token as extra data in each request, using such an approach requires developers to remember to do so for each and every POST request. The alternative of using a CSRF token header exists and it makes things more efficient.

First, the token value needs to be retrieved, and how we do this depends on the value of the CSRF_USE_SESSIONS setting. When it is True, the token is stored in the session rather than a cookie, so we must use the {% csrf_token %} tag to include it in the DOM. Then, we can read that element to retrieve the data in JavaScript:

var input = document.querySelector('[name="csrfmiddlewaretoken"]');
var csrfToken = input && input.value; 

When the CSRF_USE_SESSIONS setting is in the default False state, the preferred source of the token value is the csrftoken cookie. While it is possible to roll your own cookie manipulation methods, there are many utilities available that simplify this process. For example, we can extract the token easily by name using the js-cookie API, available at https://github.com/js-cookie/js-cookie, as shown here:

var csrfToken = Cookies.get('crsftoken');

Once the token has been extracted, it needs to be set as the CSRF token header value for XmlHttpRequest. Although this might be done separately for each request, doing so has the same drawbacks as adding the data to the request parameters for each request. Instead, we might use jQuery and its ability to attach data to all requests automatically before they are sent, like so:

var CSRF_SAFE_METHODS = ['GET', 'HEAD', 'OPTIONS', 'TRACE'];
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (CSRF_SAFE_METHODS.indexOf(settings.type) < 0
            && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrfToken);
        } 
    }
});