<fencedframe>
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
<fencedframe> は HTML の要素で、現在の HTML ページに別のページを埋め込む、ネストされた閲覧コンテキストを表します。<fencedframe> は、見た目や機能の点では <iframe> 要素と非常によく似ていますが、次の点が異なります。
<fencedframe> の内容と埋め込み元サイトの間の通信は制限されます。
<fencedframe> はクロスサイトのデータにアクセスできますが、ユーザーのプライバシーを保護するために厳密に制御された特定の条件下に限られます。
<fencedframe> は通常のスクリプト（例えば、ソース URL の取得や設定）によって操作したり、データにアクセスしたりできません。<fencedframe> の内容は、特定の API を通じてのみ埋め込めます。
<fencedframe> は埋め込み元コンテキストの DOM にアクセスできず、逆に埋め込み元コンテキストも <fencedframe> の DOM にアクセスできません。
<fencedframe> 要素は、より高度なプライバシー保護機能を組み込んだ <iframe> の一種です。サードパーティ Cookie への依存やその他のプライバシー上のリスクといった、<iframe> の問題点に対処することを目的としています。詳しくは Fenced frame API を参照してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
<fencedframe> 実験的 | 126 | 126 | | | 126 | |
| HTML 属性 | ||||||
allow 実験的 | 126 | 126 | | | 126 | |
height 実験的 | 126 | 126 | | | 126 | |
width 実験的 | 126 | 126 | | | 126 | |
| DOM API | ||||||
Fence 実験的 Fenced Frame API の Fence インターフェイスには、fencedframe の機能に関連するいくつかの関数が含まれています。 | 126 | 126 | | | 126 | |
getNestedConfigs 実験的 Fence インターフェースの getNestedConfigs() メソッドは、現在の 内に埋め込まれた にロードされた FencedFrameConfigs を返します。 | 126 | 126 | | | 126 | |
reportEvent 実験的 Fence インターフェイスの reportEvent() メソッドは、広告オークションの結果を収集する目的で、Protected Audience API の InterestGroupReportingScriptRunnerGlobalScope.registerAdBeacon メソッド経由で登録された 1 つ以上の特定の URL へのビーコン経由のレポート データの送信をトリガーします。 | 126 | 126 | | | 126 | |
| Fence インターフェイスの setReportEventDataForAutomaticBeacons() メソッドは、fencedframe 内でナビゲーションが発生したときに送信されるイベント データを指定します。 このデータは、自動ビーコンを介して、Protected Audience API の InterestGroupReportingScriptRunnerGlobalScope.registerAdBeacon メソッドを介して登録された 1 つ以上の特定の URL に送信されます。 | 126 | 126 | | | 126 | |
| FencedFrameConfig インターフェイスは、fencedframe のナビゲーション、つまり、そこに表示されるコンテンツを表します。 | 126 | 126 | | | 126 | |
| FencedFrameConfig インターフェイスの setSharedStorageContext() メソッドは、埋め込みドキュメントから の共有ストレージにコンテキスト データを渡します。 | 126 | 126 | | | 126 | |
| HTMLFencedFrameElement インターフェイスは、JavaScript のフェンスドフレーム要素を表し、構成プロパティを提供します。 | 126 | 126 | | | 126 | |
allow 実験的 HTMLFencedFrameElement のallowプロパティは、対応するfencedframeのallow属性の値を取得および設定します。この属性は、コンテンツが最初に埋め込まれるときにコンテンツに適用されるアクセス許可ポリシーを表します。 | 126 | 126 | | | 126 | |
config 実験的 HTMLFencedFrameElement の config プロパティには、FencedFrameConfig オブジェクトが含まれています。これは、FencedFrame のナビゲーション、つまり、FencedFrame 内に表示されるコンテンツを表します。 FencedFrameConfig は、Protected Audience API などのソースから返されます。 | 126 | 126 | | | 126 | |
height 実験的 HTMLFencedFrameElement の height プロパティは、要素の高さを指定する、対応する FencedFrame の高さ属性の値を取得および設定します。 | 126 | 126 | | | 126 | |
sandbox 実験的 | 126 | 126 | | | 126 | |
width 実験的 HTMLFencedFrameElement の width プロパティは、要素の幅を指定する、対応する FencedFrame width 属性の値を取得および設定します。 | 126 | 126 | | | 126 | |
| deprecatedReplaceInURN() は Navigator インターフェイスのメソッドで、指定された不透明 URN または FencedFrameConfig の内部 url プロパティに対応する割り当てられた URL 内の指定された文字列を置換します。 | 128 | 128 | | | 128 | |
fence 実験的 fence は、Window インターフェイスの読み取り専用のプロパティであり、現在の文書コンテキストに対応する Fence オブジェクトインスタンスを返します。 | 126 | 126 | | | 126 | |
| その他 | ||||||
html.elements.a.target.unfencedTop 実験的 _unfencedTop`の値 | 126 | 126 | | | 126 | |
| HTTP の Content-Security-Policy (CSP) における fenced-frame-src ディレクティブは、ディレクティブは、 fencedframe 要素に読み込まれた、埋め込まれた閲覧コンテキストの有効なソースを指定します。 | 126 | 126 | | | 126 | |
http.headers.Sec-Fetch-Dest.fencedframe 実験的 fencedframe`の値 | 126 | 126 | | | 126 | |
基本構文
<fencedframe
width="320" height="50"
mode="opaque-ads">
</fencedframe>ライブデモ
Privacy-preserving embed idea
Describe fenced frames as a more isolated embedding model for privacy-sensitive cases.
Isolation goal
Explain that the feature aims to reduce host-page knowledge about embedded ad or measurement data.
Adoption note
Expect experimental support and platform restrictions when exploring fenced frames.
実務での使いどころ
-
<fencedframe> の活用
Experimental: これは実験的な機能です。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。