クロスサイト データを共有することなく、ページにコンテンツを安全に埋め込むことができます。
実装ステータス
このドキュメントでは、新しい 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
。
ストレージ パーティショニングでクロスサイト プライバシーを強化する
ウェブをブラウジングしていると、おそらく 1 つのサイトで商品を閲覧し、その後 まったく別のサイトの広告に再度表示された場合
現在、この広告手法は主にトラッキングを通じて行われています。 サードパーティ Cookie を使用してサイト間で情報を共有する技術。この Chrome が アウト よりプライバシーに配慮したバリエーションに 置き換えることができます
Chrome はストレージを処理しています
「パーティショニング」です。
ブラウザ ストレージをサイトごとに分割します。現時点では、shoes.example
からの iframe は、
news.example
に埋め込まれ、その iframe が値をストレージに格納すると、
その値は shoes.example
サイトから読み取ることができます。ストレージが
クロスサイト iframe ではストレージを共有できなくなるため、
shoes.example
は iframe によって保存されている情報にアクセスできなくなります。条件
iframe は *.shoes.example
から配信され、埋め込まれます。
*.shoes.example
は同一サイトとみなされるため、ブラウザのストレージが共有されます。
![ストレージ分割の前後の比較。](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/a-comparison-before-aft-4902b6c89fcb5.png?authuser=0000&hl=ja)
ストレージ パーティショニングは、以下を含む 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 |
fencedframe |
---|---|---|
コンテンツを埋め込む | ○ | ○ |
埋め込みコンテンツから埋め込みコンテキスト DOM にアクセスできる | ○ | いいえ |
埋め込みコンテキストから埋め込みコンテンツの DOM にアクセスできる | ○ | いいえ |
監視可能な属性(name など) |
○ | いいえ |
URL(http://example.com ) |
○ | ○(ユースケースによって異なる) |
ブラウザ管理の不透明ソース(urn:uuid ) |
いいえ | ○ |
クロスサイト データへのアクセス | いいえ | ○(ユースケースによって異なる) |
フェンス付きフレームでは、プライバシー保護のためサポートされる外部通信オプションが少なくなります。
フェンス付きフレームは 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 を有効にします。
![Chrome Experiments で、[Enable the Fenced frame element] というフラグを [Enabled] に設定する。](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/in-chrome-experiments-se-46957b7b97eb3.png?authuser=0000&hl=ja)
ダイアログには複数の選択肢があります。[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: 説明をご覧ください。 質問し、 ディスカッションできます。
- デベロッパー サポート: プライバシー サンドボックス デベロッパー サポート リポジトリをご覧ください。