AZ Tools

CORS ヘッダービルダー

ネットワーク

ブラウザのクロスオリジンリクエストを満たすためにサーバーが送信する必要のあるレスポンスヘッダーを構築する。Allow-Origin、Allow-Methods、Allow-Headers、Expose-Headers、Allow-Credentials、Max-Age、および Vary: Origin ヒントを含む。よくある落とし穴にフラグを立てる:* を credentials と組み合わせる(ブラウザがブロックする)、Origin: null を受け入れる(攻撃者がスプーフィングできる)、または不合理に長い時間プリフライトをキャッシュするようブラウザに要求する。

プリセット
Allow-Methods
レスポンスヘッダー
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 600
Vary: Origin

これらをプリフライト OPTIONS *と* 実際のリクエストへのレスポンスに適用する。Origin をエコーする場合、エッジキャッシュには Vary: Origin が必要。

使い方

  1. あなたのシナリオに合うプリセットから始める。
  2. オリジンを設定する(完全公開には *、credentialed API にはサーバーサイドでリクエストの Origin をエコー)。
  3. エンドポイントが実際に受け入れるメソッドとヘッダーのみを選択 — 狭いほど安全。
  4. ヘッダーをサーバー、エッジワーカー、またはフレームワークミドルウェアにコピー。

よくある質問

* と credentials を一緒に使える?
いいえ。fetch 仕様は Access-Control-Allow-Origin: * と Access-Control-Allow-Credentials: true をペアにしたレスポンスを拒否する。credentials を落とすか、許可リストに対して検証した後で実際のリクエスト Origin をサーバーサイドでエコーする。
なぜ Vary: Origin が推奨される?
Origin を Allow-Origin にエコーすると、ダウンストリームのキャッシュは保存されたレスポンスをリクエストの Origin ヘッダーで変動させる必要がある;そうでなければ、あるサイトの CORS レスポンスを別のサイトのリクエストに提供してしまう可能性がある。Vary: Origin はキャッシュにそのヘッダーをキーにするよう伝える。

関連ツール