将 CSRF 保护与 Django 和 AJAX 请求结合使用-Python教程-PHP中文网

将 CSRF 保护与 Django 和 AJAX 请求结合使用

DDD

发布： 2025-01-07 18:15:39

原创

339 人浏览过

Using CSRF Protection with Django and AJAX Requests

通过 CSRF 保护保护 Django AJAX 请求

Django 的内置 CSRF（跨站请求伪造）保护在使用 django-admin startproject 创建项目时默认启用，利用 CSRF 令牌来防范恶意请求。此中间件已添加到您的 settings.py.

对 Django 应用程序的每个 POST 请求都需要有效的 CSRF 令牌。在 Django 模板中，这是通过使用 POST 方法在任何表单中包含 {% csrf_token %} 来实现的。然而，使用单独的前端 AJAX 请求处理 CSRF 保护需要不同的方法。

本教程演示使用来自单独前端的 AJAX 请求来保护简单的 Django 应用程序。

应用程序设置

我们的示例应用程序具有两个端点：

GET /get-picture：检索存储在服务器上的图像的 URL。
POST /set-picture：更新存储在服务器上的图像的 URL。

为了简单起见，省略了错误处理。初始后端代码（在urls.py中）如下：

<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>

登录后复制

对应的前端功能（简体）：

<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>

登录后复制

为了处理跨源资源共享（CORS），我们将使用 django-cors-headers 包。

启用 CORS 和 CSRF 保护

安装django-cors-headers：

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

登录后复制

配置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>

登录后复制

虽然 GET 请求现在可以正常工作，但 POST 请求将由于 CSRF 保护而失败。为了解决这个问题，我们需要手动管理 CSRF 令牌。

获取并使用 CSRF 令牌

创建一个新视图来提供 CSRF 令牌：

<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>

登录后复制

更新前端以获取令牌（使用js-cookie）：

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

登录后复制

credentials: "include" 选项确保浏览器处理任何 Set-Cookie 标头，存储 csrftoken cookie。检查浏览器开发者工具中的网络选项卡以验证 cookie 是否已设置。

修改 POST 请求

最后，修改 set_picture 函数以在标头中包含 CSRF 令牌：

<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>

登录后复制

这会添加 X-CSRFToken 标头以及 csrftoken cookie 中的值，从而启用成功的 POST 请求。