🌈 にじいろ式｜Same Origin ポリシーとCORS（マンションの配達で覚える）

事務をしながら
情報処理安全確保支援士を目指して勉強している、にじいろです。

今日は「H31春 SC 午後Ⅰ 問1」 の過去問題を解いていて出てきた

• Same-Originポリシ

• CORS

• JSONP

という言葉がまったく分からず、思い切って深掘りしてみた勉強記録です。

応用情報ではほとんど触れない分野なので、最初は

「オリジンって何？」
「CORSってどこから来たの？」
と完全に迷子でした。

でも、うちの相棒・ChatGPT に聞いてみたところ、
この問題はIPAが作った“神問題”で、Webセキュリティの理解が一気につながる構成らしいんです。
せっかくなので、この機会にしっかり整理してみました。

調べてみると

• オリジンとは何か

• Same-Originポリシはなぜ必要なのか

• JSONPがどういう「時代の産物」なのか

• CORSがどうして生まれたのか

が理解できました。

今回はその学びを
にじいろ式（例え＋歴史＋因果関係）でまとめていきます。

■ マンションの「配達」で考える

マンションを想像してみてください。
あなたは、301号室 に住んでいます。
配達員さんは基本的に、
「301号室の荷物は301号室にしか渡しちゃダメ」
というルールで動いています。

つまり

301 → 301　OK（同じ部屋）
301 → 302　NG（部屋番号が違う）301 → 401　NG（階が違っても部屋番号が違う）

このルールが、Same-Originポリシです。

■ オリジン（Origin）とは

Webでは
サイトの「住所」を オリジン（Origin） と呼びます。

オリジンは次の 3つで決まります。

1. スキーム（protocol）
   例：http / https

2. ホスト名（domain / FQDN）
   例：example.com

3. ポート番号
   例：80 / 443

例えば

https://example.com/

この3つがすべて一致している場合だけ
同一オリジンです。

1つでも違えば、異なるオリジンになります。

■ Same-Originポリシとは

ブラウザには次の大原則があります。
「違うオリジンのデータには勝手にアクセスしてはいけない」

これはとても重要なルールです。

もしこの制限が無かったら、
銀行サイトにログインしたまま、別サイトを開いたとき、
そのサイトのJavaScriptが、「銀行の情報を盗む」
ということが起きてしまいます。
そのため、ブラウザは
異なるオリジンへのアクセスを基本的に禁止しています。
ブラウザは“ユーザの代理”として動くため、
悪意あるサイトからユーザを守る必要がある。
だからブラウザ側が Same-Origin を強制しています。

■ しかし現代のWebでは困る

ここで問題が出てきます。最近ののWebアプリは

• フロントエンド

• APIサーバ

• 認証サーバ

などが別ドメインで構成されることが多いです。

例えば

app.example.com

api.example.com

auth.example.com

これらは、全部異なるオリジンです。

しかし、
フロントエンドが、APIにアクセスできないとアプリが動きません。

■ JSONP（昔の裏技）

そこで登場したのが、
「JSONP」です。

少し歴史を見てみます。

1990年代

JavaScriptが普及
→ セキュリティ問題が増える
→ Same-Originポリシ導入

2000年代

AJAXが普及
「ブラウザからAPIを呼びたい！」
しかし、Same-Originポリシが邪魔をします。
そこで開発者が使い始めたのが「JSONP」
これは
scriptタグは、どのオリジンからでも読み込めるという仕様を利用した裏技です。

APIの結果を「JavaScriptとして返す」という方法です。
ただしJSONPには大きな問題があります。

• 任意のJavaScriptを実行できてしまう

• アクセス制御できない

• GETしか使えない

つまり「非常階段から勝手に入る配達員」のようなものです。

■ CORS（正式な許可の仕組み）

そして 2014 年頃、
JSONP の危険性を解消するために CORS が正式に標準化 されました。

意味は、

という仕組み。

ブラウザはリクエストに Origin を付けて名乗り、
サーバは Access-Control-Allow-Origin で「この相手ならOK」と返します。

これはまさに、

という管理人の許可と同じ。

■ 勉強して感じたこと

今回調べてみたところ、

・ECサイト
・ログイン認証
・API通信
でも、裏側では常にこの仕組み（CORS）が働いていることが
分かりました。

また、歴史を知ると、開発者たちは「ブラウザからAPIを呼びたい」という思いから裏技（JSONP）を生み出し、
その問題を解決するために、正式な仕組み（CORS）が作られた
というところが今回の勉強の面白かったポイントです。

Same-Originポリシ
JSONP
CORS

この流れが一本のストーリーとしてつながり、Webセキュリティの理解が一気に深まりました。

しっかし！

応用情報から情報処理安全確保支援士への階段は高いですねー
次から次へと知らない言葉に出会います。

めげずにコツコツ積み上げるのみ💪
本日も読んでいただき嬉しいです！ありがとうございます！

復習＋ステップアップ小テストはこちらです。