オリジン間リソース共有(Cross-Origin-Resource-Sharing、CORS) 概要

オリジン間リソース共有(Cross-Origin-Resource-Sharing、CORS) とは

• あるオリジンで動作するウェブアプリに、異なるオリジンに存在するリソースへのアクセス権を与えるようブラウザに指示する仕組み。

  • オリジン
    * ウェブコンテンツにアクセスするために使われる URLのプロトコル、 ドメイン(ホスト)、 ポート によって定義される情報。
    * スキーム、ドメイン(ホスト)、ポートがすべて一致した場合、二つのオブジェクトは同一オリジンであると言える。

    • 例

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

• オリジン間リクエスト例

  

  • https://domain-a.com で提供されているウェブアプリのフロントエンド JavaScript がXMLHttpRequest を使用して https://domain-b.com/image-b.png へリクエストを行う場合
    • セキュリティ上の理由から、ブラウザは、スクリプトによって実行されるオリジン間 HTTP リクエストを制限する。
    • XMLHttpRequestや Fetchは同一オリジンポリシー(あるオリジンのリソースは、そのリソースから他のオリジンのリソースにアクセスできないように制限する)に従う。
    • 上述のAPI を使用するウェブアプリは、そのアプリと同一オリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンの場合は正しい CORS ヘッダーを含んでいる必要がある。

アクセス制御方法

単純リクエスト

• サーバー側でレスポンスヘッダーAccess-Control-Allow-Originにリクエスト元オリジンを指定して、レスポンスを返却する。
  

プリフライトリクエスト

• OPTIONSメソッドを指定した HTTP リクエストを他ドメインのリソースに向けて送信し、実際のリクエストを送信しても問題ないかを確認する。
  • オリジン間のリクエストがユーザーデータに影響を与える可能性があるような場合に行う。
  • Access-Control-Allow-Methods ：リソースへのアクセス時に許可するメソッドを指定する。プリフライトリクエストのレスポンスで使用する。
  • Access-Control-Allow-Headers ：リクエストでどの HTTP ヘッダーを使用できるかを示すために、プリフライトリクエストのレスポンスで使用する。
    

資格情報付きリクエスト

• クッキー付きでリクエストする。

• サーバーはアクセスを許可する場合、Access-Control-Allow-Credentials:trueを付与してレスポンスを返却する。

  • Access-Control-Allow-Credentials ：リクエストへのレスポンスを開示してよいか否かを示すヘッダー。プリフライトリクエストのレスポンスの一部として用いられたときは、実際のリクエストで資格情報を使用してよいかを示す。
    

参考情報

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