<iframe>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	埋め込み対象のcontent navigableを表す
Categories	Flow content、Phrasing content、Embedded content、Interactive content、Palpable content
Context	Embedded contentが期待される場所
Content model	Nothing
主要なcontent attributes	src、srcdoc、name、sandbox、allow、allowfullscreen、width、height、referrerpolicy、loading
DOM interface	HTMLIFrameElement。src、srcdoc、name、sandbox、allow、referrerPolicy、loading、contentDocument、contentWindowなどを持つ

ここでいうcontent navigableは、iframeの子文書を読み込むためのWeb Platform上の入れ物です。親Documentから見えるDOM要素と、子側のactive Documentは同じものではありません。

src・srcdoc・初期文書

srcが指定されていれば、その値を親Documentを基準にURLとして解決し、iframeのcontent navigableをnavigationします。srcdocが指定されている場合は、その値からabout:srcdocのDocumentを構築し、srcより優先します。

状態	確認する境界
srcdocあり	srcdoc documentを構築し、URLはabout:srcdocとして扱われる
srcdocなし、validなsrc	指定URLへchild navigableをnavigationする
初期挿入時にsrcなし／parse失敗	初期about:blank Documentが残る場合がある
srcとsrcdocの両方	srcdocを処理し、srcはfallbackとして同時には使われない

<iframe
  title="生成したプレビュー"
  sandbox
  srcdoc="&lt;h1&gt;Preview&lt;/h1&gt;&lt;p&gt;Separate document&lt;/p&gt;">
</iframe>

属性値に埋め込むHTMLは、外側のHTML parserと内側のsrcdoc documentの2段階で解釈されます。引用符、アンパサンド、scriptを含む文字列を扱うときは、Trusted Types、CSP、サニタイズ方針を別途確認します。

Navigation・load・DOM interface

iframeの属性が挿入、変更、削除されると、user agentは必要に応じてiframe attributes processingを実行し、child navigableをnavigationします。読み込み完了時にはiframeのload eventが発火しますが、loadはコンテンツの信頼性、内容の正しさ、親からのDOMアクセス可能性を保証するEvidenceではありません。

const frame = document.querySelector('#preview');

frame.addEventListener('load', () => {
  console.log(frame.contentWindow);
});

// contentDocumentの読み取り可否はoriginなどの条件に依存する。

contentDocumentとcontentWindowはDOM interfaceとして公開されますが、cross-originの子文書を親から自由に読み書きできることを意味しません。same-origin policy、sandboxによるopaque origin、CSP、COEPなどの別の境界を同時に確認する必要があります。

sandboxとorigin・権限

sandbox属性が指定されると、iframe内の内容に追加のsandboxing restrictionsが適用されます。値なしのsandboxでは、script、form、popup、top-level navigationなどの能力が制限されます。キーワードを追加すると、対応する能力だけが再び許可されます。

設定	主な境界	注意点
sandbox	追加制限を有効にする	空の値でも制限が有効になる
allow-scripts	scriptの実行を許可する	他の権限と組み合わせる必要がある
allow-same-origin	opaque originではなく実際のoriginを使う	同じoriginでscript許可と併用するとsandbox解除の経路になり得る
allow-formsなど	フォーム、popup、top navigationなどを個別に再許可する	機能要件に必要なものだけを選ぶ

同じoriginの文書にallow-scriptsとallow-same-originを同時に与える構成は、sandboxを外せる可能性があるため、強い隔離を意図する設定として扱えません。攻撃可能なコンテンツの配信元を分けることも、sandboxとは別の安全対策です。

allow・referrerpolicy・loading

属性	役割	他の境界との違い
allow	iframe内へ適用するPermissions Policyを指定する	sandboxのscript・origin制限とは別の権限モデル
referrerpolicy	iframeが開始するfetchの参照元ポリシーを指定する	親から子へのDOMアクセスを許可する属性ではない
loading	lazy loadingの判定に使う	遅延読み込みの指定であり、sandboxや権限の制限ではない
allowfullscreen	iframe内のFullscreen API利用に関係する	Fullscreen側の条件、Permissions Policy、user activationも確認する

属性を付けたことだけで、対象機能が必ず利用できるとは限りません。HTTP headerのPermissions Policy、CSP、sandbox、user activation、ブラウザー実装が同時に条件になります。

Accessibility

HTML-AAMでは、iframeはWAI-ARIAの対応roleを持たない一方、platformごとにinternal frameなどのmappingが定義されます。iframe自身のaccessible nameはaria-label／aria-labelledby、またはtitleを経路として計算します。iframe内のDocumentは、子Document自身のtitleから名前を得る条件もあります。

<iframe
  src="https://example.com/payment"
  title="Secure payment form"
></iframe>

埋め込みサービスの画面を親側のtitleだけで説明し切れるとは限りません。子Documentのtitle、見出し、キーボード操作、focus、読み上げ、エラー表示を、親のAccessibility Treeと分けて確認します。

Fact / Evidence（主張 / 根拠）

要素の意味とprocessing modelに関する仕様上の主張を、ブラウザー実装、WPT、アクセシビリティ観測から分離します。

Evidence

1. HTML Standard: The iframe element — categories、content model、attributes、content navigable、src／srcdoc、sandbox、navigation、load、DOM interface
2. Permissions Policy: iframe allow attribute — iframe内のpolicy containerとdelegated policy
3. HTML Accessibility API Mappings: iframe — platform role mappingとaccessible name computation
4. Web Platform Tests: the-iframe-element — iframe attributes、navigation、sandbox、load、DOM APIに関係するテスト群の入口

Implementation Evidence

仕様上のprocessing modelと、ブラウザーで観測したnavigation、load、DOM access、sandbox、Accessibility Treeを分けて登録します。Chrome 153.0.0.0 / Windows NT 10.0で専用fixtureを実行し、確認できた範囲だけを部分確認として記録しました。

実行fixture: iframe-v1で、srcdoc優先、初期about:blank、srcdoc変更とload event、same-originのcontentDocument、sandboxによるevent originの境界、title付きAccessibility Treeを確認しました。実行記録はdocs/atlas/iframe-v1-results-2026-09-19.mdに保存しています。

iframeの表示、load、DOM access、origin、sandbox、Permissions Policy、Accessibility Treeは、URL、HTTP headers、親子origin、属性、user agent、OSに依存し得ます。単一環境の観測を、すべての埋め込みに共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、categories、context、content model、主要属性、HTMLIFrameElementの入口
• 確認済みsrc／srcdocの優先関係、初期about:blank、content navigable、navigationとloadの仕様上の入口
• 確認済みsandbox、allow、referrerpolicy、loading、accessible nameに関する仕様とEvidenceの参照位置
• 部分確認Chrome 153でのsrcdoc優先、初期about:blank、srcdoc変更とload、same-origin DOM access、sandbox event origin、属性反映、Accessibility Tree
• 未完了Firefox・Safariでのsrcdoc、load、属性変更、sandbox、loading、contentDocumentの比較と、Chromeの実際のlazy loading
• 未完了cross-origin、CSP、COEP／CORP、Permissions Policy、postMessage、window.name、navigationの相互作用
• 未完了WPTの個別実行結果、HTML-AAMのplatform mapping、支援技術、互換性、Expert-gap Review

このページは初期Coverageです。仕様上の入口を整理したものであり、すべてのブラウザー、HTTP header、origin構成、埋め込みサービス、支援技術で同じ結果になることを主張しません。

Related surface

初心者向けの埋め込み、title、sandbox、srcdoc、リンクとの違いはYugienのiframe要素ページを参照してください。navigationとの境界はa要素、scriptによる取得と実行はscript要素、form送信との関係はform要素でも確認できます。