同一オリジンポリシーとは
同一オリジンポリシーとは、ブラウザ上で動くJavaScriptがアクセスできる範囲を、プロトコル・ホスト・ポートが一致するオリジンに制限するセキュリティルールである。
同一オリジンポリシーの概要
同一オリジンポリシー（SOP: Same-Origin Policy）は、ブラウザが悪意あるサイトからユーザーのデータを守るための基本ルールです。特に、JavaScriptが実行される環境で強く適用されます。
ポイント
- 対象範囲：ブラウザで動くJavaScriptや、DOM/Cookie/LocalStorageなどへのアクセス
- 目的：クロスサイトスクリプティング（XSS）やクロスサイトリクエストフォージェリ（CSRF）などの受動的攻撃を防止
- 適用外：curlやサーバー間通信（バックエンド同士の通信）
オリジンとは？
オリジンは以下の3要素で構成されます：
| 要素 | 例 | 違えば別オリジン | 備考 |
|---|---|---|---|
| プロトコル |
http, https
|
✅ |
http:// と https:// は別扱い |
| ホスト | example.com |
✅ | サブドメインも別扱い |
| ポート番号 |
:80, :443
|
✅ | デフォルトポートは省略されても一致扱い |
図：オリジン構造
https://example.com:443
│ ├─ プロトコル: https
│ ├─ ホスト: example.com
│ └─ ポート: 443
同一オリジンと異なるオリジンの例
| URL1 | URL2 | 判定 | 理由 |
|---|---|---|---|
https://example.com:443 |
https://example.com:443 |
✅ 同じ | 3要素すべて一致 |
https://example.com |
http://example.com |
❌ 違う | プロトコルが異なる |
https://example.com |
https://sub.example.com |
❌ 違う | ホストが異なる |
https://example.com |
https://example.com:8443 |
❌ 違う | ポートが異なる |
図：同一オリジン vs 異なるオリジン
同一オリジン: 異なるオリジン:
https://a.com:443 https://b.com:443
↑一致 ↑ホストが異なる
他サイトへの誘導は可能か？
SOPは「他サイトへのアクセス自体」を禁止するものではないです。制限されるのは、他オリジンのリソースを読み取る・操作すること。
許可されること
-
<a href="https://othersite.com">リンク</a>での誘導 -
<img src="https://othersite.com/banner.png">の画像表示 -
<script src="https://cdn.example.com/lib.js">の外部JS読み込み（ただし実行環境はSOPの制約下）
制限されること
- JavaScriptで
https://othersite.com/apiのレスポンス内容を直接取得（CORS設定が必要） - iframe内の他オリジンDOMを読み書き
図：許可されることと制限されること
[許可]
Aサイト → Bサイト（リンク/画像/スクリプト読み込み）
[制限]
Aサイト JS → Bサイト API（レスポンス取得不可）
なぜJavaScript限定で話されるのか？
- ブラウザは基本的にJavaScriptだけをネイティブに実行できる
- 他の言語（TypeScriptやDart）はトランスパイルしてJavaScriptになる
- JavaScriptはDOMやCookieにアクセスできるため、悪用リスクが高い → SOPで制限
- HTMLやCSSは静的で情報取得能力が低いため、SOPの主な対象はJavaScript
ブラウザのサンドボックスとSOPの関係
ブラウザは、ページをサンドボックス環境で実行します。
- サンドボックス：OSや他タブからの隔離（ファイル・ハード直接アクセス禁止）
- SOP：同じブラウザ内でもオリジン間でデータアクセスを隔離
図：ブラウザの隔離構造
[PC/OS]
↑ （直接アクセス不可）
[ブラウザのサンドボックス]
├─ タブ1: example.com
├─ タブ2: evil.com
※互いにDOMやCookieを直接読めない（SOP）
開発時に意識すべきポイント
-
フロントとバックが別オリジンになる場合
- 例:
http://localhost:3000（フロント）とhttp://localhost:8000（バック） - CORS設定か開発用proxyで解決
- 例:
-
外部APIを使う場合
- CORS対応しているか事前確認
- ブラウザから直接アクセス不可なら、サーバー側経由で呼び出す
-
iframeや広告埋め込み
- 他オリジンのiframe内DOMは直接操作できない
- 必要なら
postMessageで通信
-
セキュリティテスト
- SOPをバイパスできるXSSやオープンリダイレクトを防ぐ
まとめ
同一オリジンポリシーは、フロントエンド開発における最重要セキュリティルールの一つです。JavaScriptが動的にデータやDOMにアクセスできるのは強力な一方で、攻撃に悪用される危険もあります。SOPの存在と制約条件を正しく理解することが、安全なWebアプリ設計の第一歩です。