なんとなく「CORS（コース）」って名前は聞いたことあるけど、実際どうして必要なのか、ちゃんと考えたことあんまりなかったんだよね💭
CORSの大まかな役割は「別のサイト（オリジン）に認証情報つきでリクエストを送らせないようにすること」なんだけど、逆に言うと「なんでそんなリクエストが勝手に送られるの？」って疑問が浮かんだの🥺✨
「なんでブラウザは別のサイトにもクッキーを送っちゃうの？」って話
たとえば銀行のサイトでログインしたら、ブラウザは銀行用のSESSION_TOKENみたいなクッキーを持ってるよね？
このクッキーは、銀行のサイトにアクセスした時だけ送られてくるものなんだけど…
問題は「もし、別の変なサイトがこっそり銀行にリクエストを飛ばしたときにも、そのクッキーが一緒に送られちゃうことがある」ってこと😳
これだと、本人の知らないうちに「銀行サイトへの認証済みリクエスト」が別のサイトから発生しちゃって、ヤバイよね？
そこで登場！「同一生成元ポリシー（SOP）」とCORS
ブラウザはこの問題を防ぐために、「同一生成元ポリシー（SOP）」というルールを設けてるよ✨
これで、別のサイトからのリクエストがあっても、内容を勝手に読めなかったり、リクエスト自体を拒否したりしてるのね🛡️
「全部ブロックじゃなくて、クッキーなしならどう？」ってアイデア
ここがわたしがちょっとモヤッとしたポイント！
ブラウザが別のサイトにリクエスト送るとき、
- 今は基本的にクッキーを一緒に送るからヤバイ
- だからSOPやCORSで制御してる
だけど、もし「別のサイトからのリクエストは許すけど、クッキーは送らないよ」ってできたら？
それだと認証情報は漏れないから安全だし、
APIのテストとか、認証いらないサービスとの連携はもっと気軽にできるかも！って話なんだよね🤔✨
なんでそんなことやらないの？と思ったら…
実は昔からの仕組みや互換性の問題があって、
ブラウザの設計は「クッキーは送る」って前提で作られてる部分が多いみたい💭
だから「別のサイトからのリクエストはクッキー無しで」って動きはまだ一般的じゃないんだって🥺
まとめ💡
- CORSは認証情報つきの不正なクロスサイトリクエストを防ぐためにある
- 問題の根本は、ブラウザが別サイトへのリクエストにクッキーを送ってしまうことにある
- 「リクエストはOKだけど、クッキーは送らない」って選択肢もありそうだけど、
実装の都合や過去の名残でまだ広まってない感じ
こんな感じで、ブラウザの中でいろんなルールがからみあって、
安全にWebを使えるようになってるんだなぁって思ったよ🌸
ちょっと難しい話だけど、知っておくとなんか安心できるよね✨
はてな
コメント
グレース
CORSとSame-Origin Policy（SOP）は別物で、SOPはサイト同士で勝手にアクセスし合えない仕組み、CORSはそれをサーバーが許可する例外ルールです。
クリス
CORSはSOPの抜け道みたいなもので、昔はJSON-Pで苦労してたけど、今は便利な仕組みとして使われてるんだよ。
ハンナ
SOPはデフォルトでデータを守ってて、CORSは別サイト間でアクセスを許可するための仕組みだけど、多くの開発者はこれをよく理解してないね。
ロバート
「そもそもなんで起きるの？」って話だけど、ブラウザは基本的に勝手に資格情報を他サイトに送らせないようにしてるんだよ。
リリー
質問が逆で、そもそもSOPがあるのはセキュリティのためで、悪意あるサイトが勝手に銀行操作とかできないようにしてるんだ。
ジョージ
昔はiframeとかで簡単に他サイトの情報を盗めたけど、今はCORSでどこからのリクエストかチェックしてるんだよ。
ロバート
例えばあなたが銀行にログイン中に、悪意あるサイトが勝手に資金を動かせないのはCORSのおかげなんだ。
クリス
CORSは制限を解除するための仕組みで、普通なら不可能なリクエストを可能にしてくれるんだよ。
グレース
同じドメインじゃないとAjaxが使えないのがSOPで、複数ドメインを使う時にCORSが必要になるんだ。
ハンナ
CORSの話を聞くと、あの新人が簡単な問題も解決できてないのがよく分かるよね。
リリー
セキュリティ的にバックエンドはリクエスト元をちゃんと判断するべきだよ。
ジョージ
悪用例としては、見えないiframeでInstagramのフォローボタンを勝手に押させるみたいなのがあるから、InstagramはCORSで防いでる。
ロバート
CORSは他人が自分のバックエンドを勝手に使うのを防ぐためでもある。
クリス
OAuthみたいに別サイト間で安全にデータ共有したい時にSOPで守りつつ、CORSで必要な許可だけ出すんだよ。
ベン
なるほど、CORSにはちゃんとした理由があって、ただの嫌がらせだと思ってたよ（笑）。
