Fenced Frames – Übersicht

Betten Sie Inhalte sicher auf einer Seite ein, ohne websiteübergreifende Daten freizugeben.

Implementierungsstatus

In diesem Dokument wird ein neues HTML-Element beschrieben: <fencedframe>.

Vorschlag Status
Web API-Änderungen für Urn in Konfiguration
Erläuterung		 Verfügbar in Chrome im 1. Quartal 2023.
Creative-Makros in Fenced Frames for Ads Reporting (FFAR)
GitHub-Problem		 Verfügbar in Chrome im 3. Quartal 2023.
Automatische Beacons einmal senden
GitHub-Problem		 Verfügbar in Chrome im 3. Quartal 2023.
Konfigurationen für Serialisierbare Fenced Frames
GitHub-Problem 		Verfügbar in Chrome im 3. Quartal 2023.
Zusätzliche Formatoption für Makros für die Protected Audience-Anzeigengröße
GitHub-Problem		 Verfügbar in Chrome im 4. Quartal 2023.
Automatische Beacons, die an alle registrierten URLs senden
GitHub-Problem | GitHub-Problem		 Verfügbar in Chrome im 4. Quartal 2023.
Verlassen von Interessengruppen aus Urn-iFrames und Anzeigenkomponenten-Frames aktivieren
GitHub-Problem		 Verfügbar in Chrome im 1. Quartal 2024
Einführung in „reserviert.top_navigation_start/commit“
GitHub-Problem, GitHub-Problem		 Verfügbar in Chrome im 1. Quartal 2024
Cookie-Einstellung in ReportEvent erst vor 3PCD deaktivieren
GitHub-Problem		 Verfügbar in Chrome im 1. Quartal 2024
Unterstützung für automatische Beacons in ursprungsübergreifenden Subframes hinzufügen
GitHub-Problem		 Verfügbar in Chrome im 1. Quartal 2024

Warum brauchen wir Fenced Frames?

Ein Fenced Frame (<fencedframe>) ist ein HTML-Element für eingebettete ähnlich wie iFrames. Im Gegensatz zu iFrames beschränkt ein Fenced Frame Kommunikation mit seinem Einbettungskontext, um dem Frame Zugriff auf websiteübergreifende ohne sie mit dem Einbettungskontext zu teilen. Einige Privacy Sandbox APIs erfordert möglicherweise, dass ausgewählte Dokumente in einem abgegrenzten Frame gerendert werden.

Selbst erhobene Daten im Einbettungskontext dürfen nicht mit Fenced-Frame an.

Beispiel: news.example (der Einbettungskontext) bettet eine Anzeige aus shoes.example in einem abgegrenzten Frame. news.example kann keine Daten exfiltrieren aus der Anzeige „shoes.example“ und shoes.example kann keine selbst erhobenen Daten von news.example

Mit Speicherpartitionierung den websiteübergreifenden Datenschutz verbessern

Beim Surfen im Web haben Sie sich wahrscheinlich schon einmal Produkte auf einer Website angesehen wenn sie wieder in einer Anzeige auf einer völlig anderen Website erscheinen.

Heutzutage wird diese Werbetechnik hauptsächlich durch Tracking Technologie, die Drittanbieter-Cookies verwendet, um Informationen über mehrere Websites hinweg zu teilen. Dieses ist eine Technologie, die Chrome schrittweise aus und durch datenschutzfreundlichere Varianten ersetzen.

Chrome arbeitet mit Speicherplatz Partitionierung, die trennt den Browserspeicher pro Website. Wenn derzeit ein iFrame von shoes.example ist in news.example eingebettet und der iFrame speichert einen Wert, kann dieser Wert von der Website shoes.example gelesen werden. Wenn der Speicherplatz partitionierte, websiteübergreifende iFrames keinen Speicherplatz mehr teilen. shoes.example kann nicht auf Informationen zugreifen, die im iFrame gespeichert sind. Wenn Der iFrame wird von *.shoes.example bereitgestellt und eingebettet in *.shoes.example, der Browserspeicher wird gemeinsam genutzt, da diese als gleiche Website gelten.

Vergleich des Vorher-Nachher-Status der Speicherpartitionierung.

Die Speicherpartitionierung wird auf Standard-Speicher-APIs angewendet, einschließlich LocalStorage, IndexedDB und Cookies. In einer partitionierten Welt sind Informationen werden Datenpannen im Speicher für selbst erhobene Daten deutlich reduziert.

Mit websiteübergreifenden Daten arbeiten

Fenced Frames ist eine Privacy Sandbox-Funktion. was vorschlägt, dass Websites auf oberster Ebene Daten partitionieren sollten. Viele Privacy Sandbox Angebote und APIs darauf ausgerichtet, standortübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Mechanismen zur Nachverfolgung. Beispiel:

  • Die Protected Audience API ermöglicht die interessenbezogene Anzeigenbereitstellung auf datenschutzfreundliche Weise.
  • Gemeinsam genutzter Speicher ermöglicht Zugriff auf nicht partitionierte websiteübergreifende Daten in einer sicheren Umgebung.

Sehen wir uns an, wie Fenced Frames Protected Audience API: Mit der Protected Audience API können die Interessen auf der Website eines Werbetreibenden registriert sind, wenn er sowie Anzeigen, die von Interesse für den Nutzer sein. Auf einer separaten Website (sogenannte „Publisher“), werden die in den relevanten Interessengruppen registrierten Anzeigen versteigert und Die erfolgreiche Anzeige wird in einem abgegrenzten Frame angezeigt.

Wenn der Publisher die erfolgreiche Anzeige in einem iFrame schaltet und das Skript die src-Attribut des iFrames verwenden, kann der Publisher Informationen über Interessen aus der URL dieser Anzeige. Dies ist nicht datenschutzfreundlich.

Mit einem Fenced Frame könnte der Publisher eine Anzeige schalten, die dem Besucher Interessen, aber die src und die Interessengruppe sind nur dem Werbetreibenden bekannt im Frame. Der Verlag oder Webpublisher konnte nicht auf diese Informationen zugreifen.

Wie funktionieren Fenced Frames?

Bei abgegrenzten Frames wird zur Navigation das Objekt FencedFrameConfig verwendet. Dieses Objekt kann über eine Protected Audience API-Auktion oder über die URL-Auswahl von freigegebenem Speicher zurückgegeben werden. Dann wird das Konfigurationsobjekt als config-Attribut für das Fence-Frame-Element festgelegt. Dies unterscheidet sich von einem iFrame, in dem dem Attribut src eine URL oder eine intransparente URN zugewiesen ist. Das FencedFrameConfig-Objekt hat ein schreibgeschütztes url-Attribut. Da in den aktuellen Anwendungsfällen jedoch die tatsächliche URL der internen Ressource ausgeblendet sein muss, gibt diese Property beim Lesen den String opaque zurück.

Ein Fenced Frame kann nicht über postMessage mit seinem Einbettungscode kommunizieren. Für einen Fenced Frame kann jedoch postMessage mit iFrames innerhalb des Fenced Frames verwendet werden.

Fenced Frames werden auf andere Weise vom Publisher isoliert. Zum Beispiel hat der Publisher keinen Zugriff auf das DOM innerhalb eines Fenced Frames und das Fenced Frame kann nicht auf das DOM des Publishers zugreifen. Außerdem können Attribute wie name, der auf einen beliebigen Wert gesetzt werden kann und von dem nicht in Fenced Frames verfügbar sind.

Fenced Frames verhalten sich wie ein Browser auf oberster Ebene Kontext (z. B. ein Browsertab). Obwohl ein Fenced-Frame in bestimmten Anwendungsfällen (z. B. opaque-ads) kann websiteübergreifende Daten enthalten, z. B. ein Interesse an der Protected Audience API. Gruppe), kann der Frame nicht auf nicht partitionierten Speicher oder Cookies zugreifen. Eine opaque-ads Fenced Frame kann auf ein eindeutiges, Nonce-basiertes Cookie und Speicherelement zugreifen -Partition an.

Die Eigenschaften von Fenced Frames werden in den Erklärung.

Wie unterscheiden sich Fenced Frames von iFrames?

Jetzt, da Sie wissen, was Fenced Frames bewirken und was nicht, ist es hilfreich, zu vorhandenen iFrame-Funktionen.

Funktion iframe fencedframe
Inhalte einbetten Ja Ja
Eingebetteter Inhalt kann auf DOM für Einbettungskontext zugreifen Ja Nein
Der Einbettungskontext kann auf das DOM für eingebettete Inhalte zugreifen Ja Nein
Beobachtbare Attribute wie name Ja Nein
URLs (http://example.com) Ja Ja (abhängig vom Anwendungsfall)
Vom Browser verwaltete intransparente Quelle (urn:uuid) Nein Ja
Zugriff auf websiteübergreifende Daten Nein Ja (abhängig vom Anwendungsfall)

Fenced Frames unterstützen weniger externe Kommunikationsoptionen, um die Privatsphäre zu schützen.

Werden iFrames durch Fenced Frames ersetzt?

Fenced Frames ersetzen iFrames letztendlich nicht und Sie müssen sie auch nicht verwenden. Fenced Frames sind ein privaterer Frame für die Nutzung, wenn Daten aus Es müssen verschiedene Partitionen der obersten Ebene auf derselben Seite angezeigt werden.

SameSite-iFrames, manchmal auch als nutzerfreundliche iFrames bezeichnet, gelten als vertrauenswürdig Inhalte.

Fenced Frames verwenden

Fenced Frames funktionieren in Kombination mit anderen Privacy Sandbox APIs, um Dokumente aus verschiedenen Speicherpartitionen auf einer einzigen Seite anzuzeigen. Derzeit wird über mögliche APIs diskutiert.

Diese Kombination kommt derzeit infrage:

Weitere Informationen finden Sie unter Fenced Frames (Fenced Frames) Anwendungsfälle.

Beispiele

Um ein config-Objekt für Fenced-Frames zu erhalten, müssen Sie resolveToConfig: true an den runAdAuction()-Aufruf der Protected Audience API oder an den selectURL()-Aufruf des freigegebenen Speichers übergeben. Wenn die Property nicht hinzugefügt oder auf false festgelegt wird, wird das resultierende Promise in eine URN aufgelöst, die nur in einem iFrame verwendet werden kann.

Fenced-Frame-Konfiguration aus der Protected Audience API-Auktion abrufen
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
Fenced Frame-Konfiguration aus der URL-Auswahl des freigegebenen Speichers abrufen
const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Nachdem Sie die Konfiguration abgerufen haben, können Sie sie dem Attribut config eines Fenced Frames zuweisen, um den Frame zu der durch die Konfiguration dargestellten Ressource zu navigieren. Ältere Versionen von Chrome unterstützen die resolveToConfig-Eigenschaft nicht. Sie müssen also trotzdem bestätigen, dass das Versprechen in FencedFrameConfig aufgelöst wurde, bevor Sie navigieren:

Konfiguration auf Attribut für Fenced-Frame festlegen
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Weitere Informationen finden Sie in den Erläuterungen zu Fenced Frame und Fenced Frame Configuration.

Header

Browser legen Sec-Fetch-Dest: fencedframe für Anfragen von Fenced Frames und iFrames fest, die in einem Fencing Frame eingebettet sind.

Sec-Fetch-Dest: fencedframe

Der Server muss den Supports-Loading-Mode: fenced-frame-Antwortheader festlegen, damit ein Dokument in einem Fencing Frame geladen wird. Der Header muss auch für alle iFrames innerhalb eines Fenced Frames vorhanden sein.

Supports-Loading-Mode: fenced-frame

Kontext des freigegebenen Speichers

Sie können die private Aggregation verwenden, um Daten auf Ereignisebene in Fenced Frames zu melden, die mit Kontextdaten aus dem Einbettungscode verknüpft sind. Mit der Methode fencedFrameConfig.setSharedStorageContext() können Sie einige Kontextdaten wie eine Ereignis-ID vom Einbettungscode an Worklets für freigegebenen Speicher übergeben, die von der Protected Audience API initiiert wurden.

Im folgenden Beispiel speichern wir einige Daten, die auf der Einbettungsseite verfügbar sind, und einige Daten, die im Fenced Frame im freigegebenen Speicher verfügbar sind. Auf der Einbettungsseite wird eine simulierte Ereignis-ID als Kontext für gemeinsamen Speicher festgelegt. Vom Fencing Frame werden die Frame-Ereignisdaten übergeben.

Auf der Einbettungsseite können Sie Kontextdaten als Kontext für gemeinsamen Speicher festlegen:

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;

Über den Fencing Frame können Sie Daten auf Ereignisebene aus dem Frame an das Shared Storage-Worklet übergeben (unabhängig von den Kontextdaten aus dem obigen Einbettungscode):

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
  },
});

Sie können die Kontextinformationen des Einbettungselements aus sharedStorage.context und die Daten auf Ereignisebene des Frames aus dem data-Objekt lesen und dann über die private Aggregation melden:

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);

Weitere Informationen zum Kontext des Einbettungselements in einem Fenced-Frame-Konfigurationsobjekt finden Sie in der Erläuterung.

Fenced Frames ausprobieren

Chrome verwenden Flags zu Aktivieren Sie die Fenced Frame API unter chrome://flags/#enable-fenced-frames.

Legen Sie in Chrome Experiments das Flag namens „Fenced Frame-Element aktivieren“ auf „Aktiviert“ fest.

Im Dialogfeld stehen mehrere Optionen zur Auswahl. Wir empfehlen dringend, *Aktivieren*: Chrome wird automatisch auf die neue Architektur aktualisiert. sobald sie verfügbar sind.

Die anderen Optionen Enabled with ShadowDOM und Enabled with multiple Seitenarchitektur, bieten verschiedene Implementierungsstrategien, die für Browserentwickler relevant sind. Derzeit funktioniert Aktivieren genauso wie Aktiviert mit ShadowDOM. Zukünftig wird Aktivieren der Option Aktivieren mit mehrseitige Architektur.

Funktionserkennung

So ermitteln Sie, ob Fenced Frames definiert sind:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

So ermitteln Sie, ob die Fenced-Frame-Konfiguration verfügbar ist: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

Unterstützte Browser

Das <fencedframe>-Element befindet sich noch im experimentellen Modus, daher befindet es sich derzeit ab Chrome 97 unterstützt. Derzeit wird es nicht von anderen Browser.

Interagieren und Feedback geben

Umgezäunte Frames werden derzeit diskutiert. Änderungen vorbehalten. in die Zukunft zu führen. Wir würden uns freuen, wenn Sie diese API ausprobieren und uns Feedback geben.

Weitere Informationen