Help us understand the problem. What is going on with this article?

CORSとは何ですか?

CORS (Cross-Origin Resource Sharing)

  • HTTP ヘッダーの転送で構成されるシステムであり、
    ブラウザーがオリジンをまたいだリクエストのレスポンスに、フロントエンドの JavaScript コードがアクセスすることをブロックするかどうかを決めるものです。

  • CORS はウェブサーバーに、リソースへのオリジンをまたいだアクセスを許可すると言うことができるようにします。

  • 他のオリジンから私のリソースに勝手にアクセスができないようにするため使います。

リクエストヘッダーには以下のようなものがあります。

  • Origin
    • どのオリジンからアクセスしているかを示します。
  • Access-Control-Request-Method
    • プリフライトリクエストを発行する際に、実際のリクエストを行う際に使用される HTTP メソッドをサーバーに知らせるために使用します。
  • Access-Control-Request-Headers
    • プリフライトリクエストを発行する際に、実際のリクエストを行う際に使用される HTTP ヘッダーをサーバーに知らせるために使用します。

レスポンスヘッダーには以下のようなものがあります。

  • Access-Control-Allow-Origin
    • レスポンスを共有してよいかどうかを示します。
    • ブラウザが該当オリジン資源にアクセスできるように許可します。もしくは「*」はcredentialsがないリクエストに限ってすべてのオリジンにアクセスできるように許可します。
  • Access-Control-Expose-Headers
    • レスポンスの一部としてどのヘッダーを公開してよいかを、ヘッダー名を列挙することで示します。
    • ラウザがアクセスできるサーバーのホワイトリストヘッダーを許可します。
  • Access-Control-Max-Age
    • プリフライトリクエストの結果をキャッシュできる時間を示します。
  • Access-Control-Allow-Credentials
    • 簡単なGETリクエストはpreflightされないので認証があるリソースをアクセスした場合、ヘッダーがリソースとともに返却されなければブラウザから応答を無視し、コンテンツで返却しません。
    • 認証情報フラグ(Credentials)が true の場合、リクエストに対するレスポンスを公開してよいかどうかを示します。
  • Access-Control-Allow-Methods
    • プリフライトリクエストへのレスポンスで、リソースにアクセスするときに使用してよいメソッドを指定します。
  • Access-Control-Allow-Headers
    • プリフライトリクエストへのレスポンスで使用され、実際のリクエストを行う際に使用してよい HTTP ヘッダーを示します。

CORSはなぜ必要なのか

もし私がサービスしていないサイトからセッションのリクエストがあり、取得できるとしたらそのサイトは
私のセッション奪取したらそのセッションで悪いことをするかもしれません。
なので、ブラウザではこうしたリクエストを防いてくれています。
フィッシングサイトが代表的な攻撃の事例でこういう攻撃は止めて私が許可したオリジンだけがリクエストできるようにするため、必要です。

CORSはどのように動くのか

ブラウザがリクエストをするとき、ヘッダーに追加情報を含めます。
私のオリジンは何があってどのメソッドを使ってリクエストをし、どのヘッダーが含まれているかをいれてサーバーにリクエストを投げます。
サーバーはサーバーが応答できるオリジンをヘッダーに入れてブラウザに送ります。
ブラウザがこのヘッダーを確認し該当オリジンからリクエストができるのであればリソースのリクエストを許可し、できないのであればエラーが発生します。

ソース

参考

Anveloper
諦めなければできるだろう!
https://anveloper.wordpress.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away