赤いエラーの正体：CORSはブラウザの「防犯ゲート」

どうも。Web開発してるとコンソールにいきなり出てくるあの真っ赤なエラー。うわーまたこれかってなったことありますよね。 今日は開発者なら誰もが一度は通る道、イライラさせられるあの CORSエラー の正体を解き明かしていこうと思います。 一緒にスッキリ解き明かしていきましょう。それでは、早速見ていきましょう。 さあこれです、これ。もう見飽きたよってくらいお馴染みの エラーメッセージ ですよね。 まるで通行止めの標識みたいに僕らの前に立ちはだかる。でもね、安心してください。 これって実は僕らをイライラさせるためじゃなくて、むしろ 僕らユーザーを守ってくれるすっごく大事な仕組み なんですよ。 今日はその裏側にあるストーリーを一緒に見ていきましょう。 さて、このややこしい話を分かりやすくするために、一つ面白い例え話をしてみましょう。 Webの世界全体がいわば世界地図みたいなものだと考えてみてください。色々な国があります。 まず左側、localhost:3000。これは自分のパソコンで開発してる アプリ がいる場所。これを自国と考えます。 右側の script.google.com は、例えば Google Apps Script みたいに外からデータを持ってきたい API サーバー、外国です。 自国から外国にあるデータを取りに行きたい、という状況ですね。さて、この自国と外国の間には巨大な壁があるんです。 そして厳格な警備員が立っています。その正体こそが僕らがいつも使っている ブラウザ なんですね。 ブラウザ は僕らを守るために、同一生成元ポリシー という 超厳格な法律 を持って国境を警備している セキュリティゲート なんです。 じゃあこのガチガチな国境をどうやったら安全に超えられるんでしょうか。その答えは ちゃんとした外交手続きを踏むこと にあります。 ゲートを超えるための礼儀正しいやり方、それこそがこの プリフライトリクエスト と呼ばれるものです。 ブラウザ が本番の荷物を送る前に、「これからこういう リクエスト を送りたいんですけど受け取ってもらえますかね？」と確認を先に入れるんです。 確認に使われるのが OPTIONS という メソッド で、偵察部隊のようなもの。付箋を貼って聞くような丁寧な感じですね。 この一連の流れ、外交プロトコル を詳しく見てみましょう。まず ステップ1、アプリ がデータが欲しいと リクエスト を投げます。 すると ステップ2、警備員である ブラウザ が リクエストを一旦ストップ させ、偵察部隊を先に外国サーバーに送るわけです。 ステップ3、ブラウザ は偵察部隊の返事をじーっと待ちます。ゲートを開けるための許可証はどうやって貰えるんでしょうか。 ここで大事なのが、鍵を握ってるのは ブラウザ でもアプリでもなく、リクエストを受け取る側の外国サーバー、彼ら次第だということです。 相手側が許可を出さない限り ゲートは絶対に開きません。そのサインこそが Access-Control-Allow-Origin という ヘッダー 情報なんです。 これはウェルカムの横断幕のようなもの。アスタリスク は誰からでもOKという意味で 公式な許可証 になるわけです。 ブラウザ がこの許可証を確認した瞬間に、閉ざされていたゲートが開き、本当の リクエスト が海外に届きます。 これで 目的のデータを手に入れること ができ、コンソールの真っ赤なエラーが綺麗さっぱり消えるんです。 では、なぜ門番が必要なのか。実は CORS は僕らを困らせる邪魔者じゃなく、僕らを守る 超優秀なボディガード なんです。 もしゲートがなかったら、怪しいサイトの スクリプト が、ログイン中のネットバンクなどに なりすましてリクエストを送れてしまいます。 クロスサイトリクエストフォージェリ などの攻撃から守ってくれる、絶対欠かせない セキュリティ機能 なんですね。 次にエラーを見てもイライラせず、ブラウザが僕を守ってくれてるんだな と思い出してあげてください。 あれは安全を守るための賢い機能が働いている証拠です。もしこの セキュリティゲート が全くなかったとしたら？ インターネットは 一体どんな世界になっちゃうと思いますか。Webの安全の裏側を感じるきっかけになったら嬉しいです。