Using CSRF Protection with Django and AJAX Requests

Securing Django AJAX Requests with CSRF Protection

Django's built-in CSRF (Cross-Site Request Forgery) protection, enabled by default when creating a project with django-admin startproject, utilizes a CSRF token to safeguard against malicious requests. This middleware is added to your settings.py.

Every POST request to your Django application requires a valid CSRF token. In Django templates, this is achieved by including {% csrf_token %} within any form using the POST method. However, handling CSRF protection with separate front-end AJAX requests requires a different approach.

This tutorial demonstrates securing a simple Django application with AJAX requests from a separate front-end.

Application Setup

Our example application features two endpoints:

• GET /get-picture: Retrieves the URL of an image stored on the server.
• POST /set-picture: Updates the URL of the image stored on the server.

For simplicity, error handling is omitted. The initial backend code (in urls.py) is as follows:

<code class="language-python">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)
]</code>

The corresponding front-end functions (simplified):

<code class="language-javascript">// 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 })
    });
}</code>

To handle Cross-Origin Resource Sharing (CORS), we'll use the django-cors-headers package.

Enabling CORS and CSRF Protection

Install django-cors-headers:

<code class="language-bash">pip install django-cors-headers</code>

Configure settings.py:

<code class="language-python">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</code>

While GET requests will now function correctly, POST requests will fail due to CSRF protection. To resolve this, we need to manage CSRF tokens manually.

Fetching and Using the CSRF Token

Create a new view to serve the CSRF token:

<code class="language-python">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),
]</code>

Update the front-end to fetch the token (using js-cookie):

<code class="language-javascript">fetch("http://localhost:8000/get-csrf-token", { credentials: "include" });</code>

The credentials: "include" option ensures the browser handles any Set-Cookie headers, storing the csrftoken cookie. Inspect the network tab in your browser's developer tools to verify the cookie is set.

Modifying the POST Request

Finally, modify the set_picture function to include the CSRF token in the header:

<code class="language-javascript">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 })
    });
}</code>

This adds the X-CSRFToken header with the value from the csrftoken cookie, enabling successful POST requests.

Important Considerations

This approach has limitations, especially when deploying the front-end and back-end on different domains. Browser security policies may prevent the setting or accessing of third-party cookies, impacting CSRF token management.

Resources

• Django CSRF Documentation
• Django CSRF Reference
• CORS Documentation
• django-cors-headers
• Django CSRF_TRUSTED_ORIGINS
• Source Code

The above is the detailed content of Using CSRF Protection with Django and AJAX Requests. For more information, please follow other related articles on the PHP Chinese website!