Zenn
🌐

CORS ってなに？

に公開
Web
Security
CORS
Cyber Security
知っておきたい
tech

CORS ってなに？

CORSは「クロス・オリジン・リソース・シェアリング」といって、ウェブサイト同士がお互いに情報をやりとりするときのルールみたいなもの

例で考えてみよう

学校の教室を「ウェブサイト」だと考えてみる

  1. 教室のルール：普通、自分の教室（自分のウェブサイト）の中では自由に動いたり、物を使ったりできる。

  2. 別の教室に行くとき：でも、他の教室（別のウェブサイト）に行って勝手に物を持ってきたり、何かを変えたりするのはダメ。先生（ブラウザ）が止める。

  3. CORSの役割：CORSは「許可証」みたいなもの。先生（ブラウザ）に「この子は別の教室から物を借りてもいいですよ」と教えてあげる。

もっと具体的に

たとえば、あなたが作った絵（データ）があるとします：

  • あなたのウェブサイト「わたしの絵.com」に絵があります
  • 友達のウェブサイト「ともだちのページ.com」がその絵を表示したいと思っています

普通は、友達のページからあなたの絵を勝手に使うことはできません。でも、CORSで「友達のページは使ってもいいよ」と許可すれば大丈夫になる。

安全のためのルール

これは安全のためのルール。
もし誰でも他のウェブサイトから情報を取れたら、悪い人があなたの大切な情報を勝手に見たり使ったりできちゃう。

CORSは、「誰に」「何を」「どうやって」共有するかを決めるルール。
この決まりがあることでウェブサイト同士が安全に協力できるようになる！感じ

はい、こんな感じですがCORSを具体的に説明します。

具体的なCORSの流れ

  1. ブラウザでの基本動作
    たとえば、あなたが「example.com」というサイトを見ています。このサイトのJavaScriptが「api.another-site.com」からデータを取得しようとします。

  2. ブラウザの判断
    ブラウザは「違うサイトからデータを取ろうとしている！確認が必要だ」と判断します。

  3. リクエストの種類による違い

    • シンプルなリクエスト（普通のGETなど）：まずそのままリクエストを送ります
    • 複雑なリクエスト（PUT/DELETEや特別なヘッダーがある場合）：事前に「確認リクエスト」（OPTIONS）を送ります

  4. サーバーからの応答
    サーバー側（api.another-site.com）は特別なヘッダーを返します：

    Access-Control-Allow-Origin: https://example.com

    これは「example.comからのアクセスはOKですよ」という意味です。

  5. 結果

    • 許可されていれば：データのやり取りができます
    • 許可されていなければ：ブラウザがエラーを出して、データは取得できません

実際のシナリオ例

シナリオ1: プロフィール画像の表示

  1. SNSサイト（social.example.com）にログイン
  2. 友達の投稿に画像（images.example.com/user123.jpg）が表示される
  3. 画像サーバーが Access-Control-Allow-Origin: * と設定していれば、どのサイトからでも画像を表示できる

シナリオ2: APIデータの取得

  1. あなたのウェブアプリ（myapp.com）がユーザーデータをAPIサーバー（api.myapp.com）から取得しようとする
  2. APIサーバーは以下のように設定：
    Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
  3. この設定により、myapp.comからのみAPIアクセスが許可され、特定のメソッドとヘッダーのみ使用可能

シナリオ3: ログイン情報を含むリクエスト

  1. ログインサイト（login.example.com）でログイン
  2. そのサイトから別サービス（service.example.com）にアクセス
  3. この場合、Cookieなど認証情報を含むため、特別な設定が必要：
    Access-Control-Allow-Origin: https://login.example.com
Access-Control-Allow-Credentials: true

開発者ツールでの確認方法

  1. ブラウザの開発者ツール（F12キー）を開く
  2. 「Network」タブを選択
  3. クロスオリジンリクエストを探す
  4. リクエスト/レスポンスヘッダーを確認すると、CORSの動作が分かります

CORSはウェブサイト間の「許可証」のような役割を果たし、適切に設定することでセキュリティを保ちながら必要な情報共有を実現する。

X @kohhta1031

Discussion