はじめに
はじめまして！ノベルワークス入社2年目のそうまです！
今回はCORSについて調査した内容を纏めています！
概要
CORS（Cross-Origin Resource Sharing） とは、異なるオリジン間でのリソース共有制限を緩和するための仕組み です。
通常、ブラウザは セキュリティ上の制約（同一オリジンポリシー）により、異なるオリジンのリソースにはアクセスできません。
例えば、ある ウェブページが提供元とは異なるサーバーの API にリクエストを送信しても、デフォルトではリソースの共有はブロックされます。
しかし、サーバー側で CORS を適切に設定することで、特定のオリジンからのアクセスを許可できます。
オリジン
ここで言っているオリジンとは、ドメイン・プロトコル・ポートを指します。
何故必要なのか
異なるオリジン間でリソースの共有を可能にするためです！
公開APIではCORSを用いてリソースを共有する事で実現しています。(しかし、その代わりにセキュリティは落ちるので認証をしっかり実装する必要がある)
では、そもそもCORSを用いないとリソースの共有が出来ない 同一オリジンポリシー は何故必要なのか？
同一オリジンポリシーの必要性
例えば、以下のような個人情報を盗む攻撃が可能になってしまいます。
- ユーザーが
https://example.bank.comにログインする(クッキーに認証情報が保存する) - ユーザーが
https://akuyousimasu.comにアクセスする -
https://akuyousimasu.comのスクリプトが勝手にhttps://example.bank.com/v1/userにリクエストを送る - 銀行のAPIは「ログイン済みのユーザー」と判断し、個人情報を返してしまう
...でも認証をしっかりしておけば必要無いのでは？と思ってしまうんですが、セキュリティを緩和して不要な抜け道を作るよりかは、必要無ければ最初から絶対に通さない仕組みを採用すべきって事なんですかね？
ここに関しては別で調査します。
勘違いしていた事
同一オリジンポリシーは、GET・POST・PUT 等のリクエスト自体を制限する物だと思っていましたが、実際にはレスポンスの受け取りを制限するものなのでリクエスト自体は通ってしまいます。
なので、POST・PUT・DELETE は成功可否を受け取れずともサーバー側では処理してしまっているといった状態になります。
しかし、リクエスト自体も通らないケースがあるような気がする...。
それは実際のリクエストを送る前にプリフライトリクエストなるものを送っているからです！
プリフライトリクエストとは？
実際のリクエストを送る前にCORSの許可を確認し、問題があればリクエストをやめるような仕組みです。
プリフライトリクエストは OPTION メソッドで送信します。
開発者ツールを開いた事のある人であれば、誰しも見た事のあるこれです ↓
プリフライトリクエストをリクエスト時に強制するには、以下の設定が必要となります！
- API に
Authorizationヘッダーを必須にする - Content-Type を application/json にする
-
PUT,DELETE,PATCHメソッドを使用する
纏め
何かと詰まりやすいCORSの存在ですが、今回調査した事で存在意義がある程度理解出来たため、今後は顔馴染み程度にはなれそうです！
ただ、認証と同一ポリシーの関係性についてはまだ掘り下げる必要がありそうなので、次回以降の課題にしようと思います！