フロントエンドフレームワークとDjangoでCSRF対策！CSRF_TRUSTED_ORIGINS設定で安心開発

settings.CSRF_TRUSTED_ORIGINS は、DjangoのCSRF保護機能において、信頼できるオリジンを指定するための設定項目です。CSRF（Cross-Site Request Forgery）は、Webアプリケーションに対する不正な操作を防止するためのセキュリティ対策です。DjangoはデフォルトでCSRF保護機能を有効にしており、POSTリクエストを送信する際には、オリジンヘッダーと一致するCSRFトークンが必要になります。

settings.CSRF_TRUSTED_ORIGINS の役割

Djangoは、リクエストのオリジンヘッダーを検証し、settings.CSRF_TRUSTED_ORIGINS に設定されたリストに一致するかどうかを確認します。一致する場合、CSRFトークンの検証は省略されます。これは、以下の状況で特に役立ちます。

APIを公開している場合：APIを外部からのリクエストに開放している場合、settings.CSRF_TRUSTED_ORIGINS にAPIを呼び出すアプリケーションのオリジンを追加することで、CSRFトークンの検証を省略できます。
フロントエンドフレームワーク（React、Vue.jsなど）を使用している場合：フロントエンドフレームワークは、異なるオリジンからのリクエストを送信することがあります。settings.CSRF_TRUSTED_ORIGINS にフロントエンドフレームワークのオリジンを追加することで、CSRFトークンの検証を省略できます。

設定方法

settings.CSRF_TRUSTED_ORIGINS は、settings.py ファイル内に以下の形式で設定します。

CSRF_TRUSTED_ORIGINS = [
    'https://example.com/',
    'https://*.example.com',
    'http://localhost:8000',
]

ポート番号も指定できます。
ワイルドカードを使用することで、サブドメイン全体を指定することができます。
上記の例では、https://example.com/、https://*.example.com、http://localhost:8000 のオリジンからのリクエストは、CSRFトークンの検証を省略されます。

開発環境では、* を使用してすべてのオリジンを許可することがありますが、本番環境では絶対に使用しないでください。
settings.CSRF_TRUSTED_ORIGINS に設定するオリジンは、信頼できるものであることを確認してください。悪意のあるオリジンを追加すると、CSRF攻撃のリスクが高まります。

フロントエンドフレームワークによっては、CSRFトークンの自動挿入機能を提供しているものがあります。そのような機能を利用している場合は、settings.CSRF_TRUSTED_ORIGINS の設定が必要ない場合があります。
Django 3.2以降では、CSRF_COOKIE_SECURE と CSRF_COOKIE_HTTPONLY 設定も併用することを推奨しています。これらの設定は、CSRFトークンをより安全に保護します。

CSRF_TRUSTED_ORIGINS = [
    # フロントエンドフレームワークのオリジン
    'https://www.example.com',  # Reactアプリケーション
    'https://app.example.com',  # Vue.jsアプリケーション

    # APIを呼び出すアプリケーションのオリジン
    'https://api.example.org',

    # 開発環境用の設定
    'https://blog.hubspot.com/website/what-is-localhost',  # ローカルサーバー
    'https://blog.hubspot.com/website/what-is-localhost:8080',  # 別のポートで動作する開発サーバー
]

この例では、以下のオリジンからのリクエストはCSRFトークンの検証を省略されます。

開発サーバー (http://localhost:8080)
ローカルサーバー (http://localhost:8000)
APIサービス (https://api.example.org)
Vue.jsアプリケーション (https://app.example.com)
Reactアプリケーション (https://www.example.com)

この設定は、以下の状況で使用できます。

ローカル環境でDjangoアプリケーションを開発している場合
APIを公開して、外部アプリケーションから呼び出せるようにしている場合
ReactまたはVue.jsなどのフロントエンドフレームワークを使用して、シングルページアプリケーションを構築している場合

開発環境以外の環境では、* を使用してすべてのオリジンを許可することは絶対に避けてください。
settings.CSRF_TRUSTED_ORIGINS に設定するオリジンは、信頼できるものであることを確認してください。
上記の設定はあくまで例であり、使用する環境に合わせて変更する必要があります。

CORS ヘッダーの設定

CORS（Cross-Origin Resource Sharing）ヘッダーは、Web ブラウザーが異なるオリジンからのリクエストを許可するように設定するための仕組みです。settings.py ファイルに以下の設定を追加することで、CORS ヘッダーを設定できます。

CORS_ORIGIN_ALLOW_ALL = True

セキュリティミドルウェアの使用

Django には、CSRF 保護以外にもさまざまなセキュリティ機能を提供するミドルウェアが用意されています。以下のミドルウェアを MIDDLEWARE 設定に追加することで、セキュリティを強化できます。

MIDDLEWARE = [
    # ...
    'django.contrib.security.middleware.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

強力なパスワードポリシーの適用

強力なパスワードポリシーを適用することで、ブルートフォース攻撃などの攻撃を防ぐことができます。Django には、パスワードの長さ、複雑さ、再利用の制限などの設定を調整するためのパスワードポリシーフレームワークが用意されています。

最新のバージョンの Django を使用

Django の最新バージョンには、常に新しいセキュリティ機能が追加されています。最新バージョンを使用することで、最新のセキュリティ対策を適用できます。