CORSとは何か
CORSとは、あるサイトから別のドメインにあるデータを読み込んでよいかどうかを取り決める仕組みのことです。正式にはオリジン間リソース共有と訳されます。ブラウザが安全のために設ける決まりのひとつです。
ブラウザには、表示しているサイトと同じ出どころのデータしか自由に扱えないという基本ルールがあります。これを前提に、別ドメインのデータを例外的に読み込んでよい場合を定めるのがCORSの役割です。
つまりCORSは禁止のための仕組みではなく、別ドメインとのやり取りを安全に許可するための取り決めだと理解するとよいでしょう。
なぜブロックされるのか
別ドメインへのデータ要求が止められるのは、データを提供する側が「このサイトからの読み込みを許可します」という意思表示をしていないためです。許可の意思表示が無ければ、ブラウザは安全のために結果を渡しません。
この仕組みが無いと、悪意あるサイトが利用者になりすまして他サービスのデータを勝手に読み出せてしまいます。CORSは、そうしたなりすましによる情報の盗み出しを防ぐ防波堤になっています。
ブロックはあくまでブラウザ上での判断です。許可は提供側が出すものなので、読み込む側のページだけを直しても解決しないことが多い、という点が混乱を生みやすいところです。
実務ではどこで関係する?
CORSは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
CORSについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
許可はどう伝わるのか
データを提供するサーバーは、応答に添える付帯情報の中で「どのサイトからの読み込みを許可するか」を示します。ブラウザはこの情報を確認し、自分が許可されていれば結果を受け取り、そうでなければブロックします。
場合によっては、本番の要求の前に「こういう要求をしてもよいか」と事前に確認するやり取りが入ることもあります。これは、影響の大きい操作を勝手に実行させないための安全策です。
いずれにせよ、許可を出すかどうかの主導権は提供側にあります。利用する側は、相手が許可している範囲でのみデータを読み込めるということになります。
ブロックに遭ったときの確認手順
外部のデータが読み込めずエラーになったとき、原因を切り分けるための確認手順があります。読み込む側と提供側のどちらに対処が必要かを見極めるのに役立ちます。
- 開発者ツールのコンソールでCORS関連のエラーメッセージを確認する
- 読み込もうとしている先が自分の管理下か、外部サービスかを把握する
- 提供側が許可の設定を出しているかドキュメントなどで確認する
- 自分で提供側も管理しているなら許可の付帯情報を設定する
外部読み込みと安全のバランス
地図やフォント、外部のデータを取り込んで作るページは便利ですが、CORSの許可が前提になります。許可されていない先からの読み込みは、安全のために止められると理解しておく必要があります。
安全のための仕組みは、時に作業の手間にもなりますが、なりすましから利用者を守る大切な役目を担っています。エラーに出会ったら、ルールを破るのではなく許可の有無を確認するのが正しい向き合い方です。
作った成果物を関係者に見てもらうだけなら、外部からの複雑な読み込みに頼らず、ファイル一式をまとめて共有する方が簡単です。ギガサイト便はCSSやJS、画像を含むZIPをそのままドロップして一時URLで共有できるため、確認やレビューの用途では構成を崩さず手早く見せられます。
よくある質問
CORSのエラーは読み込む側で直せますか
多くの場合は直せません。許可を出すのはデータを提供する側だからです。提供側が自分の管理下なら許可の設定を加えられますが、外部サービスの場合は相手が許可していなければ読み込めません。
なぜわざわざブロックする必要があるのですか
許可なく別ドメインのデータを読めると、悪意あるサイトが利用者になりすまして他サービスの情報を盗み出せてしまうためです。CORSはそうしたなりすましを防ぐ安全の仕組みです。
同じサイト内のデータでもCORSが関係しますか
基本的に関係しません。CORSが働くのは別ドメインのデータを読み込もうとするときです。表示しているサイトと同じ出どころのデータは、この決まりの対象外として扱われます。
事前の確認のやり取りとは何ですか
影響の大きい要求の前に、ブラウザが提供側へ「こういう要求をしてよいか」と尋ねる予備のやり取りです。許可が得られてから本番の要求を送ることで、勝手な操作の実行を防いでいます。
実務ではどこで関係する?はHTML共有で必ず理解しておく必要がありますか?
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。