Programming Self-Study Notebook

勉強したことを忘れないように! 思い出せるように!!

CORSって何?からスタート!

業務でCORSというワードをたまに耳にするのですが、何のことだか分からなかったので、調べてみました。

参考文献

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

CORSとは?

オリジン間リソース共有(CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。
名称 CORS
読み方 コルス
由来 Cross-Origin Resource Sharing

f:id:overworker:20210120230058p:plain

前提情報

  • ブラウザは様々なオリジンに対してアクセスを実施する。
    • 通常、ブラウザはオリジンAへアクセスしたときの情報(レスポンス等)を、別のオリジンBに渡すことはしない。
    • ただし、一定の条件を満たす別オリジンに対してはオリジンの情報を渡すことができる。

単純リクエス

CORS対応時

  • ブラウザは、オリジンBからのレスポンスをオリジンAに入力してよいかをオリジンBに確認する。
    • オリジンBへのリクエスト時のHTTP-HeaderOriginキーを追加、オリジンAのオリジンをセットする。
    • オリジンBは、オリジンB自身が管理しているアクセス許可リストにオリジンAが登録されていることを確認する。
    • 事前に許可した相手からのアクセスであることが確認できた場合、オリジンBはブラウザに対してHTTP-HeaderAccess-Control-Allow-OrigenキーにオリジンAを追加したレスポンスで応答する。
  • ブラウザは、オリジンBのレスポンスをオリジンAへの入力として使用することが許可されていることを認識する。

f:id:overworker:20210311235955p:plain

CORS非対応時

  • ブラウザは、オリジンBからのレスポンスをオリジンAに入力してよいかをオリジンBに確認する。
    • オリジンBへのリクエスト時のHTTP-HeaderOriginキーを追加、オリジンAのオリジンをセットする。
    • オリジンBは、オリジンB自身が管理しているアクセス許可リストにオリジンAが登録されていることを確認する。
    • 事前に許可した相手からのアクセスであることが確認できなかった場合、オリジンBはブラウザに対してパラメータエラーを通知する

f:id:overworker:20210312000311p:plain

(サーバBのAPIが)OpenAPIの場合

  • ブラウザは、オリジンBからのレスポンスをオリジンAに入力してよいかをオリジンBに確認する。
    • オリジンBへのリクエスト時のHTTP-HeaderOriginキーを追加、オリジンAのオリジンをセットする。
    • オリジンBは、ブラウザに対してHTTP-HeaderAccess-Control-Allow-Origenキーに*を追加したレスポンスで応答する。
  • ブラウザは、オリジンBのレスポンスをオリジンAへの入力として使用することが許可されていることを認識する。

f:id:overworker:20210312000845p:plain

プリフライトリクエス

「プリフライト」リクエストは始めにOPTIONSメソッドによる HTTPリクエストを他のドメインにあるリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめます。サイト間リクエストがユーザーデータに影響を与える可能性があるような場合に、このようにプリフライトを行います。

f:id:overworker:20210312001635p:plain