HTML / Element

iframe要素の使い方

HTMLのiframe要素は、今のページの中に別のHTML文書を表示します。地図、動画、決済画面、プレビューなど、独立したページを埋め込むときに使います。

先に結論

別の文書をページの一部として表示したいときはiframeを使います。利用者が何を見る領域なのか分かるように、ほぼ必ずtitleを付けます。

外部や利用者が作った内容を埋め込む場合は、sandbox、表示する権限を制限するallow、送信する参照元を調整するreferrerpolicyを、必要な機能だけ選んで設定します。

最小例

<iframe
  src="https://example.com/help.html"
  title="サービスの使い方"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin">
</iframe>

srcは埋め込む文書のURLです。titleは画面を見ている人だけでなく、支援技術を使っている人にも埋め込み内容を伝えるために書きます。loading="lazy"は、表示を遅らせても問題ない埋め込みで検討します。

ページの中に別の文書を表示する

下の枠は、ページ内に小さな別文書を埋め込んだ例です。sandboxを付けて、例の中の文書に追加の制限をかけています。

srcdocを使うと、URLの代わりに埋め込むHTMLを指定できます。HTML属性の中に書くため、内側の<や>は<や>としてエスケープします。実際のアプリケーションでは、利用者の文字列をそのままHTMLとして埋め込まないでください。

`src`と`srcdoc`の違い

指定	意味	向いている例
`src`	URLにある文書を読み込む	外部サービス、別ページ、公開されたプレビュー
`srcdoc`	属性の値から文書を作る	小さな固定例、生成したプレビュー
両方	`srcdoc`が優先される	対応していない環境へのURL fallbackを考える場合

埋め込む内容が大きい場合や、別のURLとして管理する場合はsrcを使うほうが読みやすくなります。srcdocのHTMLは属性値として扱われるため、引用符やアンパサンドのエスケープにも注意が必要です。

安全のための`sandbox`

sandboxを値なしで指定すると、埋め込まれた文書に追加の制限がかかります。フォーム送信、スクリプト、ポップアップなどは、必要な許可キーワードを追加しない限り制限されます。

<iframe
  src="https://example.com/user-content.html"
  title="投稿のプレビュー"
  sandbox="allow-scripts"
></iframe>

許可キーワードは必要最小限にします。特に同じoriginの文書にallow-scriptsとallow-same-originを同時に与えると、埋め込まれた文書がsandboxを外せる場合があるため、組み合わせを安全だと思い込まないでください。攻撃される可能性のあるHTMLは、sandboxだけに頼らず、配信元も分離します。

`iframe`とリンクの違い

目的	使う要素	考え方
別の場所へ移動する	`a`	利用者がリンクを選んで移動する
別の文書を今の画面内に表示する	`iframe`	親ページと子文書が同時に表示される
同じページ内の情報を分ける	見出し、`section`など	不要な文書境界を作らない

iframeの中身は、親ページの単なる一部分ではありません。別の文書として読み込まれ、originが異なる場合は親ページから子文書のDOMを自由に読むこともできません。親子間で協力して通信する必要があるときは、postMessageを使い、受信側でoriginを確認します。

アクセシビリティと表示サイズ

埋め込む内容を短く説明するtitleを付ける。
重要な情報をiframeの中だけに置かず、必要なら同じ内容へ到達できるリンクも用意する。
横幅を固定しすぎず、狭い画面でも読める高さとスクロール方法を確認する。
埋め込んだサービスがキーボード操作、見出し、フォーカス移動を適切に提供しているか確認する。

よくある間違い

titleを付けず、何の埋め込みか利用者に伝わらない。
外部コンテンツを信頼できるものとして扱い、sandboxや権限を検討しない。
sandboxを付ければ、どんな攻撃にも安全だと思い込む。
親ページから、別originのiframeのDOMを直接読めると思い込む。
単なるページ内の説明にiframeを使い、不要な文書境界と読み込みを作る。

Atlasで詳しく確認する

iframeのcontent navigable、srcとsrcdocの処理、初期about:blank、sandboxing、Permissions Policy、referrer、lazy loading、same-origin境界、アクセシビリティマッピング、ブラウザー実装の確認範囲は、Yugien Atlasのiframe要素ページで詳しく整理しています。