<iframe>: インラインフレーム要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
それぞれの閲覧コンテキストにはそれぞれの文書があり、URL ナビゲーションができます。それぞれの埋め込み閲覧コンテキストのナビゲーションは、最上位の閲覧コンテキストのセッション履歴で直線化されます。他の閲覧コンテキストを埋め込んでいる閲覧コンテキストは、親閲覧コンテキスト と呼ばれます。最上位 の閲覧コンテキスト(親を持たないもの)は、通常はブラウザーのウィンドウで、 Window
オブジェクトで表されます。
警告: それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で <iframe>
を使用するごとに、必要となるメモリーやその他の計算リソースが増加します。理論的には好きなだけ <iframe>
を使用することができますが、パフォーマンスの問題を確認してください。
属性
この要素にはグローバル属性があります。
allow
-
権限ポリシーを
<iframe>
に指定します。このポリシーは、<iframe>
が利用可能な機能(例:マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど)をリクエストのオリジンに基づいて定義します。その例は、
Permissions-Policy
のトピックの iframes を参照してください。メモ:
allow
属性で指定された権限ポリシーはPermissions-Policy
ヘッダーで指定されたポリシーの上に、さらに制限を実装するものです。それはそれを置き換えるものではありません。 allowfullscreen
-
この
<iframe>
がrequestFullscreen()
を呼び出して全画面モードにすることができる場合は、true
に設定します。メモ: この属性は古い属性とみなされており、
allow="fullscreen"
として再定義されました。 allowpaymentrequest
非推奨 Non-standard-
異なるオリジンの
<iframe>
で 決済リクエスト API の実行を許可する場合はtrue
に設定します。メモ: この属性は古い属性とみなされており、
allow="payment"
として再定義されました。 browsingtopics
Experimental Non-standard-
論理属性で、表示されている場合、現在のユーザーの選択されたトピックを
<iframe>
のソースのリクエストと共に送信することを指定します。詳細は、トピック API の使用を参照してください。 credentialless
Experimental-
true
に設定すると<iframe>
を無信頼であることを示します。 つまり、そのコンテンツは新しい、一時的なコンテキストで読み込まれることになります。これはそのオリジンに関連するネットワーク、クッキー、ストレージデータへのアクセス権がありません。最上位の文書の存続期間に依存する新しいコンテキストを使用します。その代わりにCross-Origin-Embedder-Policy
(COEP) 埋め込みルールは解除され、COEP を設定した文書はそうでない第三者の文書を埋め込むことができるようになります。詳しくは無信頼の iframe を参照してください。 csp
Experimental-
埋め込みリソースを制限するコンテンツセキュリティポリシーです。詳しくは
HTMLIFrameElement.csp
をご覧ください。 height
-
フレームの高さを CSS ピクセル数で示します。既定値は
150
です。 loading
-
ブラウザーが iframe をどのように読み込むかを示します。
eager
-
可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします(これが既定値です)。
lazy
-
ブラウザーで定義されたビューポートからの計算された距離に達するまで iframe の読み込みを延期します。 その目的は、ブラウザーがフレームを使用すると合理的に確信できるまで、フレームの取得に必要なネットワークとストレージの帯域幅を使用しないようにすることです。 これにより、ほとんどの典型的な使用用途において、特に初期ページの読み込み時点が縮小され、パフォーマンスとコストが改善されます。
メモ: JavaScript が有効な場合のみ、読み込みが遅延されます。 これはトラッキング対策です。
name
-
埋め込み閲覧コンテキストのターゲットの名前です。
<a>
,<form>
,<base>
要素におけるtarget
属性の値、<input>
や<button>
要素におけるformtarget
属性の値、window.open()
メソッドのwindowName
引数の値として使用することができます。 referrerpolicy
-
フレームのリソースにアクセスする際にどのリファラーを送信するかを示します。
no-referrer
-
Referer
ヘッダーを送信しません。 no-referrer-when-downgrade
origin
origin-when-cross-origin
-
他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号のみにします。同一オリジンへの移動では、パスも含めます。
same-origin
-
リファラーは同じオリジンには送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。
strict-origin
-
プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。
strict-origin-when-cross-origin
-
同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。
unsafe-url
-
リファラーにオリジンおよびパスを含めます(ただし、フラグメント、パスワード、ユーザー名は含めません)。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、これは安全ではありません。
sandbox
-
<iframe>
に埋め込まれたコンテンツに適用される制限を制御します。フレーム内のコンテンツに追加の制約を適用します。この属性の値は、空にするとすべての制約を適用し、空白区切りのトークンにすると特定の制約を外します。allow-downloads
-
download 属性を持つ
<a>
または<area>
要素を通して、またファイルのダウンロードにつながるナビゲーションを通してファイルのダウンロードを可能にします。これは、ユーザーがリンクをクリックしたか、JS コードがユーザーとの対話なしに開始したかに関係なく、動作します。 allow-forms
-
ページがフォームを送信することを許可します。このキーワードを使用しない場合、フォームは通常通り表示されますが、フォームを送信しても入力の検証、ウェブサーバーへのデータ送信、ダイアログの終了が行われません。
allow-modals
-
ページが
Window.alert()
,Window.confirm()
,Window.print()
,Window.prompt()
によってモーダルウィンドウを開くことができるようにしますが、<dialog>
は、このキーワードに関わらず開くことが可能です。また、ページがBeforeUnloadEvent
イベントを受信することができるようにもします。 allow-orientation-lock
-
リソースが画面の方向をロックすることができるようにします。
allow-pointer-lock
-
リソースがポインターロック API を使用できるようにします。
allow-popups
-
ポップアップを許可します(
Window.open()
,target="_blank"
,Window.showModalDialog()
などから)。このキーワードが使用されていない場合、その機能は静かに失敗します。 allow-popups-to-escape-sandbox
-
サンドボックス化された文書が、サンドボックス化フラグを強制することなく、新しい閲覧コンテキストを開くことができるようにします。これにより、例えばサードパーティ広告を、その広告がリンクしているページに同じ制限を強いることなく、安全にサンドボックス化することができます。このフラグが記載されていない場合、リダイレクトされたページ、ポップアップウィンドウ、新しいタブは元の
<iframe>
と同じサンドボックスの制限を受けることになります。 allow-presentation
-
リソースがプレゼンテーションセッションを開始できるようにします。
allow-same-origin
-
このトークンが使用されていない場合、リソースは同一オリジンポリシーに常に失敗する特別なオリジンからのものとして扱われます(潜在的にデータストレージやクッキーへのアクセスや一部の JavaScript API の使用を阻止することがあります)。
allow-scripts
-
ページがスクリプトを実行することを許可します(ただし、ポップアップウィンドウは作成しません)。このキーワードが使用されない場合、この操作は許可されません。
allow-storage-access-by-user-activation
Experimental-
<iframe>
で読み込んだ文書がストレージアクセス API を使用して、分離されていないクッキーへのアクセスをリクエストできるようにします。 -
リソースが最上位の閲覧コンテキスト(
_top
という名前のものに移動できるようにします。 -
リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
-
ブラウザーに組み込まれている、またはウェブサイトによって登録された
http
以外のプロトコルへのナビゲーションを可能にします。この機能はallow-popups
やallow-top-navigation
キーワードでも有効になります。
メモ:
- 埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、
allow-scripts
とallow-same-origin
を同時に使用すると、埋め込まれた文書からsandbox
属性を削除することができるようになるため、絶対に避けるべきです。sandbox
属性をまったく使用しないよりも安全ではなくなります。 - 攻撃者がサンドボックス化した
iframe
の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは別のオリジンから提供するようにもしてください。
メモ: ユーザーをリダイレクトするとき、ポップアップウィンドウを開くとき、または
sandbox
属性を持つ<iframe>
内に埋め込まれたページから新しいタブを開くとき、新しい閲覧コンテキストは同じsandbox
の制限に従います。例えば、sandbox="allow-forms"
またはsandbox="allow-popups-to-escape-sandbox"
属性が設定されていない<iframe>
内に埋め込まれたページが別個のタブで新しいサイトを開いた場合、その新しい閲覧コンテキストでのフォーム送信は静かに失敗します。 src
-
埋め込むページの URL です。同一オリジンポリシーに従う空白ページを埋め込む場合は、
about:blank
の値を使用してください。また、プログラムから<iframe>
の src 属性を削除すると (例えばElement.removeAttribute()
などで)、 Firefox (バージョン 65 以降)、 Chromium ベースのブラウザー、 Safari/iOS ではabout:blank
が読み込まれます。メモ:
about:blank
ページは、アンカーリンクなどの相対 URL を解決するときに、埋め込み文書の URL をベース URL として使用します。 srcdoc
-
埋め込むインライン HTML で、
src
属性を上書きします。そのコンテンツは完全な HTML 文書の構文に従う必要があります。この構文には doctype ディレクティブ、<html>
、<body>
タグなどが含まれますが、そのほとんどは省略して body のコンテンツだけにすることができます。この文書は位置がabout:srcdoc
となります。ブラウザーがsrcdoc
属性に対応していない場合は、src
属性の URL で代替されます。メモ:
about:srcdoc
ページは、アンカーリンクなどの相対 URL を解決するときに、埋め込み文書の URL をベース URL として使用します。 width
-
フレームの幅を CSS ピクセル数で示します。既定値は
300
です。
非推奨の属性
以下の属性は非推奨であり、すべてのユーザーエージェントが対応しているとは限りません。新しいコンテンツでは使用せず、既存のコンテンツから削除するようにしましょう。
align
非推奨-
フレームを含むコンテキストに対する、フレームの整列方法を指定します。
frameborder
非推奨-
値が
1
(既定) ならば、このフレームの周りに境界線を描きます。値が0
ならば、このフレームの周りの境界線を削除しますが、代わりに CSS のborder
プロパティを使用して<iframe>
の境界線を制御してください。 longdesc
非推奨-
フレームの内容についての長い説明の URL です。誤用が広がっているため、非視覚ブラウザーでは有用ではありません。
marginheight
非推奨-
フレームの内容と上下の境界との間における、ピクセル単位の余白の量です。
marginwidth
非推奨-
フレームの内容と左右の境界との間における、ピクセル単位の余白の量です。
scrolling
非推奨-
ブラウザーがフレームにスクロールバーを表示することを示します。
スクリプト操作
インラインフレームは、<frame>
要素のように window.frames
擬似配列に入ります。
DOM の HTMLIFrameElement
オブジェクトでは、スクリプトはフレーム化されたリソースの window
オブジェクトに contentWindow
プロパティを使ってアクセスすることができます。 contentDocument
プロパティは iframe
の内側の document
要素を参照します (contentWindow.document
と等価です)。
スクリプトは、フレームの内側からは window.parent
で親ウィンドウを参照できます。
フレームの内容にアクセスするスクリプトは、同一オリジンポリシーに従います。別なオリジンから読み込まれたスクリプトは、フレーム内のスクリプトがフレームの親にアクセスする場合を含め、他の window
オブジェクトのほとんどのプロパティにアクセスできません。オリジンをまたいだやりとりは Window.postMessage()
を使用して実現できます。
位置指定と表示倍率
置換要素なので、 <iframe>
要素のボックス内における埋め込み文書の位置は、 object-position
プロパティで設定することができます。
メモ: object-fit
プロパティは、<iframe>
要素には効果がありません。
error
および load
イベントの動作
アクセシビリティ
読み上げソフトのような支援技術を利用して操作している人は、 <iframe>
上の title
属性を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。
<iframe
title="Wikipedia page for Avocados"
src="https://en.wikipedia.org/wiki/Avocado"></iframe>
この title がないと、埋め込みコンテンツが何であるかを特定するために <iframe>
の内容に移動しなければならなくなります。このコンテキストの移動は、特に複数の <iframe>
が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。
例
シンプルな <iframe>
この例では、https://example.org のページを <iframe>
で埋め込みます。これは iframe の一般的な用途で、他のサイトのコンテンツを埋め込むことです。例えば、ライブサンプル自体も、一番上の試してみましょうの例も、他の MDN サイトのコンテンツを <iframe>
で埋め込んでいます。
HTML
<iframe
src="https://example.org"
title="iframe Example 1"
width="400"
height="300">
</iframe>
結果
<iframe> 内へのソースコードの埋め込み
この例では、iframe 内のソースコードを直接レンダリングしています。これは sandbox
属性と組み合わせることで、ユーザー生成コンテンツを表示する際にスクリプトインジェクションを防ぐテクニックとして使用することができます。
srcdoc
を使用する場合、埋め込みコンテンツ内の相対 URL は埋め込みページの URL からの相対 URL で解決することに注意してください。埋め込みコンテンツ内の場所を指すアンカーリンクを使用したい場合は、ベース URL として about:srcdoc
を明示的に指定する必要があります。
HTML
<article>
<footer>9 分前の <i>jc</i> の投稿</footer>
<iframe
sandbox
srcdoc="<p><code>iframe</code> 要素を使用する方法は 2 つあります。</p>
<ol>
<li><a href="about:srcdoc#embed_another">他のページからコンテンツを埋め込む</a></li>
<li><a href="about:srcdoc#embed_user">ユーザーが生成したコンテンツを埋め込む</a></li>
</ol>
<h2 id="embed_another">他のページからコンテンツを埋め込む</h2>
<p><code>src</code> 属性を使用して、埋め込むページの URL を指定します。</p>
<pre><code>&lt;iframe src="https://example.org"&gt;&lt;/iframe&gt;</code></pre>
<h2 id="embed_user">ユーザーが生成したコンテンツを埋め込む</h2>
<p><code>srcdoc</code> 属性を使用して、埋め込むコンテンツを指定します。この投稿がすでにその例です。</p>
"
width="500"
height="250"
></iframe>
</article>
srcdoc
を使用する際のエスケープシーケンスの書き方を説明します。
- 最初に、通常の HTML 文書内でエスケープするようなもの(
<
、>
、&
など)をエスケープして HTML を書き出します。 srcdoc
属性では<
と<
は全く同じ文字を表します。したがって、HTML 文書内の実際のエスケープシーケンスにするには、アンパサンド (&
) を&
に置き換えます。例えば、<
は&lt;
になり、&
は&amp;
になります。- 二重引用符 (
"
) を"
に置き換えてsrcdoc
属性が早期に終了しないようにします('
を使用する場合は'
を'
に置き換えてください)。この段階は前回の後に行われるので、この段階で生成された"
は&quot;
にはなりません。
結果
技術的概要
コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 対話型コンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | なし。 |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール |
application , document ,
img , none ,
presentation
|
DOM インターフェイス | HTMLIFrameElement |
仕様書
Specification |
---|
HTML Standard # the-iframe-element |
ブラウザーの互換性
BCD tables only load in the browser