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

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

実装ステータス

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

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

提案	ステータス
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.example の広告がフェンス付きフレームに埋め込まれているとします。news.example が shoes.example 広告からデータを抽出することはできません。また、shoes.example が news.example から自社データを学習することもできません。

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

ウェブの閲覧中にサイトを閲覧した後、まったく別のサイトの広告に再度表示されるのを目にしたことがあるはずです。

現在、この広告手法は主に、サードパーティ Cookie を使用してサイト間で情報を共有するトラッキング技術によって実現されています。これは、Chrome が段階的廃止に取り組んでいるテクノロジーであり、よりプライバシー保護が強化されたバリエーションに置き換えられています。

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

ストレージ パーティショニングは、LocalStorage、IndexedDB、Cookie などの標準のストレージ API に適用されます。パーティション分割された世界では、ファーストパーティ ストレージ全体での情報漏洩が大幅に削減されます。

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

フェンス付きフレームはプライバシー サンドボックス機能の 1 つで、トップレベル サイトでデータを分割するよう提案します。プライバシー サンドボックスの多くの提案と API は、サードパーティ Cookie やその他のトラッキング メカニズムを使用せずに、クロスサイトのユースケースに対応することを目的としています。次に例を示します。

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

フェンス付きフレームが Protected Audience API でどのように機能するかを考えてみましょう。Protected Audience API では、広告主のサイトのインタレスト グループに、ユーザーの興味 / 関心が広告とともに登録されます。その後、別のサイト（「パブリッシャー」）で、関連するインタレスト グループに登録された広告がオークションされ、落札された広告がフェンス付きフレームに表示されます。

パブリッシャーが iframe に落札した広告を表示し、スクリプトが iframe の src 属性を読み取ることができる場合、パブリッシャーはその広告の URL から訪問者の興味 / 関心に関する情報を推測できます。これはプライバシー保護されません。

フェンス付きフレームの場合、パブリッシャーは訪問者の興味 / 関心に一致する広告を表示できますが、src とインタレスト グループはフレーム内の広告主にのみ認識されます。パブリッシャーがこの情報にアクセスできませんでした。

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

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

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

フェンス付きフレームは、他の方法でパブリッシャーから分離されます。たとえば、パブリッシャーはフェンス付きフレーム内の DOM にアクセスできず、フェンス付きフレームはパブリッシャーの DOM にアクセスできません。さらに、name などの属性（パブリッシャーが任意の値に設定でき、パブリッシャーによって監視できる）は、フェンス付きフレームでは使用できません。

フェンス付きフレームは、最上位のブラウジング コンテキスト（ブラウザタブなど）のように動作します。特定のユースケース（opaque-ads など）のフェンス付きフレームにはクロスサイト データ（Protected Audience API インタレスト グループなど）を含めることができますが、このフレームはパーティション分割されていないストレージや Cookie にアクセスできません。opaque-ads フェンス付きフレームは、ノンスベースの一意の Cookie とストレージ パーティションにアクセスできます。

フェンス付きフレームの特性については、説明で詳しく説明しています。

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

フェンス付きフレームの動作と機能しない動作がわかったところで、既存の iframe 機能と比較してみましょう。

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

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

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

最終的に、フェンス付きフレームが iframe を置き換えるものではなく、使用する必要はありません。フェンス付きフレームは、異なるトップレベル パーティションのデータを同じページに表示する必要がある場合に使用する、よりプライベートなフレームです。

同一サイト iframe（Friendly iframe とも呼ばれます）は、信頼できるコンテンツと見なされます。

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

フェンス付きフレームは、他のプライバシー サンドボックス API と連携して機能し、異なるストレージ パーティションのドキュメントを 1 ページに表示します。API 候補は現在検討中です。

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

• Protected Audience API の基礎となる TURTLEDOVE API ファミリーから、フェンス付きフレームは、共有ストレージを使用してコンバージョン リフト測定と連携できるようになりました。
• もう 1 つの方法は、フェンス付きフレームを読み取り専用にするか、パーティション分割されていないストレージにアクセスできるようにすることです。

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

例

フェンス付きフレームの 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 に解決されていることを確認する必要があります。

config をフェンス付きフレーム属性に設定する

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

詳しくは、フェンス付きフレームとフェンス付きフレームの構成に関する説明をご覧ください。

ヘッダー

ブラウザは、フェンス付きフレームとフェンス付きフレーム内に埋め込まれた 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 オブジェクトから読み取り、Private Aggregation を使用してレポートできます。

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.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

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

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

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

ダイアログには複数の選択肢があります。[*有効にする*] を選択することを強くおすすめします。これにより、Chrome で新しいアーキテクチャが利用可能になり次第、自動的に更新されます。

その他のオプション [ShadowDOM を有効化] と [複数のページ アーキテクチャを有効化] では、ブラウザ エンジニアのみに関連するさまざまな実装戦略が提供されます。現在、[Enable] は [Enabled with 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 Prototype