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

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

実装ステータス

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

提案 ステータス
urn to config に関するウェブ API の変更
Explainer
2023 年第 1 四半期に Chrome で利用可能になります。
広告レポート用フェンス付きフレーム(FFAR)のクリエイティブ マクロ
GitHub の問題
2023 年第 3 四半期に Chrome で利用可能になります。
自動ビーコンを 1 回送信する
GitHub の問題
2023 年第 3 四半期に Chrome で利用可能になります。
シリアル化可能なフェンス付きフレームの構成
GitHub の問題
2023 年第 3 四半期に Chrome で利用可能になります。
Protected Audience 広告サイズマクロのその他のフォーマット オプション
GitHub の問題
2023 年第 4 四半期に Chrome で利用可能になります。
登録されているすべての URL への自動ビーコンの送信
GitHub の問題 | GitHub の問題
2023 年第 4 四半期に Chrome で利用可能になります。
Urn iFrame および広告コンポーネント フレームからの広告のインタレスト グループからの退出を有効にする
GitHub の問題
Chrome で 2024 年第 1 四半期より利用可能
restricted.top_navigation_start/commit
GitHub の問題GitHub の問題を導入
Chrome で 2024 年第 1 四半期より利用可能
3PCD まで ReportEvent の Cookie 設定を無効にしない
GitHub の問題
Chrome で 2024 年第 1 四半期より利用可能
クロスオリジン サブフレームの自動ビーコンのサポートを追加
GitHub の問題
Chrome で 2024 年第 1 四半期より利用可能

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

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

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

たとえば、news.example(エンベディング コンテキスト)が フェンス付きフレーム内の shoes.examplenews.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 または不透明な URNsrc 属性に割り当てられている iframe とは異なります。FencedFrameConfig オブジェクトには読み取り専用の url プロパティがあります。ただし、現在のユースケースでは内部リソースの実際の URL を非表示にする必要があるため、このプロパティは読み取るときに文字列 opaque を返します。

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

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

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

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

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

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

特集 iframe fencedframe
コンテンツを埋め込む
埋め込みコンテンツから埋め込みコンテキスト DOM にアクセスできる いいえ
埋め込みコンテキストから埋め込みコンテンツの DOM にアクセスできる いいえ
監視可能な属性(name など) いいえ
URL(http://example.com ○(ユースケースによって異なる
ブラウザ管理の不透明ソース(urn:uuid いいえ
クロスサイト データへのアクセス いいえ ○(ユースケースによって異なる)

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

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

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

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

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

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

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

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

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

Protected Audience API オークションからフェンス付きフレーム構成を取得
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
共有ストレージ URL の選択からフェンス付きフレーム構成を取得
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 FrameFenced 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 を有効にします。

Chrome Experiments で、[Enable the Fenced frame element] というフラグを [Enabled] に設定する。

ダイアログには複数の選択肢があります。[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 をお試しいただき、ご意見やご感想がございましたら、ぜひお聞かせください。

補足説明