フェンス付きフレームの概要

クロスサイト データを共有することなく、ページにコンテンツを安全に埋め込むことができます。

実装ステータス

このドキュメントでは、新しい HTML 要素 <fencedframe> の概要を説明します。

• フェンス付きフレームに関する提案が一般提供になりました。
• Chrome プラットフォームのステータス

フェンス付きフレームが必要な理由

フェンス付きフレーム（<fencedframe>）は埋め込み用の HTML 要素です iframe と同様のコンテンツです。iframe とは異なり、フェンス付きフレームでは、 エンべディング コンテキストと通信を行い、フレームがクロスサイト アクセスを エンベディング コンテキストと共有できます。一部のプライバシー サンドボックス API フェンス付きフレーム内でレンダリングするために特定のドキュメントを必要とする場合があります。

同様に、エンベディングのコンテキストにあるファーストパーティ データを 表します。

たとえば、news.example（エンベディング コンテキスト）が フェンス付きフレーム内の shoes.example。news.example は次の場所からデータを引き出できません shoes.example の広告。shoes.example はファーストパーティ データを学習できません。 news.example。

ストレージ パーティショニングでクロスサイト プライバシーを強化する

ウェブをブラウジングしていると、おそらく 1 つのサイトで商品を閲覧し、その後 まったく別のサイトの広告に再度表示された場合

現在、この広告手法は主にトラッキングを通じて行われています。 サードパーティ Cookie を使用してサイト間で情報を共有する技術。この Chrome が アウト よりプライバシーに配慮したバリエーションに 置き換えることができます

Chrome はストレージを処理しています 「パーティショニング」です。 ブラウザ ストレージをサイトごとに分割します。現時点では、shoes.example からの iframe は、 news.example に埋め込まれ、その iframe が値をストレージに格納すると、 その値は shoes.example サイトから読み取ることができます。ストレージが クロスサイト iframe ではストレージを共有できなくなるため、 shoes.example は iframe によって保存されている情報にアクセスできなくなります。条件 iframe は *.shoes.example から配信され、埋め込まれます。 *.shoes.example は同一サイトとみなされるため、ブラウザのストレージが共有されます。

ストレージ パーティショニングは、以下を含む Standard Storage API に適用されます。 LocalStorage、IndexedDB、Cookie です。分断された世界では、情報が ファーストパーティ ストレージ全体での漏洩が大幅に減少します。

クロスサイト データを操作する

フェンス付きフレームはプライバシー サンドボックスの機能です これは、トップレベル サイトでデータを分割することを提案します。多くのプライバシー サンドボックス サードパーティ Cookie やサードパーティ Cookie のない環境でクロスサイト ユースケースに対応することが 他のトラッキング メカニズムを使用する場合もあります。例:

• Protected Audience API により、インタレスト ベース広告配信が可能 プライバシーを保護する方法で保護します。
• 共有ストレージを使用すると パーティション分割されていないクロスサイト データに、安全な環境でアクセスします。

フェンス付きフレームが Protected Audience APIProtected Audience API では、 インタレスト カテゴリで広告主のサイトに登録されている グループと、 ユーザーが関心を持っているかもしれないからです次に、別のサイト（ 「パブリッシャー」など）に基づき、関連するインタレスト グループに登録された広告がオークションにかけられ、 落札広告はフェンスで囲まれたフレーム内

パブリッシャーが落札広告を iframe で表示し、スクリプトが iframe の src 属性を追加すると、パブリッシャーはユーザーの 興味 / 関心を広告の URL から取得できます。これはプライバシー保護ではありません。

フェンス付きフレームを使用すると、サイト訪問者に一致する広告を表示できる src とインタレスト グループは広告主だけが知ることができます フレーム内に収まります。パブリッシャーはこの情報にアクセスできませんでした。

フェンス付きフレームの仕組み

フェンス付きフレームはナビゲーションに FencedFrameConfig オブジェクトを使用します。このオブジェクトは、Protected Audience API オークションまたは共有ストレージの URL 選択操作から返されます。次に、config オブジェクトが、フェンス付きフレーム要素の config 属性として設定されます。これは、URL または不透明な URN が src 属性に割り当てられている iframe とは異なります。FencedFrameConfig オブジェクトには読み取り専用の url プロパティがあります。ただし、現在のユースケースでは内部リソースの実際の URL を非表示にする必要があるため、このプロパティは読み取るときに文字列 opaque を返します。

フェンス付きフレームは、postMessage を使用してエンべディングと通信できません。ただし、フェンス付きのフレームでは、フェンス付きのフレーム内に iframe で postMessage を使用できます。

フェンス付きフレームは、他の方法でパブリッシャーから分離されます。たとえば パブリッシャーはフェンス付きフレーム内の DOM にはアクセスできず、 フェンス付きフレームはパブリッシャーの DOM にアクセスできません。さらに、 name - 任意の値に設定でき、 フェンス付きフレームでは使用できません。

フェンス付きフレームはトップレベル ブラウジングのように コンテキスト （ブラウザのタブなど）。特定のユースケースではフェンス付きフレームが opaque-ads などには、クロスサイト データ（Protected Audience API の関心など）が含まれる可能性があります。 分割されていないストレージや Cookie にフレームからアクセスすることはできません。「 opaque-ads フェンス付きフレームが一意のノンスベースの Cookie とストレージにアクセスできます 必要があります。

フェンス付きフレームの特性については、 explainer。

フェンス付きフレームと iframe フレームの違い

フェンス付きフレームの動作と動作がわかったところで、 既存の iframe 機能に追加できます。

フェンス付きフレームでは、プライバシー保護のためサポートされる外部通信オプションが少なくなります。

フェンス付きフレームは iframe に取って代わるものですか？

結局のところ、フェンス付きフレームが iframe の代わりとなることはなく、使用する必要もありません。 Fenced Frames は、Google Cloud Storage からのデータが 異なるトップレベル パーティションを同じページに表示する必要があります。

同一サイト iframe（フレンドリー iframe とも呼ばれます）は信頼できるものとみなされます 説明します。

フェンス付きフレームを使用する

フェンス付きフレームは、以下の目的で他のプライバシー サンドボックス API と組み合わせて使用されます。 さまざまなストレージ パーティションのドキュメントを 1 つのページ内に表示します。 API 候補については現在検討中です。

現在、この組み合わせの候補は次のとおりです。

• TURTLEDOVE API ファミリー（ Protected Audience API のベース）として、フェンス付きフレームを使用コンバージョン リフト測定 測定 共有ストレージを使用します。
• もう 1 つのオプションは、フェンス付きフレームを 読み取り専用 またはパーティショニングされていない ストレージ。

詳しくは、フェンス付きフレーム（Fenced Frames）をご覧ください。 ユースケースの解説をご覧ください。

例

フェンス付きフレームの config オブジェクトを取得するには、resolveToConfig: true を Protected Audience API の runAdAuction() 呼び出しまたは共有ストレージの selectURL() 呼び出しに渡す必要があります。プロパティが追加されていない（または false に設定されている）場合、結果の Promise は iframe でのみ使用できる URN に解決されます。

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

構成を取得したら、それをフェンス付きフレームの config 属性に割り当て、構成で表されるリソースにフレームを移動できます。以前のバージョンの Chrome は resolveToConfig プロパティをサポートしていないため、操作する前に Promise が FencedFrameConfig に解決されたことを確認する必要があります。

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

詳細については、Fenced Frame と Fenced Frame config の説明をご覧ください。

ヘッダー

ブラウザは、フェンスで囲まれたフレームと、フェンスで囲まれたフレーム内に埋め込まれた iframe から行われたリクエストに対して Sec-Fetch-Dest: fencedframe を設定します。

Sec-Fetch-Dest: fencedframe

フェンス付きフレームでドキュメントを読み込むには、サーバーで Supports-Loading-Mode: fenced-frame レスポンス ヘッダーを設定する必要があります。フェンスで囲まれたフレーム内の iframe にもこのヘッダーを指定する必要があります。

Supports-Loading-Mode: fenced-frame

共有ストレージのコンテキスト

プライベート アグリゲーションを使用して、埋め込み機能からのコンテキスト データに関連付けられたフェンス付きフレーム内のイベントレベルのデータをレポートすることをおすすめします。fencedFrameConfig.setSharedStorageContext() メソッドを使用すると、イベント ID などのコンテキスト データを埋め込みツールから Protected Audience API によって開始された共有ストレージ ワークレットに渡すことができます。

次の例では、埋め込みページで利用可能なデータと、フェンス付きフレームで利用可能なデータの一部を共有ストレージに保存します。埋め込みページで、共有ストレージ コンテキストとしてモックイベント ID が設定されます。フェンス付きフレームから、フレーム イベントデータが渡されます。

埋め込みページで、コンテキスト データを共有ストレージ コンテキストとして設定できます。

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

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

フェンス付きのフレームから、フレームのイベントレベルのデータを共有ストレージ ワークレットに渡すことができます（上記の埋め込みツールからのコンテキスト データとは無関係）。

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

sharedStorage.context から埋め込み者のコンテキスト情報を読み取り、data オブジェクトからフレームのイベントレベル データを読み取り、プライベート アグリゲーションを通じて報告できます。

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

フェンス付きフレーム構成オブジェクト内の埋め込み機能のコンテキストについて詳しくは、説明をご覧ください。

フェンス付きフレームを試す

Chrome を使用する フラグを chrome://flags/#enable-fenced-frames で Fenced Frame API を有効にします。

ダイアログには複数の選択肢があります。[Rule Detections] ビューを *有効にする*: Chrome を新しいアーキテクチャに自動更新できます 自動的に適用されます。

その他のオプション [ShadowDOM で有効化] と [複数の ページ アーキテクチャなど、さまざまな実装戦略を提供します。 関連する用語です現在の [有効にする] ボタンは、 ShadowDOM で可能。将来的には、[有効にする] は [有効にする マルチページ アーキテクチャをご覧ください。

機能検出

フェンス付きフレームが定義されているかどうかを確認するには:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

フェンス付きフレーム構成が使用可能かどうかを判断するには: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

ブラウザ サポート

<fencedframe> 要素はまだ試験運用版モードであるため、現時点では Chrome 97 以降でサポートされます。現在のところ、他の 。

対応してフィードバックを共有する

フェンス付きフレームは現在議論中であり、今後変更される可能性があります。 実現します。この API をお試しいただき、ご意見やご感想がございましたら、ぜひお聞かせください。

• GitHub: 説明をご覧ください。 質問し、 ディスカッションできます。
• デベロッパー サポート: プライバシー サンドボックス デベロッパー サポート リポジトリをご覧ください。

補足説明

• Chrome プラットフォームのステータス
• Blink Intent to プロトタイプ作成