Got CSRF verification failure when while requesting POST through API

Question

I\'m writing a site using REST API. I use django with piston at backend (also using corsheaders.middleware.CorsMiddleware with CORS_ORIGIN_ALLOW_ALL = True). And I use backbone.

Answer 1

Sounds like you need to pass the CSRF token through with your save request.

One solution would be to pass the CSRF token back to the model requesting it, then override your model's save method ensuring the model passes the CSRF token back with it.

    Question = Backbone.Model.extend({
        urlRoot: 'http://example.com/api/questions',

        defaults: {
            csrf: null,
            id: null,
            title: '',
            text: ''
        },

        initialize: function() {
            //alert(this.title);
        }

        save: function( data, options ){

             data = $.extend( true, {
               csrf: this.get( 'csrf' )
             }, data );   

             options = _.extend( options, {
                 error: onError,
                 success: onSuccess
              } );

             // Call super method.
             Backbone.Model.prototype.save.apply( this, [ data, options ] );
        }

    });

Answer 2

The django docs have instructions on how to set up jquery to send the csrf token via ajax.

https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax

You should make sure that the template tag {% csrf_token %} renders something in your frontend. That way you know that the token is being created and passed to the frontend. If you follow the instructions from the docs above then your csrf token should always be sent with ajax requests. This is what the javascript looks like for one of my sites (assuming you are using jQuery).

// Set up Django CSRF Token Protection
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 = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

Also, make sure that 'django.middleware.csrf.CsrfViewMiddleware' is in your MIDDLEWARE_CLASSES settings.