<fencedframe>: フェンスドフレーム要素

属性

この要素には、グローバル属性に加えて、次の属性があります。

allow Experimental

<fencedframe> に対する 権限ポリシー を指定します。これにより、リクエスト元のオリジンに基づいて <fencedframe> で利用可能な機能が定義されます。どの機能を制御できるかについては、後述のフェンスドフレームで利用可能な権限ポリシーを参照してください。

height Experimental

フェンスドフレームの高さを CSS ピクセル単位で表す整数値です。既定値は 150 です。

width Experimental

フェンスドフレームの幅を CSS ピクセル単位で表す整数値です。既定値は 300 です。

フェンスドフレームで利用可能な権限ポリシー

トップレベルコンテキストからフェンスドフレームへ機能の許可・拒否を委譲すると、それ自体が通信チャネルとなり得るため、プライバシー上のリスクになります。そのため、Permissions Policy (例: camera、geolocation) は、フェンスドフレーム内では利用できません。

フェンスドフレーム内でポリシーにより有効化できるのは、フェンスドフレーム専用に設計された次の機能のみです。

• Protected Audience API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• Shared Storage API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

現時点では、これらの機能は常に有効です。将来的には <fencedframe> の allow 属性を使って制御できるようになる予定です。なお、この方法で Privacy Sandbox の機能をブロックすると、フェンスドフレーム自体も読み込まれなくなり、通信チャネルは完全に遮断されます。

フェンスドフレーム境界をまたぐフォーカス

ドキュメントのフォーカスをフェンスドフレームの境界をまたいで移動すること（外部から内部、またはその逆）は制限されています。クリックや Tab キーなどのユーザー操作による移動は許可されます（フィンガープリントのリスクがないため）。

一方で、HTMLElement.focus() のような API 呼び出しによる移動は禁止されています。これは、悪意のあるスクリプトが連続した呼び出しを使って情報を推測・漏洩する可能性があるためです。

配置とスケーリング

<fencedframe> は 置換要素 であるため、object-position プロパティを使って埋め込みコンテンツの位置を調整できます。

埋め込みコンテンツのサイズは、<fencedframe> の config オブジェクトの contentWidth および contentHeight プロパティによって設定される場合があります。この場合、width や height を変更するとページ上のコンテナーサイズは変わりますが、内部の文書はそれに合わせて拡大・縮小表示されます。埋め込み文書の Window.innerWidth および Window.innerHeight の値は変わりません。

アクセシビリティ

スクリーンリーダーなどの支援技術を利用するユーザーは、<fencedframe> の title グローバル属性 を使って内容を識別できます。title には、埋め込みコンテンツを簡潔に説明する値を指定してください。

<fencedframe
  title="新しい Log の広告（Blammo 提供）"
  width="640"
  height="320"></fencedframe>

title がない場合、ユーザーは内容を把握するために <fencedframe> 内へ移動する必要があります。これは文脈の切り替えを伴うため、特に複数の <fencedframe> や動画・音声などのインタラクティブなコンテンツが含まれる場合、混乱や負担の原因となります。

例

<fencedframe> に表示されるコンテンツを設定するには、Protected Audience や Shared Storage などの API によって生成される FencedFrameConfig オブジェクトを、<fencedframe> の config プロパティに設定することで指定します。

以下の例では、Protected Audience API の広告オークションの結果として得られた FencedFrameConfig を使って、当選した広告を <fencedframe> に表示します。

<fencedframe width="640" height="320"></fencedframe>

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

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

技術的概要

仕様書

ブラウザーの互換性

関連情報

• フェンスドフレーム API
• Fenced frames on privacysandbox.google.com
• The Privacy Sandbox on privacysandbox.google.com