Meg Blog

CORSの基本

Web全般

2021.5.14

なんとなくわかったつもりになっていたCORSについて、ちゃんと理解するためにまとめてみました。

CORSとは

Cross-Origin Resource Sharing、日本語訳するとオリジン間リソース共有のこと。

Originとは

オリジンとは、プロトコルとドメイン、ポート番号のこと。

プロトコル、ドメイン、ポート番号

  • プロトコル：ルール、決まり。この決まりでリクエストします、という宣言。
  • ドメイン：インターネット上の住所。
  • ポート番号：玄関の番号。

前提としてのSame Origin Policy

クライアント側のWebアプリケーションに適用されるセキュリティルールの１つ。 日本語訳すると同一オリジン（生成元）ポリシー。

同一オリジンポリシーは重要なセキュリティの仕組みであり、あるオリジンから読み込まれた文書やスクリプトが、どのように他のオリジンからのリソースと対話することができるかを制限するものです。悪意ある行動を起こしかねないリソースを分離し、攻撃の可能性を縮小するのに役立ちます。 MDNより

現代の主要なブラウザはすべて、Same Origin Policyに基づく制限を実装しています。

簡単に言うと、JavaScriptで自由にやりとりできるところは、そのJavaScriptをとってきたところと同一の場所だけに制限されるのです。

同一オリジンかどうかは、前述のとおりホスト、ポート番号、プロトコルによって判断されます。 ホスト、ポート番号、プロトコルのいずれか1つでも違う場合はSame Origin Policyの対象となってリクエストに失敗します。

つまり、CORSとは

CORSは、原則Same Origin Policyによって同一オリジン間でないとできないやりとりを、異なるオリジン間でも安全に許可する方法です。

具体的な実装方法

CORSは、HTTPリクエストを行う際のヘッダーに情報を記述します。

まず、HTTPリクエストを「単純なHTTPリクエスト（シンプルリクエスト）」と「単純でないHTTPリクエスト（プリフライトリクエスト）」に分類します。

単純なHTTPリクエスト（シンプルリクエスト）

  • HTTP のメソッドとしてGET、POST、HEADを使う
  • Accept、Accept-Language、Content-Typeなどの基本的な HTTP ヘッダーがセットされただけのリクエスト（そのうちContent-Typeはtext/plain、application/x-www-form-urlencoded、multipart/form-dataの値がセットされたもの）

以上にあてはまるものは、「単純なHTTPリクエスト」としてそのままリクエストを送信し、サーバーからの応答をチェックします。

シンプルリクエストのながれ

  1. ブラウザがリクエストにOriginヘッダーを追加（リクエストの送信元の情報がセットされる
Origin: https://test.co.jp
  1. サーバー側でOriginヘッダーをチェックしてリクエストを許可するか判断
  2. 許可する場合、Access-Control-Allow-Originヘッダーをセットして応答を返す
Access-Control-Allow-Origin: http://test.co.jp //特定のサイトを許可
Access-Control-Allow-Origin: *   // 全てのサイトを許可
Access-Control-Allow-Headers "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept"  //フレームワークにより異なる
  1. ブラウザ側のJavaScriptは、サーバーから許可があることを確認してからレスポンスデータを渡す（許可がなければエラーとなる）

単純でないHTTPリクエスト（プリフライトリクエスト）

シンプルリクエスト以外のHTTPリクエストは単純でないHTTPリクエスト（プリフライトリクエスト）に分類されます。

プリフライトリクエストの場合、ブラウザのJavaScriptからサーバーに事前問い合わせ（プリフライト）を行い、アクセスが許可されるか確認します。

プリフライトリクエストのながれ

  1. リクエストの始めにOPTIONSメソッドで対象の異なるオリジンにリクエストを送り、実際のリクエストを送っても問題ないか確認
  2. Originヘッダーの他、Access-Control-Request-MethodヘッダーやAccess-Control-Request-Headersヘッダーを使う
  3. サーバーはアクセスを許可する場合、Access-Control-Allow-Originヘッダーの他、Access-Control-Request-MethodヘッダーやAccess-Control-Request-Headersヘッダーを返す プリフライトの有効期間となるAccess-Control-Max-Ageも設定
Access-Control-Allow-Methods: PUT, DELETE, PATCH
  1. サーバーのアクセス許可が確認できてから、実際のHTTPリクエストが送信される

まとめ

CORSの基本的な部分について理解できました。 今後は具体的な実装方法についても勉強していきます！

Megumi Tanimoto

Editor

フロントエンドエンジニア１年目。
エンジニアライフ、技術的なアウトプットを中心に発信します。