【HTML Living Standard】fencedframe要素の使い方
fencedframe要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
fencedframeオブジェクトは、ウェブページ内に別のコンテンツを安全かつプライベートに埋め込むためのHTML要素を表すオブジェクトです。これは、従来の<iframe>要素と似ていますが、埋め込まれるコンテンツと親ページとの間で、より厳格なデータ分離を行うことを目的としています。fencedframeの主な特徴は、埋め込まれたコンテンツが親ページのデータにアクセスできないようにし、また親ページも埋め込まれたコンテンツの内部データにアクセスできないように設計されている点です。これにより、クロスサイトトラッキングといったユーザープライバシー侵害のリスクを大幅に軽減できます。
この要素は、Googleが提唱する「Privacy Sandbox」イニシアチブの一部として開発されており、特にユーザーのプライバシーを保護しながら、パーソナライズされた広告表示やプライベートな測定といったウェブ機能を維持するための基盤となります。fencedframeを使用することで、ウェブ開発者は、埋め込みコンテンツが親サイトのユーザー識別情報にアクセスすることなく独立して動作し、必要な情報のみを用いて機能するように構築できます。これにより、ウェブのセキュリティとユーザーのプライバシー保護が強化され、より信頼性の高いウェブ体験の実現に貢献します。
構文(syntax)
1<fencedframe src="URL"></fencedframe>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
fencedframeでプライバシー保護されたコンテンツを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Fenced Frame Sample</title> 7</head> 8<body> 9 <!-- 10 fencedframeは、Webサイトのプライバシー保護を目的とした新しいHTMLフレーム要素です。 11 埋め込まれたコンテンツと親ページ間の通信を制限し、データ隔離を強化します。 12 これにより、広告や埋め込みコンテンツのトラッキング能力を制限しながら表示できます。 13 config属性には、表示するコンテンツのURLまたはURNを指定します。 14 このサンプルではダミーのURLを使用しており、実際のコンテンツは表示されません。 15 --> 16 <fencedframe config="https://example.com/privacy-protected-content.html" style="width: 600px; height: 400px; border: 1px solid blue;"></fencedframe> 17</body> 18</html>
HTMLのfencedframe要素は、Webサイトのプライバシー保護を目的とした新しいフレーム要素です。これはLiving Standardとして定義されており、現在開発中の機能です。
この要素の主な役割は、Webページに外部のコンテンツ（例えば広告など）を埋め込む際に、その埋め込まれたコンテンツと親ページとの間の情報通信を厳しく制限し、データが互いに共有されることを防ぐ点にあります。これにより、埋め込みコンテンツによるユーザーの行動追跡（トラッキング）の能力を制限し、ユーザーのプライバシー保護を強化することができます。
fencedframe要素には、表示したいコンテンツのURLまたはURNをconfig属性として指定します。この属性によって、どのコンテンツを隔離されたフレーム内に表示するかを設定します。リファレンス情報にある通り、この要素自体に直接的な引数や戻り値は定義されていません。
提供されたサンプルコードでは、fencedframe要素が使われています。config="https://example.com/privacy-protected-content.html"という形で、隔離されたフレーム内に表示するコンテンツのURLが指定されていますが、これはプライバシー保護の概念を説明するためのダミーのURLです。そのため、実際にこのコードを実行しても、指定されたコンテンツが表示されるわけではありません。代わりに、style属性で指定された幅や高さ、枠線を持つ、隔離された領域が作成される様子が示されています。
このようにfencedframeは、ユーザーのプライバシーを守りながらWebコンテンツを安全に統合するための、将来性のある技術です。
fencedframeは、Webサイトのプライバシー保護とデータ隔離を強化するために設計された新しいHTML要素です。従来のiframeとは異なり、親ページと埋め込みコンテンツ間の通信を厳しく制限する点が最大の特徴です。
サンプルコードのconfig属性には、表示したいコンテンツの有効なURLまたはURNを必ず指定する必要があります。例示されたURLはダミーのため、実際のコンテンツは表示されませんのでご注意ください。
この要素は比較的新しい技術であるため、すべてのブラウザで完全にサポートされているわけではありません。実運用で利用する際は、対象とするブラウザでの動作確認を事前にしっかり行うことが重要です。また、HTML5で廃止された古いframeタグとは全く異なる概念ですので、混同しないようにしてください。fencedframeは、主に広告などのプライバシー保護関連技術（プライバシーサンドボックス）で利用されることを理解しておきましょう。
Fenced Frame でコンテンツを読み込む
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Fenced Frame Sample</title> 7</head> 8<body> 9 <h1>Fenced Frame の基本例</h1> 10 11 <!-- fencedframe は、従来の iframe と異なり 'src' 属性でコンテンツソースを直接指定しません。 --> 12 <!-- 代わりに、コンテンツはプライバシー保護のために JavaScript API を通じて安全にロードされます。 --> 13 <fencedframe mode="opaque-ads" allow="browsing-topics;run-ad-auction" width="600" height="400"></fencedframe> 14</body> 15</html>
HTMLのfencedframe要素は、ウェブ上のプライバシー保護を強化するために導入された新しい要素です。この要素は、従来のiframe要素と同様に、別のHTMLコンテンツを現在のページ内に埋め込むことができますが、コンテンツのロード方法や親ページとの情報共有に大きな違いがあります。
fencedframe要素自体には、直接的な引数や戻り値は存在しません。これは、コンテンツのソースをiframeで使用されるsrc属性や、キーワードとして挙げられているframesrcといった属性で直接指定するのではなく、JavaScriptの専用APIを介して安全かつプライバシーに配慮した方法でコンテンツがロードされるためです。これにより、埋め込まれたコンテンツが親ページの情報にアクセスするのを制限し、ユーザーの追跡を防ぐことを目的としています。
サンプルコードでは、<fencedframe>タグが使用されています。mode="opaque-ads"属性は、このフレームが広告表示のために使用されることを示しており、allow="browsing-topics;run-ad-auction"属性は、プライバシー保護技術である「Privacy Sandbox」に関連する特定の機能の利用を許可しています。widthとheight属性は、フレームの表示サイズを指定するものです。fencedframeは、埋め込みコンテンツと親ページ間のデータ共有を最小限に抑えることで、よりセキュアなウェブ環境の実現に貢献する要素です。
fencedframe要素は、プライバシー保護を強化するために設計された新しいHTML要素です。最も重要な注意点は、従来のiframeとは異なり、コンテンツのソースを直接指定するsrc属性を持たない点です。これは、ブラウザがユーザーのプライバシーを守りながらコンテンツを安全にロードするため、JavaScriptの専用APIを介して動的にコンテンツが読み込まれるためです。キーワードのframesrcのように直接リソースを指定する方法とは根本的に異なります。主にプライバシーサンドボックスの文脈、特に広告表示などの特定のユースケースでの利用が想定されています。まだ実験的な側面が強く、一般的なウェブページでの利用は限られているため、実装の際は最新の情報を確認することが重要です。