フェンスフレーム API

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

警告: 現在、1 社のブラウザベンダーがこの機能に反対しています。詳細については、下記の標準化に関する見解の節を参照してください。

フェンスフレーム API は <fencedframe> 要素に埋め込まれたコンテンツを制御する機能を提供します。

概念と使用方法

ウェブにおけるプライバシーとセキュリティの問題の大きな原因の一つは、 <iframe> 要素に埋め込まれたコンテンツです。過去には、 <iframe> はサードパーティクッキーを設定するために使用されてきました。サードパーティクッキーは、サイト間で情報を共有したりユーザーを追跡したりするために使用することができます。また、 <iframe> に埋め込まれたコンテンツは、埋め込み文書と通信することができます（例えば、 Window.postMessage() を使用します）。

埋め込み先の文書は、スクリプトを使用して <iframe> から様々な情報を読み取ることができます。例えば、埋め込まれた URL が URL 引数を含んでいる場合、 src プロパティから URL を読み取ることで、重要なトラッキング/フィンガープリントのデータを取得できる可能性があります。 <iframe> は埋め込みコンテキストの DOM にもアクセスすることができます。

ほとんどの現行ブラウザーは、クッキーのデータが追跡のために使用できなくなるようにストレージを分割する仕組みに取り組んでいます（例えば、個別区画化された状態を持つクッキー (CHIPS) や Firefox State Partitioning を参照してください）。

<fencedframe> 要素は、このパズルのもう一つのピースを解決することを目指しています。形状と機能において、 <iframe> ととてもよく似ています。

<fencedframe> コンテンツとそれを埋め込むサイトの間で通信を共有することはできません。
<fencedframe> はサイトをまたいだデータにアクセスすることができますが、それはユーザーのプライバシーを守る、とても特殊な設定をして制御した場合に限られます。
<fencedframe> は自由に操作したり、通常のスクリプト（例えばソース URL を読み込んだり設定したり）でデータにアクセスしたりすることはできません。 <fencedframe> のコンテンツは、固有の API を介してのみ埋め込むことができます。
<fencedframe> は埋め込みコンテキストの DOM にアクセスすることはできませんし、埋め込みコンテキストが <fencedframe> の DOM にアクセスすることもできません。

フェンスフレームの通信モデルに関する情報については、埋め込みフレームとの通信のガイドをご覧ください。

用途

<fencedframe> は他の API によって、様々な種類の別サイトのコンテンツを埋め込んだり、データを収集したりするために用いられ、プライバシーを保護する方法で異なる用途を満たします。これらのほとんどは、前回まではサードパーティーのクッキーや、プライバシーにとって好ましくない他のメカニズムに頼っていました。

共有ストレージ API^(英語) は、セキュアな環境でパーティション分割されていないクロスサイトデータにアクセスし、 <fencedframe> 内で計算や結果の表示をすることを提供します。例えば：
- 広告主は広告のリーチを測定したり、ユーザーが他のサイトで既に見た広告に基づいて後続の広告を配信したりできます。
- 開発者は A/B テストを行うことができ、ユーザーが割り当てられているグループに基づいて、または何人のユーザーが既にそれぞれを見たかに基づいて、ユーザーにバリアントを表示させることができます。
- 企業は、ユーザーが他にも見たことのあるサイトに基づいて、ユーザーの使い勝手をカスタマイズすることができます。例えば、ユーザーが既に会員権を購入している場合、他のプロパティで会員登録広告を表示させないようにすることができます。
保護オーディエンス API^(英語) によって、開発者者が関心グループベースの広告、つまりリマーケティングやカスタムオーディエンスの使用用途を実装することができます。広告空間に対する複数の入札を評価し、落札した広告を <fencedframe> に表示することができます。
プライベートアグリゲーション API^(英語) は、（共有ストレージまたは保護オーディエンス API を元とする） <fencedframe>からデータを収集し、集計レポートを作成することができます。

`<fencedframe>` はどのように動作するのか

前述の通り、 <fencedframe> に埋め込まれたコンテンツを通常のスクリプトで直接制御することはできません。

どのコンテンツを <fencedframe> に表示させるかを設定するには、 API （Protected Audienceや共有ストレージなど）を利用して FencedFrameConfig オブジェクトを生成し、 JavaScript で <fencedframe> の HTMLFencedFrameElement.config プロパティの値として設定します。

次の例は、 Protected Audience API の広告オークションから FencedFrameConfig を取得し、それを使用して落札した広告を <fencedframe> に表示します。

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

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

FencedFrameConfig オブジェクトを得るには、resolveToConfig: true を runAdAuction() に渡す必要があります。 resolveToConfig が false に設定されていると、返される Promise は不透過な URN （urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a など）に解決し、これを <iframe> 内でのみ使用することができます。

どちらの方法でも、ブラウザーは埋め込むコンテンツのターゲット位置を含む URL を格納します。不透明な URN、または FencedFrameConfig 内部の url プロパティに割り当てられたものです。埋め込みコンテキストで実行する JavaScript では、 URL の値を読み取ることはできません。

メモ: プライバシーサンドボックス API への既存の実装の移行を容易にするために、<iframe> の不透明な URN に対応しています。この対応は一時的なものであることを意図しており、採用が進むにつれて将来的に除去される予定です。

メモ: FencedFrameConfig には setSharedStorageContext() メソッドがあり、埋め込み文書内のデータを <fencedframe> の共有ストレージに渡すために使用します。例えば、 Worklet で <fencedframe> を経由してアクセスし、レポートを作成するために使用することができます。詳しくは共有ストレージ API を参照してください。

`Fence` オブジェクトにおけるフェンスフレーム機能へのアクセス

<fencedframe> に埋め込まれた文書内では、 JavaScript は Window.fence プロパティにアクセスすることができ、その文書の Fence インスタンスを返します。このオブジェクトには、特にフェンスフレーム API の機能に関連するいくつかの関数が格納されています。例えば、 Fence.reportEvent() は、広告の表示やクリックを報告するために、 1 つ以上の指定した URL へのビーコンを介したレポートデータの送信を発生させる方法を提供します。

権限ポリシー

<fencedframes> で使用するために設計された特定の機能だけが、そのフレームに設定する権限ポリシーによって有効にできます。詳細はフェンスフレームで利用できる権限ポリシーを参照してください。

HTTP ヘッダー

Sec-Fetch-Dest ヘッダーに fencedframe の値があると、 <fencedframe> 内に埋め込まれた子 <iframe> を含む、<fencedframe> 内からのリクエストに設定されます。

http

Sec-Fetch-Dest: fencedframe

サーバーは <fencedframe> に読み込まれることを意図している文書、または <fencedframe> 内に埋め込まれた <iframe> に対して fenced-frame という値を持つ Supports-Loading-Mode レスポンスヘッダーを設定しなければなりません。

http

Supports-Loading-Mode: fenced-frame

他にも HTTP ヘッダーに対するフェンスフレームの効果は以下の通りです。

ユーザーエージェントクライアントヒントは権限ポリシーの委譲に頼っているため、データを漏洩するために使用することができるため、フェンスフレーム内では利用できません。
厳密な Cross-Origin-Opener-Policy 設定は、フェンスで囲まれたフレーム内から開くための新しい閲覧コンテキストに対して強制されます。フェンスされたフレームの中から開かれた新しいウィンドウは rel="noopener" と Cross-Origin-Opener-Policy: same-origin を保有し、 Window.opener が null を返し、自分自身の閲覧コンテキストグループに置かれるようにします。
Content-Security-Policy: fenced-frame-src が <fencedframe> 要素に読み込まれる入れ子ブラウズコンテキストの有効なソースを指定するために追加されました。
Content-Security-Policy: sandbox カスタム設定は、プライバシーの課題を軽減するために、フェンスフレームに継承することができません。フェンスされたフレームを読み込むには、 sandbox CSP を指定しないか（下記値を意味します）、以下のサンドボックス値を指定する必要があります：
- allow-same-origin
- allow-forms
- allow-scripts
- allow-popups
- allow-popups-to-escape-sandbox
- allow-top-navigation-by-user-activation

`beforeunload` および `unload` イベント

beforeunload と unload イベントは、ページ削除のタイムスタンプという形で情報が漏れる可能性があるため、柵で囲まれたフレームでは発行しません。実装では、可能な限り多くの情報漏えいをなくすことを目指しています。

インターフェイス

FencedFrameConfig: <fencedframe> のナビゲーションを表します。つまり、何かコンテンツが表示されます。 FencedFrameConfig は保護オーディエンス API^(英語) などのソースから返され、HTMLFencedFrameElement.config の値として設定します。
Fence: フェンスフレームの機能に関連するいくつかの関数を格納します。 <fencedframe> 内に埋め込まれた文書にのみ利用できます。
HTMLFencedFrameElement: JavaScript で <fencedframe> 要素を表し、それを設定するプロパティを提供します。

他のインターフェイスの拡張

Navigator.deprecatedReplaceInURN(): 指定された文字列を、指定された不透明な URN または FencedFrameConfig の内部プロパティ url に割り当てられた URL 内に代入します。
Window.fence: 現在の文書コンテキストの Fence オブジェクトインスタンスを返します。 <fencedframe> 内に埋め込まれた文書でのみ利用できます。