はじめに
こんにちは、エンジニアのkeitaMaxです。
CORSについて曖昧な理解のままだったので、一度しっかり整理しようと思い、この記事を書きました。
CORSとは
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、 HTTP ヘッダーベースの仕組みを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
(引用；https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/CORS)
CORSとは、異なるオリジン間でブラウザがアクセス制御を行う仕組みです。
ブラウザには「同一オリジンポリシー」というセキュリティ制約があり、
- プロトコル（http/https）
- ドメイン
- ポート番号
のいずれかが違うと、JavaScriptから自由にデータを取得できません。
サーバーは普通にレスポンス返してるが、ブラウザが制御してJavaScriptにデータを渡さない仕組みのことです。
CORSはどうやって実現されるのか
流れとしては以下のような感じです
- ブラウザがAPIへリクエストを送る
- APIサーバーがレスポンスにCORSヘッダーを付与する
- ブラウザがヘッダーを確認する
- 許可されていればレスポンスをJavaScriptに渡す
Access-Control-Allow-Origin: https://example.com
上のようなヘッダーがあると、https://example.comからのデータをブラウザはJavaScriptに渡すことができます。
CORSエラーについて
フロント開発をしているとよくCORSエラーに遭遇すると思います。
これはサーバー側のCORS設定が適切でない場合に発生します。
つまり、APIレスポンスに
Access-Control-Allow-Origin: {自分のオリジン}
がない場合、ブラウザがブロックします。
サーバ側の設定で許すオリジンをあらかじめ設定しておかなくてはいけません。
多くの場合はCORS設定不足のために起こっています。
ただ、CORS設定をしたのにAccess-Control-Allow-Originが返却されていないか、Access-Control-Allow-Originに使用したいオリジンを設定していないかだと思います。
ただ、CORSを設定していてもCORSエラーが出る場面に出会ったことがあるので、それを簡単に記載します。
サーバーエラー時にCORSヘッダーが付かない
API内部でエラーが発生し、サーバーがデフォルトのHTMLエラーページを返す場合があります。
この場合
- CORSヘッダーが付かない
- ブラウザはCORSエラーとして表示
実際はCORSではなくサーバーエラーということになってしまいます。
アプリケーション到達前にブロックされている
例えば
- Cloudflare / WAF
- nginx設定ミス
- CDNの制限
などでブロックされた場合です。
アプリまで届かないためCORSヘッダーが付かず、結果としてCORSエラーに見えます。
CORSエラーでもサーバーは処理をする
ここは誤解しやすいポイントがあります。
CORSはブラウザの制御機能なので、
- サーバーは普通にリクエストを処理する
- レスポンスも返す
- ただしブラウザがJSに渡さない
という挙動になります。
つまりこれだけの機能だと、不正なPOSTでもサーバー側では実行される可能性があります。
そこでCORSにはプリフライトという機能があります。
プリフライトについて
CORSの機能の一部にプリフライトというものがあります。
これは以下のような場合などに行われます
- PUT / PATCH / DELETE などのメソッド
- Authorizationヘッダー付きリクエスト(シンプルリクエスト条件を満たさない)
- application/json など特定Content-Type
流れは次の通りです。
- JSがPUTなどのリクエストを要求
- ブラウザがOPTIONSリクエストを先に送る（プリフライト）
- サーバーが許可ヘッダーを返す
- 問題なければ本リクエスト送信
もしプリフライトで許可されなければ、4でCORSエラーとなり、本リクエストが送信されることはありません。
つまり、プリフライトで許可されなかった場合、PUT/DELETEなどの更新系リクエストや、Cookie・Authorizationヘッダー付きリクエストもブラウザからは送信されません。
※ クロスオリジンの場合、fetch(url, { credentials: "include" })ないとCookieは送られないです
※ また、Cookieを利用する場合、CORS設定とは別に SameSite 属性の設定も必要になります。それはまた他の記事で書こうかと思っています。
ただしこれはブラウザの制御に過ぎないため、curlなどからは通常通りリクエスト可能です。
CORSはセキュリティ対策ではない点には注意が必要です。
おわりに
CORSはよく見るエラーですが、曖昧なまま来てしまっていたのでしっかり調べる機会をとって良かったと思います
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！
参考