Search code examples
javascriptjquerydjangoipadcsrf

Django jQuery CSRF fix does not work on iPad


The Django jQuery fix which is given here does not work on iPad. Any ideas on how to make it work?

fix code:

$(document).ajaxSend(function(event, xhr, settings) {
    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;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});

EDIT

To clarify:

Here is a sample js:

function foo() {
    data = {some:"datahere"}
    jQuery.ajax({
        url: "urlhere",
        type: "POST",
        data: data,
        success: function() {
            // do something
        },
        error: function() {
            alert("Could not send ajax request with POST");
        }
    })
}

In a regular browser, the error function is never called, however on iPad I always get an alert (at least in iOS sim). When I see the django log, I see that those requests were returned with code 403. And if add @csrf_exempt decorator, everything works on iPad, so I am pretty sure it is csrf failing.


Solution

  • iPad for some reason does not always get the value of the CSRF cookie, therefore jQuery csrf fix did not work since it was unable to read the value of the cookie.

    The solution is make sure the cookie is send to the client with a ensure_csrf_cookie decorator on the views which interact with the client which require csrf.

    example:

    # models.py
    from django.views.decorators.csrf import csrf_protect, csrf_exempt, requires_csrf_token, ensure_csrf_cookie
    
    @ensure_csrf_cookie
    def fooview(request):
        # do something here
        pass