Verwenden des CSRF-Schutzes mit Django- und AJAX-Anfragen

Django AJAX-Anfragen mit CSRF-Schutz sichern

Djangos integrierter CSRF-Schutz (Cross-Site Request Forgery), der beim Erstellen eines Projekts mit django-admin startproject standardmäßig aktiviert ist, nutzt ein CSRF-Token zum Schutz vor böswilligen Anfragen. Diese Middleware wird zu Ihrem settings.py.

hinzugefügt

Jede POST-Anfrage an Ihre Django-Anwendung erfordert ein gültiges CSRF-Token. In Django-Vorlagen wird dies erreicht, indem {% csrf_token %} mithilfe der POST-Methode in jedes Formular eingefügt wird. Die Handhabung des CSRF-Schutzes mit separaten Front-End-AJAX-Anfragen erfordert jedoch einen anderen Ansatz.

Dieses Tutorial zeigt die Sicherung einer einfachen Django-Anwendung mit AJAX-Anfragen von einem separaten Frontend.

Anwendungs-Setup

Unsere Beispielanwendung verfügt über zwei Endpunkte:

• GET /get-picture: Ruft die URL eines auf dem Server gespeicherten Bildes ab.
• POST /set-picture: Aktualisiert die URL des auf dem Server gespeicherten Bildes.

Der Einfachheit halber wird auf die Fehlerbehandlung verzichtet. Der anfängliche Backend-Code (in urls.py) lautet wie folgt:

from django.urls import path
from django.http import JsonResponse
import json

picture_url = "https://picsum.photos/id/247/720/405"

def get_picture(request):
    return JsonResponse({"picture_url": picture_url})

def set_picture(request):
    if request.method == "POST":
        global picture_url
        picture_url = json.loads(request.body)["picture_url"]
        return JsonResponse({"picture_url": picture_url})

urlpatterns = [
    path("get-picture", get_picture),
    path("set-picture", set_picture)
]

Die entsprechenden Frontend-Funktionen (vereinfacht):

// GET request to retrieve the image URL
async function get_picture() {
    const res = await fetch("http://localhost:8000/get-picture");
    const data = await res.json();
    return data.picture_url;
}

// POST request to update the image URL
async function set_picture(picture_url) {
    const res = await fetch("http://localhost:8000/set-picture", {
        method: "POST",
        body: JSON.stringify({ "picture_url": picture_url })
    });
}

Um Cross-Origin Resource Sharing (CORS) zu handhaben, verwenden wir das django-cors-headers-Paket.

Aktivieren des CORS- und CSRF-Schutzes

Installieren django-cors-headers:

pip install django-cors-headers

Konfigurieren settings.py:

INSTALLED_APPS = [
    "corsheaders",
    # ... other apps
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    # ... other middleware
]

CORS_ALLOWED_ORIGINS = ["http://localhost:4040"] # Adjust port as needed
CSRF_TRUSTED_ORIGINS = ["http://localhost:4040"] # Add your frontend origin

Während GET-Anfragen jetzt ordnungsgemäß funktionieren, schlagen POST-Anfragen aufgrund des CSRF-Schutzes fehl. Um dieses Problem zu beheben, müssen wir CSRF-Tokens manuell verwalten.

Abrufen und Verwenden des CSRF-Tokens

Erstellen Sie eine neue Ansicht, um das CSRF-Token bereitzustellen:

from django.views.decorators.csrf import ensure_csrf_cookie
from django.http import JsonResponse

@ensure_csrf_cookie
def get_csrf_token(request):
    return JsonResponse({"success": True})

urlpatterns = [
    # ... other paths
    path("get-csrf-token", get_csrf_token),
]

Aktualisieren Sie das Frontend, um das Token abzurufen (mit js-cookie):

fetch("http://localhost:8000/get-csrf-token", { credentials: "include" });

Die Option credentials: "include" stellt sicher, dass der Browser alle Set-Cookie-Header verarbeitet und das csrftoken-Cookie speichert. Überprüfen Sie die Registerkarte „Netzwerk“ in den Entwicklertools Ihres Browsers, um sicherzustellen, dass das Cookie gesetzt ist.

Ändern der POST-Anfrage

Ändern Sie abschließend die Funktion set_picture, um das CSRF-Token in den Header aufzunehmen:

async function set_picture(picture_url) {
    const res = await fetch("http://localhost:8000/set-picture", {
        method: "POST",
        credentials: "include",
        headers: {
            'X-CSRFToken': Cookies.get("csrftoken")
        },
        body: JSON.stringify({ "picture_url": picture_url })
    });
}

Dadurch wird der X-CSRFToken-Header mit dem Wert aus dem csrftoken-Cookie hinzugefügt und ermöglicht so erfolgreiche POST-Anfragen.

Wichtige Überlegungen

Dieser Ansatz weist Einschränkungen auf, insbesondere wenn das Front-End und das Back-End auf unterschiedlichen Domänen bereitgestellt werden. Browser-Sicherheitsrichtlinien verhindern möglicherweise das Setzen oder Zugreifen auf Cookies von Drittanbietern, was sich auf die CSRF-Token-Verwaltung auswirkt.

Ressourcen

• Django CSRF-Dokumentation
• Django CSRF-Referenz
• CORS-Dokumentation
• django-cors-headers
• Django CSRF_TRUSTED_ORIGINS
• Quellcode

Das obige ist der detaillierte Inhalt vonVerwenden des CSRF-Schutzes mit Django- und AJAX-Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!