Django で CSRF トークンを Ajax 送信する方法｜X-CSRFToken ヘッダー

▶

編集

この記事の要点

Django は POST / PUT / PATCH / DELETE に CSRF トークンを要求する。無いと 403 になる
Ajax では X-CSRFToken ヘッダーで送る。ヘッダー名は CSRF_HEADER_NAME で決まっている
トークンの入手は 2 通り。Cookie csrftoken から読むか、テンプレートに埋め込む
CSRF_USE_SESSIONS = True や CSRF_COOKIE_HTTPONLY = True のときは Cookie から読めない
@csrf_exempt で無効化するのは最後の手段。攻撃を通す穴になる

なぜ 403 になるのか

django.middleware.csrf.CsrfViewMiddleware は、安全でないメソッド（POST / PUT / PATCH / DELETE）のリクエストに対して、送られてきたトークンとサーバー側のトークンを突き合わせます。一致しないと次のエラーになります。

Forbidden (403)
CSRF verification failed. Request aborted.
Reason given for failure: CSRF token missing.

通常のフォームでは {% csrf_token %} が hidden の input を出力するので自動的に通ります。Ajax は自分でトークンを付けない限り必ず失敗します。

方法 1: Cookie から読んでヘッダーに付ける（標準的）

Django は既定で csrftoken という Cookie にトークンを入れます。JavaScript でこれを読み、X-CSRFToken ヘッダーに載せます。

function getCookie(name) {
  const m = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
  return m ? decodeURIComponent(m[2]) : null;
}

const csrftoken = getCookie("csrftoken");

fetch("/api/users/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-CSRFToken": csrftoken,
  },
  body: JSON.stringify({ name: "田中" }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

jQuery を使っている場合は、全リクエストにまとめて付けられます。

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type)) {
      xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
    }
  },
});

方法 2: テンプレートに埋め込んで読む

CSRF_COOKIE_HTTPONLY = True や CSRF_USE_SESSIONS = True にしている場合、Cookie を JavaScript から読めません。テンプレート側で値を出力します。

<!-- テンプレート -->
{% csrf_token %}

<script>
  const csrftoken = document.querySelector("[name=csrfmiddlewaretoken]").value;
</script>

フォームが無いページでは、{{ csrf_token }} でトークン文字列そのものを出力できます。

<meta name="csrf-token" content="{{ csrf_token }}">

<script>
  const csrftoken = document.querySelector("meta[name=csrf-token]").content;
</script>

方法 3: フォームデータに含める

JSON ではなくフォーム形式で送る場合は、ヘッダーではなく csrfmiddlewaretoken というフィールド名で本文に入れても通ります。

const form = document.querySelector("#my-form");
fetch("/api/users/", {
  method: "POST",
  body: new FormData(form),   // {% csrf_token %} が入っていれば自動で含まれる
});

FormData を使うときは Content-Type を自分で指定しないでください。境界文字列がブラウザによって付けられるため、手動で書くと壊れます。

ビュー側

import json
from django.http import JsonResponse
from django.views.decorators.http import require_POST

@require_POST
def create_user(request):
    data = json.loads(request.body)      # JSON は request.POST に入らない
    return JsonResponse({"ok": True, "name": data["name"]})

Content-Type: application/json で送ったデータは request.POST ではなく request.body に入ります。ここを取り違えると MultiValueDictKeyError になります。

それでも 403 になるとき

Reason given for failure	原因
`CSRF token missing`	ヘッダーもフォームフィールドも付いていない
`CSRF cookie not set`	Cookie が発行されていない。`@ensure_csrf_cookie` を付けた GET を一度通す
`CSRF token incorrect`	別のセッションのトークンを使っている。再取得する
`Origin checking failed`	`CSRF_TRUSTED_ORIGINS` にスキーム付きで追加する
`Referer checking failed`	HTTPS で Referer が送られていない。リバースプロキシの設定を見直す

# settings.py
CSRF_TRUSTED_ORIGINS = ["https://example.com"]   # スキームを省略すると起動時にエラー
CSRF_COOKIE_SECURE = True                        # 本番（HTTPS）では有効に
CSRF_COOKIE_SAMESITE = "Lax"

# views.py — SPA などで先に Cookie を発行しておきたい場合
from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def index(request):
    return render(request, "index.html")

@csrf_exempt を使ってよい場面

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt          # CSRF 検証を丸ごと外す
def webhook(request):
    ...

外してよいのは、Cookie による認証を一切使わないエンドポイントだけです。外部サービスからの Webhook などが該当し、その場合は署名検証など別の手段で正当性を確かめます。

「動かないからとりあえず付ける」は、ログイン中のユーザーに意図しない操作をさせる CSRF 攻撃をそのまま通すことになります。ブラウザから叩く画面用の API で外してはいけません。

ページ一覧

その他