Fenced Frames – Übersicht

Inhalte sicher auf einer Seite einbetten, ohne websiteübergreifende Daten weiterzugeben

Implementierungsstatus

• Wird eingestellt
• Intent to Ship: Remove FencedFrame element and window.fence APIs
• Chrome Platform Status

Warum brauchen wir Fenced Frames?

Ein Fenced Frame (<fencedframe>) ist ein HTML-Element für eingebettete Inhalte, ähnlich einem iFrame. Im Gegensatz zu iFrames beschränkt ein Fenced Frame die Kommunikation mit dem Einbettungskontext, um dem Frame Zugriff auf websiteübergreifende Daten zu ermöglichen, ohne sie mit dem Einbettungskontext zu teilen. Für einige Privacy Sandbox-APIs müssen bestimmte Dokumente in einem Fenced Frame gerendert werden.

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

Wenn beispielsweise news.example (der Einbettungskontext) eine Anzeige von shoes.example in einen Fenced Frame einbettet, kann news.example keine Daten aus der Anzeige von shoes.example extrahieren und shoes.example kann keine selbst erhobenen Daten von news.example abrufen.

Websiteübergreifenden Datenschutz durch Speicherpartitionierung verbessern

Beim Surfen im Web haben Sie sich wahrscheinlich Produkte auf einer Website angesehen und sie dann in einer Anzeige auf einer völlig anderen Website wiedergefunden.

Diese Werbetechnik wird heute hauptsächlich durch Tracking-Technologien erreicht, die Drittanbieter-Cookies verwenden, um Informationen zwischen Websites auszutauschen.

Chrome arbeitet an der Speicher partitionierung, bei der der Browser-Speicher pro Website getrennt wird. Ohne Partitionierung kann ein Wert, der von einem iFrame von shoes.example, das in news.example eingebettet ist, im Speicher abgelegt wird, von der Website shoes.example gelesen werden. Wenn der Speicher partitioniert wurde, geben websiteübergreifende iFrames keinen Speicher mehr frei. Daher kann shoes.example nicht auf die vom iFrame gespeicherten Informationen zugreifen. Wenn das iFrame von *.shoes.example bereitgestellt und in *.shoes.example eingebettet wird, wird der Browserspeicher freigegeben, da diese als dieselbe Website betrachtet werden.

Die Speicherpartitionierung wird auf Standard-Storage-APIs angewendet, einschließlich LocalStorage, IndexedDB und Cookies. In einer partitionierten Welt wird die Weitergabe von Informationen über den selbst erhobenen Speicher hinweg erheblich reduziert.

Mit websiteübergreifenden Daten arbeiten

Fenced Frames sind eine Privacy Sandbox-Funktion die vorschlägt, dass Websites der obersten Ebene Daten partitionieren sollten. Viele Privacy Sandbox-Vorschläge und ‑APIs zielen darauf ab, websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen zu erfüllen. Beispiel:

• Die Protected Audience API ermöglicht die interessenbasierte Anzeigenauslieferung auf datenschutzfreundliche Weise.
• Shared Storage ermöglicht den Zugriff auf nicht partitionierte websiteübergreifende Daten in einer sicheren Umgebung.

Fenced Frames sind für die Verwendung mit der Protected Audience API konzipiert. Mit der Protected Audience API werden die Interessen eines Nutzers auf der Website eines Werbetreibenden in Interessengruppenregistriert, zusammen mit Anzeigen, die für den Nutzer von Interesse sein könnten. Auf einer separaten Website (einem Publisher) werden dann die in relevanten Interessengruppen registrierten Anzeigen versteigert und die Gewinneranzeige in einem Fenced Frame präsentiert.

Wenn der Publisher die Gewinneranzeige in einem iFrame präsentiert und das Skript das src-Attribut des iFrames lesen kann, kann der Publisher aus der URL der Anzeige Informationen zu den Interessen des Besuchers ableiten. Das ist nicht datenschutzfreundlich.

Mit einem Fenced Frame kann der Publisher eine Anzeige präsentieren, die den Interessen des Besuchers entspricht. Die src und die Interessengruppe sind jedoch nur dem Werbetreibenden im Frame bekannt. Der Publisher kann nicht auf diese Informationen zugreifen.

Wie funktionieren Fenced Frames?

Fenced Frames verwenden das FencedFrameConfig-Objekt für die Navigation. Dieses Objekt kann aus einer Protected Audience API-Auktion oder der URL-Auswahloperation von Shared Storage zurückgegeben werden. Das Konfigurationsobjekt wird dann als config-Attribut für das Fenced Frame-Element festgelegt. Das unterscheidet sich von einem iFrame, bei dem dem src Attribut eine URL oder ein undurchsichtiger URN zugewiesen wird. Das FencedFrameConfig-Objekt hat eine schreibgeschützte url-Property. Da die aktuellen Anwendungsfälle jedoch erfordern, dass die tatsächliche URL der internen Ressource verborgen ist, gibt diese Property beim Lesen die String opaque zurück.

Ein Fenced Frame kann nicht mit postMessage mit seinem Einbettungselement kommunizieren. Ein Fenced Frame kann postMessage jedoch mit iFrames innerhalb des Fenced Frame verwenden.

Fenced Frames werden auch auf andere Weise vom Publisher isoliert. Der Publisher hat beispielsweise keinen Zugriff auf das DOM innerhalb eines Fenced 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 Fenced Frames nicht verfügbar.

Fenced Frames verhalten sich wie ein Browsing-Kontext der obersten Ebene (z. B. ein Browser-Tab). Obwohl ein Fenced Frame in bestimmten Anwendungsfällen (z. B. interessenbasierte Retargeting-Anzeigen) websiteübergreifende Daten (z. B. eine Protected Audience API-Interessengruppe) enthalten kann, kann der Frame nicht auf nicht partitionierten Speicher oder Cookies zugreifen. Der Fenced Frame kann auf eine eindeutige, noncebasierte Cookie- und Speicherpartition zugreifen.

Die Eigenschaften von Fenced Frames werden im Explainer weiter beschrieben.

Wie unterscheiden sich Fenced Frames von iFrames?

Nachdem Sie nun wissen, was Fenced Frames können und was nicht, ist es hilfreich, sie mit vorhandenen iFrame-Funktionen zu vergleichen.

Fenced Frames unterstützen weniger externe Kommunikationsoptionen, um den Datenschutz zu gewährleisten.

Werden Fenced Frames iFrames ersetzen?

Letztendlich werden Fenced Frames iFrames nicht ersetzen und Sie müssen sie nicht verwenden. Fenced Frames sind ein datenschutzfreundlicherer Frame für die Verwendung, wenn Daten aus verschiedenen Partitionen der obersten Ebene auf derselben Seite präsentiert werden müssen.

iFrames derselben Website (manchmal auch als „freundliche iFrames“ bezeichnet) gelten als vertrauenswürdige Inhalte.

Fenced Frames verwenden

Fenced Frames funktionieren in Kombination mit anderen Privacy Sandbox-APIs, um Dokumente aus verschiedenen Speicherpartitionen auf einer einzigen Seite zu präsentieren. Mögliche APIs werden derzeit diskutiert.

Zu den aktuellen Kandidaten für diese Kombination gehören:

• Aus der TURTLEDOVE API-Familie (die die Grundlage für die Protected Audience API bildet) könnten Fenced Frames mit der Conversion-Steigerung -Messung mithilfe von Shared Storage funktionieren.
• Eine weitere Option besteht darin, Fenced Frames schreibgeschützt zu machen oder den Zugriff auf nicht partitionierten Speicherzu ermöglichen.

Weitere Informationen finden Sie im Explainer zu Anwendungsfällen für Fenced Frames.

Beispiele

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

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

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

Sobald Sie die Konfiguration erhalten haben, können Sie sie dem config-Attribut eines Fenced Frame zuweisen, um den Frame zur Ressource zu navigieren, die durch die Konfiguration dargestellt wird. Ältere Chrome-Versionen unterstützen die Property resolveToConfig nicht. Sie müssen daher weiterhin bestätigen, dass das Promise in eine FencedFrameConfig aufgelöst wurde, bevor Sie navigieren:

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

Weitere Informationen finden Sie in den Explainern zu Fenced Frames und zur Fenced Frame-Konfiguration.

Header

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

Sec-Fetch-Dest: fencedframe

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

Supports-Loading-Mode: fenced-frame

Shared Storage-Kontext

Sie können die Private Aggregation verwenden, um Daten auf Ereignisebene in Fenced Frames zu melden, die mit Kontextdaten des Einbettungselements verknüpft sind. Mit der Methode fencedFrameConfig.setSharedStorageContext() können Sie einige Kontextdaten wie eine Ereignis-ID vom Einbettungselement an Shared Storage-Worklets übergeben, die von der Protected Audience API initiiert wurden.

Im folgenden Beispiel speichern wir einige Daten, die auf der Seite des Einbettungselements verfügbar sind, und einige Daten, die im Fenced Frame verfügbar sind, in Shared Storage. Auf der Seite des Einbettungselements wird eine Mock-Ereignis-ID als Shared Storage-Kontext festgelegt. Aus dem Fenced Frame werden die Ereignisdaten des Frames übergeben.

Auf der Seite des Einbettungselements können Sie Kontextdaten als Shared Storage-Kontext 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;

Aus dem Fenced Frame können Sie Daten auf Ereignisebene aus dem Frame an das Shared Storage-Worklet übergeben (unabhängig von den Kontextdaten des Einbettungselements oben):

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 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.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

Weitere Informationen zum Kontext des Einbettungselements in einem Fenced Frame-Konfigurationsobjekt finden Sie im Explainer.

Fenced Frames ausprobieren

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

Im Dialogfeld gibt es mehrere Optionen. Wir empfehlen dringend, *Aktivieren* auszuwählen. So kann Chrome automatisch auf die neue Architektur aktualisiert werden, sobald sie verfügbar ist.

Die anderen Optionen, Mit ShadowDOM aktiviert und Mit Architektur mit mehreren Seiten aktiviert, bieten verschiedene Implementierungsstrategien, die nur für Browserentwickler relevant sind. Derzeit funktioniert Aktivieren genauso wie Mit ShadowDOM aktiviert. In Zukunft wird Aktivieren Mit Architektur mit mehreren Seiten aktivieren zugeordnet.

Funktionserkennung

So prüfen Sie, ob Fenced Frames definiert sind:

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

So prüfen Sie, ob die Fenced Frame-Konfiguration verfügbar ist:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Unterstützte Browser

• MDN
• Chrome Platform Status

Mitmachen und Feedback geben

Fenced Frames werden aktiv diskutiert und können sich in Zukunft ändern. Wenn Sie diese API ausprobieren und Feedback haben, freuen wir uns darauf.

• GitHub: Lesen Sie den Explainer, stellen Sie Fragen und verfolgen Sie die Diskussion.

Weitere Informationen

• Chrome Platform Status
• Blink Intent to Prototype