HTML `<fencedframe>` フェンスフレーム要素

Deprecated

To be removed

This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates. Following the announcement that Chrome will maintain its current approach to third-party cookies, Chrome decided to withdraw certain Privacy Sandbox features including the <fencedframe> element and related APIs.

完全な互換性情報を見る
もっと詳しく

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

<fencedframe> は HTML の要素で、現在の HTML ページに別のページを埋め込む、ネストされた閲覧コンテキストを表します。<fencedframe> は、見た目や機能の点では <iframe> 要素と非常によく似ていますが、次の点が異なります。

<fencedframe> の内容と埋め込み元サイトの間の通信は制限されます。
<fencedframe> はクロスサイトのデータにアクセスできますが、ユーザーのプライバシーを保護するために厳密に制御された特定の条件下に限られます。
<fencedframe> は通常のスクリプト（例えば、ソース URL の取得や設定）によって操作したり、データにアクセスしたりできません。<fencedframe> の内容は、特定の API を通じてのみ埋め込めます。
<fencedframe> は埋め込み元コンテキストの DOM にアクセスできず、逆に埋め込み元コンテキストも <fencedframe> の DOM にアクセスできません。

<fencedframe> 要素は、より高度なプライバシー保護機能を組み込んだ <iframe> の一種です。サードパーティ Cookie への依存やその他のプライバシー上のリスクといった、<iframe> の問題点に対処することを目的としています。詳しくはフェンスフレーム API を参照してください。

属性

この要素には、グローバル属性に加えて、次の属性があります。

allow: <fencedframe> に対する権限ポリシーを指定します。これにより、リクエスト元のオリジンに基づいて <fencedframe> で利用可能な機能が定義されます。どの機能を制御できるかについては、後述のフェンスフレームで利用可能な権限ポリシーを参照してください。
height: フェンスフレームの高さを CSS ピクセル単位で表す整数値です。既定値は 150 です。
width: フェンスフレームの幅を CSS ピクセル単位で表す整数値です。既定値は 300 です。

フェンスフレームで利用可能な権限ポリシー

最上位コンテキストからフェンスフレームへ機能の許可・拒否を委譲すると、それ自体が通信チャネルとなり得るため、プライバシー上のリスクになります。そのため、Permissions Policy (例: camera、geolocation) は、フェンスフレーム内では利用できません。

フェンスフレーム内でポリシーにより有効化できるのは、フェンスフレーム専用に設計された次の機能のみです。

Protected Audience API
- attribution-reporting
- private-aggregation
- shared-storage
- shared-storage-select-url
Shared Storage API
- attribution-reporting
- private-aggregation
- shared-storage
- shared-storage-select-url

現時点では、これらの機能は常に有効です。将来的には <fencedframe> の allow 属性を使って制御できるようになる予定です。なお、この方法で Privacy Sandbox の機能をブロックすると、フェンスフレーム自体も読み込まれなくなり、通信チャネルは完全に遮断されます。

フェンスフレーム境界をまたぐフォーカス

ドキュメントのフォーカスをフェンスフレームの境界をまたいで移動すること（外部から内部、またはその逆）は制限されています。クリックや Tab キーなどのユーザー操作による移動は許可されます（フィンガープリントのリスクがないため）。

一方で、HTMLElement.focus() のような API 呼び出しによる移動は禁止されています。これは、悪意のあるスクリプトが連続した呼び出しを使って情報を推測・漏洩する可能性があるためです。

配置とスケーリング

<fencedframe> は置換要素であるため、object-position プロパティを使って埋め込みコンテンツの位置を調整できます。

メモ: object-fit プロパティは <fencedframe> 要素には影響しません。

埋め込みコンテンツのサイズは、<fencedframe> の config オブジェクトの contentWidth および contentHeight プロパティによって設定される場合があります。この場合、width や height を変更するとページ上のコンテナーサイズは変わりますが、内部の文書はそれに合わせて拡大・縮小表示されます。埋め込み文書の Window.innerWidth および Window.innerHeight の値は変わりません。

アクセシビリティ

スクリーンリーダーなどの支援技術を利用するユーザーは、<fencedframe> の title グローバル属性を使って内容を識別できます。title には、埋め込みコンテンツを簡潔に説明する値を指定してください。

html

<fencedframe
  title="新しい Log の広告（Blammo 提供）"
  width="640"
  height="320"></fencedframe>

title がない場合、ユーザーは内容を把握するために <fencedframe> 内へ移動する必要があります。これは文脈の切り替えを伴うため、特に複数の <fencedframe> や動画・音声などのインタラクティブなコンテンツが含まれる場合、混乱や負担の原因となります。

例

<fencedframe> に表示されるコンテンツを設定するには、Protected Audience や Shared Storage などの API によって生成される FencedFrameConfig オブジェクトを、<fencedframe> の config プロパティに設定することで指定します。

以下の例では、Protected Audience API の広告オークションの結果として得られた FencedFrameConfig を使って、当選した広告を <fencedframe> に表示します。

html

<fencedframe width="640" height="320"></fencedframe>

const frameConfig = await navigator.runAdAuction({
  // … オークションの設定
  resolveToConfig: true,
});

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

メモ: runAdAuction() 呼び出しで resolveToConfig: true を指定しない場合、返される Promise は FencedFrameConfig ではなく URN を返し、<iframe> でのみ使用可能です。

技術的概要

コンテンツカテゴリー	フローコンテンツ, 記述コンテンツ、埋め込みコンテンツ、対話型コンテンツ、知覚可能コンテンツ
許可されている内容	なし
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	埋め込みコンテンツを受け入れるすべての要素。
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	`application`, `document`, `img`, `none`, `presentation`
DOM インターフェイス	`HTMLFencedFrameElement`

仕様書

仕様書
Fenced Frame # the-fencedframe-element

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年8月20日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

HTML <fencedframe> フェンスフレーム要素

MDN の改良に協力

HTML `<fencedframe>` フェンスフレーム要素