CORSについてざっくり理解

CORSとは何か調べていたら知らない単語がたくさん出てきて混乱したのでメモ

前提

オリジン

ブラウザがリクエストを送る先のURLの組み合わせ（ブラウザから見た通信先の論理的なサーバ）のこと。
スキーム(http/https) + ホスト名 + ポート番号 の組み合わせで定義される。

• 例1: https://example.com:443 と https://example.com:8080
  → 異なるオリジン（ポート番号が違う）
• 例2: https://example.com と http://example.com
  → 異なるオリジン（スキームが違う）

同一オリジンポリシー

ブラウザにはセキュリティ機能として、同一オリジンポリシーがある。
ブラウザがJavaScript等で別オリジンのリソースにアクセスして操作することを制限する仕組み。
「同じオリジンのページからしかそのオリジンへリクエストできない」と考えてOK。

これにより、悪意のあるウェブサイトがブラウザ内でスクリプトを実行し、別のサイトのデータを取得するなどの攻撃を防ぐことができる。
ブラウザには基本機能として組み込まれている。

CORSとは

Cross Origin Resource Sharingの略。
同一オリジンポリシーの制約を回避し、異なるオリジンからのリソースアクセスを許可する仕組みのこと。
基本的には「このオリジンからのリクエストは許可する」という設定をサーバ側で行う。

仕組み

• ブラウザからのアクセスを制限する仕組みで、リクエスト元のオリジンによってレスポンスを利用できるかどうかを制御する。
• バックエンドが許可・拒否の判断を行い、ブラウザはその結果（CORSヘッダ）に従ってレスポンスを利用できるか制御する。
• ブラウザが制御の主体であるため、サーバー間通信などブラウザ経由以外のアクセスには制限はかからない。

動作パターン

※ ブラウザが勝手にやってくれるので、特に意識する必要はない。

シンプルリクエスト
単純なGET/POSTリクエストなど。
直接リクエストが送信されレスポンスも返るが、ブラウザ側がCORSヘッダに基づきレスポンスの利用可否を制御する。

プリフライトリクエスト
複雑なリクエストの場合、ブラウザが事前にOPTIONSメソッドで許可確認（プリフライト）を行う。
プリフライトが成功すれば実際のリクエストが送信され、レスポンスも返る。
プリフライトが失敗すれば実際のリクエストは送信されない。

リバースプロキシとの関係

ブラウザが取得するレスポンスにCORSヘッダが含まれていればよいため、ブラウザ-バックエンド間にリバースプロキシが入る場合はリバプロ上にCORSを設定することで一括管理を行うことができる。

まとめ

• 同一オリジンポリシー：ブラウザの制約。
• CORS：その制約を緩める仕組みで、サーバー側でオリジン単位の許可設定を行う。
• 制御主体はブラウザ、サーバーは判断のみ行う。