CORSとは何かを1分で理解する

CORSとは

オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS)の略

あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組み

 

オリジンとは

URLのスキーム(プロトコル) + ホスト(ドメイン) + ポート番号 を合わせたもの

オリジン比較例

以下の2つのURLはスキーム(http) + ホスト(example.com) + ポート番号が一致するため、同じオリジン

  • http://example.com/app1/index.html
  • http://example.com/app2/index.html

以下の2つのURLはスキーム(http ≠ https)であるため、異なるオリジン

  • http://example.com/app1
  • https://example.com/app2

 

同一オリジンポリシー

異なるオリジンへのリソースアクセスを制限することで、悪意のあるアクセスをシャットアウトすることができる。javascriptのfetch()やXMLHttpReuestは同一オリジンポリシーに従う。

つまり、アプリ開発者がポリシーを遵守するように気を付けるというよりかは、既にAPIレベルで同一オリジンポリシーを守るという環境が出来上がっている。

異なるオリジンにアクセスをするためにはどうするか

アクセスされる側は許可するURL等の情報をホワイトリスト形式で事前に登録しておく。

アクセスをする側は、通常のリクエストを行う前にプリフライトリクエストというリクエストを送信し、
私はホワイトリストに含まれていますか?という確認を行う。

AzuleにおけるCORSの定義

AzuleでもリソースごとにCORSを定義することができる。

最長有効時間とは

毎回、プリフライトリクエストを送るのはコストになるため、初めにプリフライトリクエストありで、アクセスをしてもよいということが分かったら、○○秒間はプリフライトリクエストなしに普通にリクエストを投げてもいいですよという許可を与えるもの

 

 

参考

オリジン間リソース共有 (CORS)| MDN

オリジン|MDN

Azure Storage に対するクロスオリジン リソース共有 (CORS) のサポート | Microsoft Learn