Django および AJAX リクエストでの CSRF 保護の使用

CSRF 保護による Django AJAX リクエストの保護

Django の組み込み CSRF (クロスサイト リクエスト フォージェリ) 保護は、django-admin startproject でプロジェクトを作成するときにデフォルトで有効になり、CSRF トークンを利用して悪意のあるリクエストから保護します。 このミドルウェアは settings.py.

Django アプリケーションへのすべての POST リクエストには有効な CSRF トークンが必要です。 Django テンプレートでは、POST メソッドを使用してフォーム内に {% csrf_token %} を含めることでこれを実現します。 ただし、個別のフロントエンド AJAX リクエストで CSRF 保護を処理するには、別のアプローチが必要です。

このチュートリアルでは、別のフロントエンドからの AJAX リクエストを使用して単純な Django アプリケーションを保護する方法を示します。

アプリケーションのセットアップ

このサンプル アプリケーションには 2 つのエンドポイントがあります:

• GET /get-picture: サーバーに保存されている画像の URL を取得します。
• POST /set-picture: サーバーに保存されている画像の URL を更新します。

わかりやすくするために、エラー処理は省略しています。 初期のバックエンド コード (urls.py 内) は次のとおりです:

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

対応するフロントエンド関数 (簡略化):

// 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 })
    });
}

Cross-Origin Resource Sharing (CORS) を処理するには、django-cors-headers パッケージを使用します。

CORS および CSRF 保護の有効化

django-cors-headersをインストールします:

pip install django-cors-headers

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

GET リクエストは正しく機能するようになりましたが、CSRF 保護により POST リクエストは失敗します。 これを解決するには、CSRF トークンを手動で管理する必要があります。

CSRF トークンの取得と使用

CSRF トークンを提供する新しいビューを作成します:

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),
]

フロントエンドを更新してトークンを取得します (js-cookie を使用):

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

credentials: "include" オプションは、ブラウザが Set-Cookie ヘッダーを処理し、csrftoken Cookie を保存することを保証します。 ブラウザの開発者ツールのネットワーク タブを調べて、Cookie が設定されていることを確認します。

POST リクエストの変更

最後に、ヘッダーに CSRF トークンを含めるように set_picture 関数を変更します。

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 })
    });
}

これにより、X-CSRFToken Cookie の値を含む csrftoken ヘッダーが追加され、POST リクエストの成功が可能になります。

重要な考慮事項

このアプローチには、特にフロントエンドとバックエンドを異なるドメインにデプロイする場合に制限があります。 ブラウザのセキュリティ ポリシーにより、サードパーティ Cookie の設定またはアクセスが妨げられ、CSRF トークンの管理に影響を与える可能性があります。

リソース

• Django CSRF ドキュメント
• Django CSRF リファレンス
• CORS ドキュメント
• django-cors-headers
• ジャンゴ CSRF_TRUSTED_ORIGINS
• ソースコード

以上がDjango および AJAX リクエストでの CSRF 保護の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。