<iframe>: インラインフレーム要素

それぞれの閲覧コンテキストにはそれぞれの文書があり、URL ナビゲーションができます。それぞれの埋め込み閲覧コンテキストのナビゲーションは、最上位の閲覧コンテキストのセッション履歴で直線化されます。他の閲覧コンテキストを埋め込んでいる閲覧コンテキストは、親閲覧コンテキスト と呼ばれます。最上位 の閲覧コンテキスト（親を持たないもの）は、通常はブラウザーのウィンドウで、 Window オブジェクトで表されます。

この要素にはグローバル属性があります。

allow

権限ポリシーを <iframe> に指定します。このポリシーは、 <iframe> が利用可能な機能（例：マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど）をリクエストのオリジンに基づいて定義します。

メモ: allow 属性で指定された権限ポリシーは Permissions-Policy ヘッダーで指定されたポリシーの上に、さらに制限を実装するものです。それはそれを置き換えるものではありません。

allowfullscreen

この <iframe> が requestFullscreen() を呼び出して全画面モードにすることができる場合は、 true に設定します。

メモ: この属性は古い属性とみなされており、 allow="fullscreen" として再定義されました。

allowpaymentrequest Experimental

異なるオリジンの <iframe> で 支払いリクエスト API の実行を許可する場合は true に設定します。

メモ: この属性は古い属性とみなされており、 allow="payment" として再定義されました。

credentialless Experimental Non-standard

true に設定すると <iframe> を無信頼であることを示します。 つまり、そのコンテンツは新しい、一時的なコンテキストで読み込まれることになります。これはそのオリジンに関連するネットワーク、クッキー、ストレージデータへのアクセス権がありません。最上位の文書の存続期間に依存する新しいコンテキストを使用します。その代わりに Cross-Origin-Embedder-Policy (COEP) 埋め込みルールは解除され、COEP を設定した文書はそうでない第三者の文書を埋め込むことができるようになります。詳しくは無信頼の iframe を参照してください。

csp Experimental

埋め込みリソースを制限するコンテンツセキュリティポリシーです。詳しくは HTMLIFrameElement.csp をご覧ください。

height

フレームの高さを CSS ピクセル数で示します。既定値は 150 です。

loading

ブラウザーが iframe をどのように読み込むかを示します。

• eager: 可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします（これが既定値です）。
• lazy: ブラウザーで定義されたビューポートからの計算された距離に達するまで iframe の読み込みを延期します。

name

埋め込み閲覧コンテキストのターゲットの名前です。 <a>, <form>, <base> 要素における target 属性の値、 <input> や <button> 要素における formtarget 属性の値、 window.open() メソッドの windowName 引数の値として使用することができます。

referrerpolicy

フレームのリソースにアクセスする際にどのリファラーを送信するかを示します。

• no-referrer: Referer ヘッダーを送信しません。
• no-referrer-when-downgrade: Referer ヘッダーは TLS (HTTPS) のないオリジンには送信しません。
• 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-downloads-without-user-activation Experimental : ユーザーの操作なしでダウンロードが発生することを許可します。
• allow-forms: ページがフォームを送信することを許可します。このキーワードを使用しない場合、フォームは通常通り表示されますが、フォームを送信しても入力の検証、ウェブサーバへのデータ送信、ダイアログの終了が行われません。
• allow-modals: ページが Window.alert(), Window.confirm(), Window.print(), Window.prompt() によってモーダルウィンドウを開くことができるようにしますが、 <dialog> は、このキーワードに関わらず開くことが可能です。また、ページが BeforeUnloadEvent イベントを受信することができるようにもします。
• allow-orientation-lock: リソースが画面の方向をロックすることができるようにします。
• allow-pointer-lock: リソースがポインターロック API (en-US) を使用できるようにします。
• allow-popups: ポップアップを許可します（Window.open(), target="_blank", Window.showModalDialog() などから）。このキーワードが使用されていない場合、その機能は静かに失敗します。
• allow-popups-to-escape-sandbox: サンドボックス化された文書が、サンドボックスを継承するウィンドウではないウィンドウを開けるようにします。例えば、これによって安全に広告をサンドボックス化し、同じ制約を広告のリンク先のページに強制しないようにすることができます。
• allow-presentation: リソースがプレゼンテーションセッション (en-US)を開始できるようにします。
• allow-same-origin: このトークンが使用されていない場合、リソースは同一オリジンポリシーに常に失敗する特別なオリジンからのものとして扱われます（潜在的にデータストレージやクッキーへのアクセスや一部の JavaScript API の使用を阻止することがあります）。
• allow-scripts: ページがスクリプトを実行することを許可します（ただし、ポップアップウィンドウは作成しません）。このキーワードが使用されない場合、この操作は許可されません。
• allow-storage-access-by-user-activation Experimental : <iframe> で読み込んだ文書がストレージアクセス API を使用して、分離されていないクッキーへのアクセスをリクエストできるようにします。
• allow-top-navigation: リソースが最上位の閲覧コンテキスト（_top という名前のもの に移動できるようにします。
• allow-top-navigation-by-user-activation: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
• allow-top-navigation-to-custom-protocols: ブラウザーに組み込まれている、またはウェブサイトによって登録された http 以外のプロトコルへのナビゲーションを可能にします。この機能は allow-popups や allow-top-navigation キーワードでも有効になります。

メモ:

• 埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、 allow-scripts と allow-same-origin を同時に使用すると、埋め込まれた文書から sandbox 属性を削除することができるようになるため、絶対に避けるべきです。 sandbox 属性をまったく使用しないよりも安全ではなくなります。
• 攻撃者がサンドボックス化した iframe の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは別のオリジンから提供するようにもしてください。

src

埋め込むページの URL です。同一オリジンポリシーに従う空白ページを埋め込む場合は、 about:blank の値を使用してください。また、プログラムから <iframe> の src 属性を削除すると (例えば Element.removeAttribute() などで)、 Firefox (バージョン 65 以降)、 Chromium ベースのブラウザー、 Safari/iOS では about:blank が読み込まれます。

srcdoc

埋め込むインライン HTML で、 src 属性を上書きします。ブラウザーが srcdoc 属性に対応していない場合は、 src 属性の URL で代替されます。

width

フレームの幅を CSS ピクセル数で示します。既定値は 300 です。

以下の属性は非推奨であり、すべてのユーザーエージェントが対応しているとは限りません。新しいコンテンツでは使用せず、既存のコンテンツから削除するようにしましょう。

align 非推奨

フレームを含むコンテキストに対する、フレームの整列方法を指定します。

frameborder 非推奨

値が 1 (既定) ならば、このフレームの周りに境界線を描きます。値が 0 ならば、このフレームの周りの境界線を削除しますが、代わりに CSS の border プロパティを使用して <iframe> の境界線を制御してください。

longdesc 非推奨

フレームの内容についての長い説明の URL です。誤用が広がっているため、非視覚ブラウザーでは有用ではありません。

marginheight 非推奨

フレームの内容と上下の境界との間における、ピクセル単位の余白の量です。

marginwidth 非推奨

フレームの内容と左右の境界との間における、ピクセル単位の余白の量です。

scrolling 非推奨

ブラウザーがフレームにスクロールバーを表示することを示します。

• auto: フレームの内容が、フレームの寸法よりも大きい場合のみ。
• yes: 常にスクロールバーを表示する。
• no: スクロールバーを一切表示しない。

インラインフレームは、 <frame> 要素のように window.frames 擬似配列に入ります。

DOM の HTMLIFrameElement オブジェクトでは、スクリプトはフレーム化されたリソースの window オブジェクトに contentWindow プロパティを使ってアクセスすることができます。 contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。

スクリプトは、フレームの内側からは window.parent で親ウィンドウを参照できます。

フレームの内容にアクセスするスクリプトは、同一オリジンポリシーに従います。別なオリジンから読み込まれたスクリプトは、フレーム内のスクリプトがフレームの親にアクセスする場合を含め、他の window オブジェクトのほとんどのプロパティにアクセスできません。オリジンをまたいだやりとりは Window.postMessage() を使用して実現できます。

置換要素なので、 <iframe> 要素のボックス内における埋め込み文書の位置、配置、表示倍率は、 object-position および object-fit プロパティで設定することができます。

この例では、https://example.org のページを <iframe> で埋め込みます。

HTML

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

結果

読み上げソフトのような支援技術を利用して操作している人は、 <iframe> 上の title 属性を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

この title がないと、埋め込みコンテンツが何であるかを特定するために <iframe> の内容に移動しなければならなります。このコンテキストの移動は、特に複数の <iframe> が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。

• プライバシー、アクセス制限、情報セキュリティ