iframeとドメインの違いを徹底解説！中学生にもわかるシンプルな理由と使い方

---

iframeとドメインの基本を押さえよう

iframe は別のページを自分のページに埋め込むための要素です。iframe が使われると、他のサイトの内容を自分のサイトの中に表示することができます。これは外部の情報を一つの画面に集約して見せたいときに便利ですが、同時に「どのサイトの情報が表示されているか」「その情報は誰が管理しているのか」といった点を考える必要があります。
ドメインはWebサイトを特定する名前のことで、例として example.com や yoursite.jp のように表現されます。
同じドメインのページ同士ならば情報のやり取りや見た目の結合がスムーズにできることが多いですが、異なるドメイン同士を結ぶと、セキュリティの壁が現れやすくなります。これを理解することはWebを安全に使う第一歩です。

実のところ iframe とドメインの関係は「同一生成元ポリシー」と深く結びついています。同一生成元ポリシー とは、あるページが別のドメインにあるデータを勝手に読んだり書き込んだりするのを制限するしくみです。iframe を使うと内部のページは自分のドメインとは別のドメインの内容を表示しますが、JavaScript などを使って相互に直接情報をやり取りするには制限があります。これが安全性の基本です。

もし両方の世界を安全かつ有効に結びつけたいときは sandbox 属性 を使います。 sandbox は表示する内容の権限を制限してくれる機能で、たとえば script の実行を禁止したり、トップレベルのフォーム送信を遮断したりします。
また iframe 内での通信には postMessage という仕組みを使うと良いでしょう。これにより同じドメインでなくても、安全にメッセージを送受信できます。日常的にはこのあたりを適切に使い分けることが、ウェブ開発の基本になります。

違いのポイントを3つの観点で整理

この章では iframe とドメインの違いを、3つの観点から整理します。まずは表示の仕組みについて。iframe は別のページを自分のページ内に格納します。内部のページは親ページとは別の document となり、CSS やスクリプトの振る舞いも分離される点が特徴です。次にセキュリティの観点です。同一生成元ポリシーがあるため、異なるドメインのページ間での直接的な JavaScript アクセスは基本的にできません。最後に通信の仕組みです。iframe 外部との通信は制限されますが postMessage を使うことで安全にデータのやり取りができます。sandbox の設定でどこまで許可するかを決め、必要な機能だけを開くことが重要です。

able> 観点説明 同一生成元ポリシー異なるドメイン間の直接アクセスは基本的にブロックされる 表示の仕組みiframe 内部は独立したドキュメントとしてレンダリングされる 安全な通信postMessage と sandbox で安全なデータ交換を実現 ble>

ピックアップ解説

友達とカフェで話している風に、iframe を深掘り談義します。iframe は別のサイトを自分のページに“窓”として表示する機能で、窓の向こう側の世界は自分の家と違うルールが走っています。だから cookies は共有されず、同じドメイン同士なら可能なことも、違うドメインだと難しくなる。けれど postMessage という賢い道具を使えば、窓の中と外を安全におしゃべりさせられる。sandbox で窓の中身の権限を制御するのもポイント。こうした仕組みを知ると、広告ウィジェットや地図、ソーシャルボタンの扱いがぐんと理解しやすくなる。

---