CORS（Cross-Origin Resource Sharing）について

クロスオリジンリソース共有とは何か

• アプリを統合するためのメカニズム
• 特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義する

なぜ重要か

• 元々はCSRF問題を防ぐ目的
  • クライアントリクエストが被害者ブラウザから別のアプリに偽のリクエストが送信されていた
    • これを防ぐために全てのブラウザが同一オリジンポリシーを実装するようになった

同一オリジンポリシーとは

• クライアントのURLと同じリソースにのみリクエストを送信できるようになっている
• クライアントのURLのプロトコル・ポート・ホスト名は全て要求するサーバーと一致する必要がある

そもそもURLの構成は

• 例: https://www.backtech.co.jp
  • https←プロトコル
  • www←ホスト名
  • backtech←サードレベルドメイン
  • co←セカンドレベルドメイン
  • jp←トップレベルドメイン
• プロトコル
  • インターネットを通じて、データのやり取りをする際の取り決め・ルールを意味する
    • 代表的なプロトコル
      • http
        • 通信が平文であり傍受され改竄されるリスクあり
      • https
        • SSL(secure sockets layer)/TSL(transport layer security) を使って通信を暗号化しているため、傍受されても改竄されにくい
• ホスト
  • ネットワークに接続された機器や、サーバーを識別するための名前
    • 任意で決められるが world wide web の略である「www」がよく使われる
      • 不要であれば省略もできる
• ドメイン
  • ホームページの住所を表す文字列
    • トップレベルドメイン
      • jp com net 国や地域を表す
    • セカンドレベルドメイン
      • co or など組織の種類や組織名を表す
    • サードレベルドメイン
      • wwwの後に表示される、企業名や大学名を表すことが多く、重複のない範囲で自由に設定可能

同一オリジンポリシーではないものは

• プロトコルが異なる
• ポート番号が異なる
• ホストが異なる

問題点

• 安全だが柔軟性がない
  • これを解決するためにCORSがあるとよい

クロスオリジンリソース共有の仕組み

1. ブラウザは現在のオリジンの、プロトコル・ホスト・ポートに関する情報を含むオリジンヘッダーをリクエストに追加
2. サーバーは現在のオリジンヘッダーをチェックし、要求されたデータをアクセス制御許可オリジンへのヘッダーで応答
3. ブラウザはアクセス制御要求ヘッダーをみて、返されたデータをクライアントアプリケーションと共有

自分の言葉で書く

セキュリティ上の都合で、プロトコル・ポート番号・ホストのいずれかが異なれば、同一オリジンポリシーというルールを作って、ブラウザとサーバーのアクセスはできないようになっているが、一つのブラウザで複数のオリジンとやり取りをしたい場合がある。フロントとバックエンドが異なるポート番号を使用している場合があり、これを共有するためにCORSを使う。
サーバーからCORSに関するレスポンスヘッダーを送信することで許可して、上記を可能にする。

最後に

• なんとなく理解しているつもりにだったが、ちゃんとわかっていない部分だった。まだ完全理解には至っていないがこの記事を書く前よりはイメージができるようになりました。