業務でCORSというワードをたまに耳にするのですが、何のことだか分からなかったので、調べてみました。
参考文献
オリジン間リソース共有 (CORS) - HTTP | MDN
CORSとは?
オリジン間リソース共有(CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。
名称 | CORS |
---|---|
読み方 | コルス |
由来 | Cross-Origin Resource Sharing |
前提情報
- ブラウザは様々なオリジンに対してアクセスを実施する。
- 通常、ブラウザはオリジンAへアクセスしたときの情報(レスポンス等)を、別のオリジンBに渡すことはしない。
- ただし、一定の条件を満たす別オリジンに対してはオリジンの情報を渡すことができる。
単純リクエスト
CORS対応時
- ブラウザは、オリジンBからのレスポンスをオリジンAに入力してよいかをオリジンBに確認する。
- オリジンBへのリクエスト時の
HTTP-Header
にOrigin
キーを追加、オリジンAのオリジンをセットする。 - オリジンBは、オリジンB自身が管理しているアクセス許可リストにオリジンAが登録されていることを確認する。
- 事前に許可した相手からのアクセスであることが確認できた場合、オリジンBはブラウザに対して
HTTP-Header
のAccess-Control-Allow-Origen
キーにオリジンAを追加したレスポンスで応答する。
- オリジンBへのリクエスト時の
- ブラウザは、オリジンBのレスポンスをオリジンAへの入力として使用することが許可されていることを認識する。
CORS非対応時
- ブラウザは、オリジンBからのレスポンスをオリジンAに入力してよいかをオリジンBに確認する。
- オリジンBへのリクエスト時の
HTTP-Header
にOrigin
キーを追加、オリジンAのオリジンをセットする。 - オリジンBは、オリジンB自身が管理しているアクセス許可リストにオリジンAが登録されていることを確認する。
- 事前に許可した相手からのアクセスであることが確認できなかった場合、オリジンBはブラウザに対してパラメータエラーを通知する
- オリジンBへのリクエスト時の
(サーバBのAPIが)OpenAPIの場合
- ブラウザは、オリジンBからのレスポンスをオリジンAに入力してよいかをオリジンBに確認する。
- オリジンBへのリクエスト時の
HTTP-Header
にOrigin
キーを追加、オリジンAのオリジンをセットする。 - オリジンBは、ブラウザに対して
HTTP-Header
のAccess-Control-Allow-Origen
キーに*
を追加したレスポンスで応答する。
- オリジンBへのリクエスト時の
- ブラウザは、オリジンBのレスポンスをオリジンAへの入力として使用することが許可されていることを認識する。
プリフライトリクエスト
「プリフライト」リクエストは始めにOPTIONS
メソッドによる HTTPリクエスト
を他のドメインにあるリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめます。サイト間リクエストがユーザーデータに影響を与える可能性があるような場合に、このようにプリフライトを行います。