この記事で分かること
- 同一オリジンポリシーとは何か
iframe・子ウィンドウで禁止される操作- アクセス可能なケースと不可能なケース
postMessageやsandboxを使った回避方法
Web ブラウザには、異なるドメイン同士のページが自由にアクセスできないようにする「同一オリジンポリシー」という重要なセキュリティルールがあります。
この記事では、iframe や子ウィンドウで禁止される操作、アクセス可能なケース、そして postMessage や sandbox を使った安全な回避方法まで分かりやすく解説します。
同一オリジンポリシーとは？
同一オリジンポリシー（Same-Origin Policy） とは、
Webブラウザが持つセキュリティルールで、
「異なるオリジン（ドメイン）のページ同士は自由にアクセスできない」
という制限のことです。
オリジンは以下の3つで構成される
- プロトコル（
https/http） - ドメイン（
example.com） - ポート番号（
:443など）
この3つがすべて一致していないと、
別オリジン とみなされます。
iframe に対する同一オリジン制限
iframe 内のページが別オリジンの場合、
JavaScript で以下の操作が禁止されます。
contentWindowへのアクセスcontentDocumentへのアクセスiframe内の DOM 操作location.hrefの取得
つまり、別ドメインの iframe は中身を一切触れない ということ。
例：これは禁止される
const iframe = document.getElementById("myFrame");
console.log(iframe.contentDocument); // エラー（別オリジン）
アクセス可能なケース（同一オリジン）
iframe 内のページが同じドメインの場合、
以下の操作が可能です。
- DOM の取得・書き換え
contentWindowの参照- 関数の実行
- 変数の参照
例：同一オリジンなら DOM を触れる
const iframe = document.getElementById("myFrame");
iframe.onload = () => {
const doc = iframe.contentDocument;
console.log(doc.body.innerHTML);
};
子ウィンドウ（window.open）にも同一オリジン制限がある
window.open で開いた子ウィンドウも、
別オリジンの場合は以下が禁止されます。
- 子ウィンドウの DOM 操作
- 親ウィンドウの DOM 操作
locationの取得
つまり、iframe と同じ制限が適用されます。
制限を回避する方法①：postMessage を使う
別オリジンの iframe と通信したい場合は、
postMessage を使うのが唯一の安全な方法です。
// iframe → 親ウィンドウ
window.parent.postMessage("Hello", "https://example.com");
postMessage は同一オリジン制限を超えて通信できるため、
現代の Web では必須技術です。
制限を回避する方法②：sandbox 属性を使う
iframe に sandbox 属性を付けると、
iframe 内の権限を細かく制御できます。
<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>
ただし、sandbox は「制限を強める」ための機能であり、
同一オリジン制限を解除するものではありません。
制限を回避する方法③：同一オリジンに揃える
最もシンプルな方法は、
iframe の src を同じドメインにする ことです。
サブドメインが異なる場合は、
サーバー側で CORS や document.domain を調整する方法もあります。
同一オリジンポリシーを正しく理解するための学習書籍
書籍で学ぶのが向いている人
- 同一オリジンポリシー（SOP）の基本概念を体系的に理解したい
iframeやwindow.openの制限を正しく把握したいpostMessageやsandboxの仕組みを安全に使いたい- ネット記事だけだと情報が断片的に感じる
同一オリジンポリシーは、Web セキュリティの中でも特に重要な基礎知識です。
書籍では オリジンの概念・iframe の制限・安全な回避方法 を順序立てて学べるため、
Web アプリ開発に必要な理解が深まります。
いちばんやさしい JavaScript の教本
図解が多く、JavaScript の基本文法とブラウザの仕組みを視覚的に理解できる入門書です。
同一オリジンポリシーの基礎や、iframe の扱いに関する重要な考え方も自然に身につきます。
この本で解決できること：
- オリジン（プロトコル・ドメイン・ポート）の概念を正しく理解できる
iframeのアクセス制限がなぜ必要なのかが分かる- 安全なデータ通信の基礎（
postMessage）を理解できる
確かな力が身につく JavaScript「超」入門
実務で必要なブラウザ操作・イベント処理・セキュリティの基礎をしっかり学べる入門書です。
iframe や子ウィンドウの制限、postMessage の使い方など、
現代の Web 開発に欠かせない知識を身につけられます。
この本で解決できること：
- 同一オリジンポリシーの仕組みと制限内容を体系的に理解できる
window.openの制限や親子ウィンドウ間通信の基礎が分かるpostMessageを使った安全なデータ通信が理解できる
動画で理解を深めたい方へ（Udemy講座）
同一オリジンポリシーは文章だけではイメージしにくい部分も多く、
iframe の制限や postMessage の動作は
実際の画面で確認すると理解が一気に深まります。
初心者のためのJavaScript 完全入門
JavaScript の基本文法からブラウザの仕組みまで体系的に学べる人気講座です。
同一オリジンの概念や、iframe のアクセス制限も丁寧に解説されています。
この講座で解決できること：
- 同一オリジンポリシーの基本を視覚的に理解できる
iframeがなぜ別オリジンで DOM 操作できないかが分かるpostMessageの動作を実際の画面で確認できる
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
実務で必要なブラウザ操作・イベント制御・セキュリティを深く理解したい方に最適な講座です。
sandbox や postMessage の実践的な使い方も学べます。
この講座で解決できること：
iframeと子ウィンドウの制限を実例で理解できるpostMessageを使った安全な通信方法が身につく- 現代の Web セキュリティの基礎をまとめて習得できる
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- 同一オリジンポリシーの概念が曖昧なままになる
iframeの制限がなぜ必要なのか理解しづらいpostMessageの使いどころが分からない- セキュリティを考慮した設計に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
同一オリジンポリシー・iframe の扱い・安全な通信方法など、
Web 開発に必須の知識を体系的に理解できるようサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- オリジン・セキュリティ・通信の理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
Web セキュリティやブラウザの仕組みをしっかり学びたい方には、
DMM WEBCAMP の学習コースも選択肢のひとつです。
同一オリジン制限に関するよくある質問（FAQ）
別ドメインの iframe の DOM を操作できますか？
できません。同一オリジン制限により、contentDocument へのアクセスは完全に禁止されています。
postMessage は同一オリジン制限を回避できますか？
はい。DOM 操作はできませんが、安全にデータ通信を行うことができます。
sandbox を使うと同一オリジン制限を解除できますか？
いいえ。sandbox は権限を制限するための機能であり、オリジン制限を解除するものではありません。
子ウィンドウ（window.open）も同一オリジン制限の対象ですか？
はい。iframe と同じく、別オリジンの子ウィンドウの DOM 操作はできません。
まとめ
フレーム（iframe・子ウィンドウ）には
同一オリジンポリシー が適用され、
別ドメインのページにはアクセスできません。
回避方法としては以下の3つが主流です。
postMessageを使う（最も安全）sandboxで権限を制御する- 同一オリジンに揃える
特に postMessage は現代の Web で必須の技術なので、
iframe を扱う際は必ず理解しておきましょう。
