この記事の要点

iframe 要素は別の HTML 文書を現在のページ内に埋め込むためのインラインフレーム 主要属性: src (URL) / width / height / title / loading / sandbox / allow title 属性は必須級 — スクリーンリーダーが iframe の内容を識別する sandbox 属性で実行できる機能を制限 — XSS や悪意あるリダイレクトを防ぐ 遅延読み込み: loading="lazy" でスクロールするまでロードしない — ページ高速化

iframe 要素とは

iframe (inline frame) は別の HTML 文書を現在のページ内の領域に埋め込むための要素です。YouTube 動画、Google Maps、SNS の埋め込みウィジェット、広告など、外部コンテンツを取り込む用途で広く使われています。

基本構文

<iframe
    src="https://example.com/page.html"
    width="600"
    height="400"
    title="サンプル埋め込みページ"
    loading="lazy">
</iframe>

主な属性

属性	用途	例
src	埋め込む URL	https://example.com
srcdoc	HTML 文字列を直接埋め込む	<p>Hello</p>
width / height	サイズ (px)	600 / 400
title	アクセシビリティ用ラベル	「YouTube 動画」
loading	読み込みタイミング	lazy / eager
sandbox	セキュリティ制限	allow-scripts 等
allow	許可する機能	fullscreen; camera
referrerpolicy	リファラ送信ポリシー	no-referrer
name	フレーム名 (target で参照)	preview
allowfullscreen	全画面表示許可 (旧仕様)	allowfullscreen

sandbox 属性 — セキュリティ制限

sandbox を指定すると iframe 内で多くの機能が無効化されます。許可したい機能だけを値として列挙します。

<!-- 全機能を制限 (最も厳格) -->
<iframe src="..." sandbox></iframe>

<!-- スクリプトとフォーム送信のみ許可 -->
<iframe src="..." sandbox="allow-scripts allow-forms"></iframe>

値	許可される機能
allow-scripts	JavaScript 実行
allow-same-origin	同一オリジン扱い
allow-forms	フォーム送信
allow-popups	ポップアップ表示
allow-top-navigation	親ページのナビゲーション
allow-modals	alert / confirm 等のモーダル

注意: allow-scripts と allow-same-origin を両方付けると sandbox が事実上無効になります。信頼できないコンテンツには絶対に併用しないこと。

遅延読み込み (loading="lazy")

iframe 内のコンテンツは重いことが多いので、ファーストビューに入らないものは遅延読み込みでページ表示を高速化します。

<!-- スクロールして近づいてからロード -->
<iframe src="..." loading="lazy"></iframe>

<!-- すぐにロード (デフォルト) -->
<iframe src="..." loading="eager"></iframe>

YouTube 動画の埋め込み例

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write;
           encrypted-media; gyroscope; picture-in-picture;
           web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
    loading="lazy">
</iframe>

レスポンシブな iframe (16:9 アスペクト比)

iframe は幅 100% にしても高さが追従しません。アスペクト比を維持するために CSS のトリックが必要です。

<div class="iframe-wrapper">
    <iframe src="..." title="..."></iframe>
</div>

/* 古典的な padding-top トリック (16:9 = 56.25%) */
.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* モダンブラウザなら aspect-ratio で 1 行 */
.modern-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

親ページとの通信 (postMessage)

クロスオリジンの iframe と親ページは直接プロパティを触れません。postMessage でメッセージをやり取りします。

// 親 -> iframe
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage(
    { type: 'hello', payload: 123 },
    'https://child.example.com'   // 送信先オリジンを必ず指定
);

// iframe 側で受信
window.addEventListener('message', (event) => {
    // 必ず origin を検証!
    if (event.origin !== 'https://parent.example.com') return;
    console.log(event.data);
});

セキュリティとプライバシー

リスク	対策
クリックジャッキング	サーバー側で X-Frame-Options: DENY や Content-Security-Policy: frame-ancestors
悪意あるコンテンツ実行	sandbox 属性で機能制限
Cookie トラッキング	ブラウザの第3者 Cookie 制限が進行中。SameSite=Lax/Strict が事実上必須
リファラ漏洩	referrerpolicy 属性で制御

FAQ

Q: 高さを中身に合わせて自動調整したい
A: 同一オリジンなら iframe.contentDocument.body.scrollHeight を取得して高さ設定。クロスオリジンは postMessage で高さを通知してもらう。

Q: iframe と embed / object の違い
A: iframe はHTML 文書専用。embed / object は PDF や Flash 等の任意リソース埋め込み (現代は使われない)。

Q: SEO への影響は？
A: Google は iframe 内のコンテンツも一部クロールするが、親ページのコンテンツとして扱われない。重要コンテンツは iframe ではなく直接記述する。

関連要素

• frame / frameset — 旧仕様、HTML5 で廃止
• embed / object — 一般リソース埋め込み
• picture-in-picture API / iframe.contentWindow — 操作用 DOM API