Django CSRF-Prüfung schlägt mit einer Ajax-POST-Anfrage fehl

Ich könnte Hilfe bei der Einhaltung des CSRF-Schutzmechanismus von Django über meinen AJAX-Beitrag gebrauchen. Ich habe die Anweisungen hier befolgt:

http://docs.djangoproject.com/en/dev/ref/contrib/csrf/

Ich habe den AJAX-Beispielcode kopiert, den sie genau auf dieser Seite haben:

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

Ich habe eine Warnung gesetzt, die den Inhalt von druckt getCookie('csrftoken') Vor dem xhr.setRequestHeader Anruf und es ist tatsächlich mit einigen Daten gefüllt. Ich bin mir nicht sicher, wie ich überprüfen kann, ob das Token korrekt ist, aber ich bin ermutigt, dass es etwas findet und sendet.

Aber Django lehnt meinen AJAX-Beitrag immer noch ab.

Hier ist mein JavaScript:

$.post("/memorize/", data, function (result) {
    if (result != "failure") {
        get_random_card();
    }
    else {
        alert("Failed to save card data.");
    }
});

Hier ist der Fehler, den ich von Django sehe:

[23/Feb/2011 22:08:29] “POST /speichern/HTTP/1.1” 403 2332

Ich bin sicher, dass ich etwas vermisse, und vielleicht ist es einfach, aber ich weiß nicht, was es ist. Ich habe in SO gesucht und einige Informationen zum Deaktivieren der CSRF-Prüfung für meine Ansicht über die gefunden csrf_exempt Dekorateur, aber das finde ich unattraktiv. Ich habe das ausprobiert und es funktioniert, aber ich möchte lieber, dass mein POST so funktioniert, wie Django es erwartet, wenn möglich.

Nur für den Fall, dass es hilfreich ist, hier ist der Kern dessen, was meine Ansicht tut:

def myview(request):

    profile = request.user.profile

    if request.method == 'POST':
        """
        Process the post...
        """
        return HttpResponseRedirect('/memorize/')
    else: # request.method == 'GET'

        ajax = request.GET.has_key('ajax')

        """
        Some irrelevent code...
        """

        if ajax:
            response = HttpResponse()
            profile.get_stack_json(response)
            return response
        else:
            """
            Get data to send along with the content of the page.
            """

        return render_to_response('memorize/memorize.html',
                """ My data """
                context_instance=RequestContext(request))

Danke für eure Antworten!

Wenn Sie die verwenden $.ajax Funktion können Sie einfach die hinzufügen csrf Token im Datenkörper:

$.ajax({
    data: {
        somedata: 'somedata',
        moredata: 'moredata',
        csrfmiddlewaretoken: '{{ csrf_token }}'
    },

Echte Lösung

Ok, ich konnte dem Problem auf die Spur kommen. Es liegt im Javascript-Code (wie ich unten vorgeschlagen habe).

Was Sie brauchen, ist dies:

$.ajaxSetup({ 
     beforeSend: function(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;
         }
         if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
             // Only send the token to relative URLs i.e. locally.
             xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
         }
     } 
});

anstelle des in den offiziellen Dokumenten veröffentlichten Codes:
https://docs.djangoproject.com/en/2.2/ref/csrf/

Der Arbeitscode stammt aus diesem Django-Eintrag: http://www.djangoproject.com/weblog/2011/feb/08/security/

Die allgemeine Lösung lautet also: “Verwenden Sie den AjaxSetup-Handler anstelle des AjaxSend-Handlers”. Ich weiß nicht, warum es funktioniert. Aber bei mir funktioniert es 🙂

Vorheriger Beitrag (ohne Antwort)

Ich habe tatsächlich das gleiche Problem.

Es tritt nach dem Update auf Django 1.2.5 auf – es gab keine Fehler mit AJAX-POST-Anforderungen in Django 1.2.4 (AJAX war in keiner Weise geschützt, aber es funktionierte einwandfrei).

Genau wie OP habe ich das in der Django-Dokumentation veröffentlichte JavaScript-Snippet ausprobiert. Ich verwende jQuery 1.5. Ich verwende auch die Middleware “django.middleware.csrf.CsrfViewMiddleware”.

Ich habe versucht, dem Middleware-Code zu folgen, und ich weiß, dass dies fehlschlägt:

request_csrf_token = request.META.get('HTTP_X_CSRFTOKEN', '')

und dann

if request_csrf_token != csrf_token:
    return self._reject(request, REASON_BAD_TOKEN)

dieses „if“ ist wahr, weil „request_csrf_token“ leer ist.

Grundsätzlich bedeutet dies, dass der Header NICHT gesetzt ist. Stimmt also etwas mit dieser JS-Zeile nicht:

xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));

?

Ich hoffe, dass die bereitgestellten Details uns bei der Lösung des Problems helfen werden 🙂

Fügen Sie diese Zeile zu Ihrem jQuery-Code hinzu:

$.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

und fertig.

Das Problem liegt darin, dass Django erwartet, dass der Wert des Cookies als Teil der Formulardaten zurückgegeben wird. Der Code aus der vorherigen Antwort erhält Javascript, um den Cookie-Wert zu finden und in die Formulardaten einzufügen. Das ist aus technischer Sicht eine schöne Art, es zu tun, aber es sieht ein bisschen ausführlich aus.

In der Vergangenheit habe ich es einfacher gemacht, indem ich das Javascript dazu gebracht habe, den Token-Wert in die Post-Daten einzufügen.

Wenn Sie {% csrf_token %} in Ihrer Vorlage verwenden, wird ein verstecktes Formularfeld ausgegeben, das den Wert trägt. Aber wenn Sie {{ csrf_token }} verwenden, erhalten Sie nur den bloßen Wert des Tokens, sodass Sie dies in Javascript so verwenden können ….

csrf_token = "{{ csrf_token }}";

Dann können Sie das mit dem erforderlichen Schlüsselnamen in den Hash aufnehmen, den Sie dann als Daten an den Ajax-Aufruf senden.

Das {% csrf_token %} Fügen Sie HTML-Vorlagen hinzu <form></form>

übersetzt so etwas wie:

<input type="hidden" name="csrfmiddlewaretoken" value="Sdgrw2HfynbFgPcZ5sjaoAI5zsMZ4wZR" />

warum gep es also nicht einfach so in dein JS ein:

token = $("#change_password-form").find('input[name=csrfmiddlewaretoken]').val()

und übergeben Sie es dann, indem Sie z. B. einen POST ausführen, wie:

$.post( "/panel/change_password/", {foo: bar, csrfmiddlewaretoken: token}, function(data){
    console.log(data);
});

Nicht-jquery-Antwort:

var csrfcookie = function() {
    var cookieValue = null,
        name="csrftoken";
    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;
};

Verwendungszweck:

var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.setRequestHeader('X-CSRFToken', csrfcookie());
request.onload = callback;
request.send(data);

Es scheint, dass niemand erwähnt hat, wie man dies in reinem JS mit dem macht X-CSRFToken Kopfzeile u {{ csrf_token }}hier ist also eine einfache Lösung, bei der Sie die Cookies oder das DOM nicht durchsuchen müssen:

var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
xhttp.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
xhttp.send();