Diese Seite wurde von der Cloud Translation API übersetzt.

Fenced Frames – Übersicht

Sie können Inhalte sicher auf einer Seite einbetten, ohne websiteübergreifende Daten zu teilen.

Implementierungsstatus

In diesem Dokument wird ein neues HTML-Element erläutert: <fencedframe>.

Der Vorschlag Fenced Frames ist jetzt allgemein verfügbar.
Status der Chrome-Plattform

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

Wozu brauchen wir Fenced Frames?

Ein Fenced Frame (<fencedframe>) ist ein HTML-Element für eingebettete Inhalte, ähnlich wie ein iFrame. Im Gegensatz zu iFrames schränkt ein Fenced Frame die Kommunikation mit dem Einbettungskontext ein, sodass der Frame auf websiteübergreifende Daten zugreifen kann, ohne sie mit dem Einbettungskontext zu teilen. Für einige Privacy Sandbox APIs sind möglicherweise ausgewählte Dokumente erforderlich, die in einem Fence Frame gerendert werden.

Ebenso können selbst erhobene Daten im Einbettungskontext nicht für den Fenced Frame freigegeben werden.

Ein Beispiel: Mit news.example (dem Einbettungskontext) wird eine Anzeige von shoes.example in einen Fenced Frame eingebettet. news.example kann keine Daten aus der Anzeige shoes.example exfiltrieren und shoes.example kann keine selbst erhobenen Daten aus news.example abrufen.

Websiteübergreifenden Datenschutz mit Speicherpartitionierung erhöhen

Sie haben sich wahrscheinlich beim Surfen im Web schon einmal Produkte auf einer Website angesehen, die dann in einer Anzeige auf einer ganz anderen Website wieder auftauchen.

Heute wird diese Werbemethode hauptsächlich durch Tracking-Technologie erreicht, bei der Drittanbieter-Cookies verwendet werden, um Informationen websiteübergreifend zu teilen. Diese Technologie wird Chrome schrittweise einstellen und durch datenschutzfreundlichere Varianten ersetzen.

Chrome arbeitet derzeit an einer Speicherpartitionierung, bei der der Browserspeicher pro Website getrennt wird. Wenn derzeit ein iFrame von shoes.example in news.example eingebettet ist und dieser iFrame einen Wert im Speicher speichert, kann dieser Wert von der Website shoes.example gelesen werden. Wenn der Speicher partitioniert ist, teilen sich websiteübergreifende iFrames keinen Speicher mehr. Daher kann shoes.example nicht auf Informationen zugreifen, die vom iFrame gespeichert wurden. Wenn der iFrame über *.shoes.example bereitgestellt und in *.shoes.example eingebettet wird, wird der Browserspeicher freigegeben, da dies als same-site gilt.

Ein Vergleich des Zustands vor und nach der Speicherpartitionierung.

Die Speicherpartitionierung wird auf Standardspeicher-APIs angewendet, einschließlich LocalStorage, IndexedDB und Cookies. In einer partitionierten Welt gehen Datenlecks im eigenen Speicher erheblich zurück.

Mit websiteübergreifenden Daten arbeiten

Fenced Frames ist eine Privacy Sandbox-Funktion, die vorschlägt, dass Websites auf oberster Ebene Daten partitionieren sollten. Viele Privacy Sandbox-Vorschläge und APIs sind auf websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen ausgerichtet. Beispiel:

Die Protected Audience API ermöglicht eine datenschutzfreundliche Anzeigenbereitstellung interessenbezogener Werbung.
Freigegebener Speicher ermöglicht den Zugriff auf nicht partitionierte websiteübergreifende Daten in einer sicheren Umgebung.

Sehen wir uns an, wie Fenced Frames mit der Protected Audience API funktionieren könnte. Mit der Protected Audience API werden die Interessen eines Nutzers auf der Website eines Werbetreibenden in Interessengruppen zusammen mit Anzeigen registriert, die für den Nutzer von Interesse sein könnten. Dann werden die in den relevanten Interessengruppen registrierten Anzeigen auf einer separaten Website (dem sogenannten „Publisher“) versteigert und die erfolgreiche Anzeige wird in einem Fenced Frame angezeigt.

Wenn der Publisher die erfolgreiche Anzeige in einem iFrame ausblendet und das Skript das Attribut src des iFrames lesen kann, kann er aus der URL dieser Anzeige Informationen über die Interessen des Besuchers ableiten. Dies ist nicht datenschutzfreundlich.

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

Wie funktionieren Fenced Frames?

Fenced Frames verwenden das FencedFrameConfig-Objekt für die Navigation. Dieses Objekt kann von einer Protected Audience API-Auktion oder der URL-Auswahl des freigegebenen Speichers zurückgegeben werden. Dann wird das Konfigurationsobjekt als das Attribut config für das Fence-Frame-Element festgelegt. Im Gegensatz zu einem iFrame, bei dem dem src-Attribut eine URL oder eine intransparente URN zugewiesen ist. Das FencedFrameConfig-Objekt hat eine schreibgeschützte url-Eigenschaft. Da in den aktuellen Anwendungsfällen jedoch die tatsächliche URL der internen Ressource ausgeblendet sein muss, gibt dieses Attribut beim Lesen den String opaque zurück.

Ein Fenced Frame kann postMessage nicht verwenden, um mit seinem Einbettungscode zu kommunizieren. Für einen umzäunten Frame kann jedoch postMessage mit iFrames innerhalb des abgegrenzten Frames verwendet werden.

Fenced Frames werden auf andere Weise vom Publisher isoliert. Beispielsweise hat der Publisher keinen Zugriff auf das DOM in einem abgegrenzten Frame und der Fenced Frame kann nicht auf das DOM des Publishers zugreifen. Außerdem sind Attribute wie name, die auf einen beliebigen Wert festgelegt und vom Publisher beobachtet werden können, in Fence Frames nicht verfügbar.

Fenced Frames verhalten sich wie ein Browserkontext der obersten Ebene (z. B. ein Browsertab). Obwohl ein Fenced Frame in bestimmten Anwendungsfällen (z. B. opaque-ads) websiteübergreifende Daten enthalten kann (z. B. eine Protected Audience API-Interessengruppe), kann der Frame nicht auf nicht partitionierten Speicher oder Cookies zugreifen. Ein opaque-ads-Fenced Frame kann auf ein eindeutiges, Nonce-basiertes Cookie und eine Speicherpartition zugreifen.

Die Eigenschaften von Fenced Frames finden Sie in der Erklärung.

Was sind Fenced Frames im Vergleich zu iFrames?

Sie wissen nun, was Fenced Frames leisten und was nicht. Daher ist es sinnvoll, einen Vergleich mit vorhandenen iFrame-Funktionen vorzunehmen.

Funktion	`iframe`	`fencedframe`
Inhalte einbetten	Ja	Ja
Eingebettete Inhalte können auf das DOM zum eingebetteten Kontext zugreifen	Ja	Nein
Einbettungskontext kann auf eingebettete Inhalte-DOM 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 (je nach Anwendungsfall)

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

Ersetzen Fenced Frames iFrames?

Letztendlich ersetzen Fence Frames keine iFrames und müssen auch nicht verwendet werden. Fenced Frames sind privatere Frames für die Verwendung, wenn Daten aus verschiedenen Top-Level-Partitionen auf derselben Seite angezeigt werden müssen.

IFrames derselben Website (manchmal auch als nutzerfreundliche iFrames bezeichnet) gelten als vertrauenswürdiger Inhalt.

Fenced Frames verwenden

Fenced Frames funktionieren in Kombination mit anderen Privacy Sandbox APIs, um Dokumente aus verschiedenen Speicherpartitionen auf einer einzigen Seite anzuzeigen. Über potenzielle APIs wird derzeit diskutiert.

Derzeitige Kandidaten für diese Kombination sind:

Aus der TURTLEDOVE API-Familie, die die Grundlage der Protected Audience API ist, können Fence Frames mit der Messung der Conversion-Steigerung über freigegebenen Speicher funktionieren.
Eine weitere Option besteht darin, für Fenced Frames Lesezugriff zu gewähren oder auf nicht partitionierten Speicher zuzugreifen.

Weitere Informationen finden Sie in der Erläuterung zu Fenced Frames-Anwendungsfällen.

Beispiele

Um ein config-Objekt mit Fenced Frame zu erhalten, müssen Sie resolveToConfig: true an den Aufruf runAdAuction() der Protected Audience API oder den Aufruf selectURL() des freigegebenen Speichers übergeben. Wenn die Eigenschaft nicht hinzugefügt oder auf false gesetzt ist, 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 Auswahl der URL für freigegebenen Speicher abrufen

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Nachdem Sie die Konfiguration erhalten haben, können Sie sie dem config-Attribut eines Fence Frames zuweisen, um den Frame zu der durch die Konfiguration dargestellten Ressource zu bewegen. Ältere Versionen von Chrome unterstützen die Eigenschaft „resolveToConfig“ nicht. Du musst also trotzdem bestätigen, dass das Versprechen zu FencedFrameConfig aufgelöst wurde, bevor du Folgendes aufrufst:

Konfiguration auf das Fence-Frame-Attribut festlegen

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

Weitere Informationen finden Sie in den Erläuterungen zur Fenced Frame-Konfiguration und zur Fenced Frame-Konfiguration.

Header

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

Sec-Fetch-Dest: fencedframe

Der Server muss den Supports-Loading-Mode: fenced-frame-Antwortheader festlegen, damit ein Dokument in einem Fenced Frame geladen werden kann. Der Header muss auch für alle iFrames innerhalb eines umzäunten 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 erstellen, die mit Kontextdaten vom 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 fiktive Ereignis-ID als Kontext für den freigegebenen Speicher festgelegt. Aus dem Fenced Frame werden die Frame-Ereignisdaten übergeben.

Auf der Einbettungsseite können Sie Kontextdaten als Kontext für den freigegebenen 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 Fenced Frame können Sie Daten auf Ereignisebene aus dem Frame an das Shared Storage-Worklet übergeben (unabhängig von den Kontextdaten des obigen Einbettungsanbieters):

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 Einbettungsteilnehmers aus sharedStorage.context und die Daten auf Ereignisebene des Frames aus dem data-Objekt lesen und sie 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.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

Weitere Informationen zum Kontext des Einbettungsanbieters in einem Fence-Frame-Konfigurationsobjekt finden Sie in der Erklärung.

Fenced Frames ausprobieren

Verwenden Sie Chrome-Flags, um die Fenced Frame API unter chrome://flags/#enable-fenced-frames zu aktivieren.

Legen Sie in Chrome-Experimenten für das Flag namens „Fenced Frame-Element aktivieren“ auf „Enabled“ fest.

Das Dialogfeld enthält mehrere Auswahlmöglichkeiten. Wir empfehlen dringend, die Option *Aktivieren* auszuwählen. Dadurch kann Chrome automatisch auf eine neue Architektur aktualisiert werden, sobald sie verfügbar ist.

Die anderen Optionen Mit ShadowDOM aktiviert und Mit Mehrseitenarchitektur aktiviert bieten unterschiedliche Implementierungsstrategien, die nur für Browserentwickler relevant sind. Heute funktioniert Aktivieren genauso wie Mit ShadowDOM aktiviert. In Zukunft wird Aktivieren der Mit mehrseitigen Architektur aktivieren zugeordnet.

Funktionserkennung

So ermitteln Sie, ob Fence Frames definiert sind:

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

So ermitteln Sie, ob die Konfiguration für Fenced-Frames 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 und wird daher ab Chrome 97 unterstützt. Derzeit wird es von anderen Browsern nicht unterstützt.

Reagieren und Feedback geben

Fenced Frames werden derzeit aktiv diskutiert und können sich in Zukunft ändern. Wenn Sie diese API testen und Feedback haben, freuen wir uns darauf, sie zu hören.

GitHub Lesen Sie die Erklärung, stellen Sie Fragen und folgen Sie der Diskussion.
Entwicklersupport: Im Privacy Sandbox-Entwicklersupport-Repository kannst du Fragen stellen und an Diskussionen teilnehmen.