Fenced Frames – Übersicht

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

Implementierungsstatus

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

• Allgemein in Chrome verfügbar
• Status der Chrome-Plattform

Warum benötigen wir Fenced Frames?

Ein Fenced Frame (<fencedframe>) ist ein HTML-Element für eingebettete Inhalte, ähnlich wie ein iFrame. Im Gegensatz zu iFrames wird bei einem Fenced Frame die Kommunikation mit dem Einbettungskontext eingeschränkt, damit der Frame auf websiteübergreifende Daten zugreifen kann, ohne sie mit dem Einbettungskontext zu teilen. Für einige Privacy Sandbox-APIs müssen bestimmte Dokumente in einem Fenced Frame gerendert werden.

Ebenso dürfen keine selbst erhobenen Daten im Einbettungskontext mit dem Fenced Frame geteilt werden.

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

Websiteübergreifenden Datenschutz durch Speicherpartitionierung verbessern

Wenn Sie im Internet surfen, haben Sie sich wahrscheinlich schon einmal Produkte auf einer Website angesehen und sie dann in einer Anzeige auf einer ganz anderen Website wiedergefunden.

Heute wird diese Werbetechnik hauptsächlich durch Tracking-Technologien erreicht, bei denen Drittanbieter-Cookies verwendet werden, um Informationen zwischen Websites auszutauschen.

Chrome arbeitet an der Speicherpartitionierung, bei der der Browserspeicher pro Website getrennt wird. Wenn keine Partitionierung erfolgt, kann ein Wert, der in einem Iframe von shoes.example auf news.example gespeichert wird, von der Website shoes.example gelesen werden. Wenn der Speicher partitioniert wurde, wird er nicht mehr von iFrames auf verschiedenen Websites gemeinsam genutzt. Daher kann shoes.example nicht mehr auf Informationen zugreifen, die vom iFrame gespeichert wurden. Wenn der iFrame von *.shoes.example bereitgestellt und auf *.shoes.example eingebettet wird, wird der Browserspeicher freigegeben, da diese als Same-Site betrachtet werden.

Die Speicherpartitionierung wird auf Standard-Speicher-APIs angewendet, darunter LocalStorage, IndexedDB und Cookies. In einer partitionierten Welt wird das Weitergeben von Informationen über den Speicher von selbst erhobenen Daten hinweg deutlich 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 Trackingverfahren zu ermöglichen. Beispiel:

• Die Protected Audience API ermöglicht die datenschutzfreundliche Auslieferung interessenbezogener Anzeigen.
• 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 Interessengruppen registriert, zusammen mit Anzeigen, die für den Nutzer von Interesse sein könnten. Anschließend werden die in relevanten Interessengruppen registrierten Anzeigen auf einer separaten Website (einem „Publisher“) versteigert und die Gewinneranzeige wird in einem geschützten Frame präsentiert.

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

Mit einem eingezäunten 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 konnte nicht auf diese Informationen zugreifen.

Wie funktionieren Fenced Frames?

Für die Navigation in Fenced Frames wird das FencedFrameConfig-Objekt verwendet. Dieses Objekt kann von einer Protected Audience API-Auktion oder vom URL-Auswahlvorgang von Shared Storage zurückgegeben werden. Das Konfigurationsobjekt wird dann als config-Attribut für das Fenced Frame-Element festgelegt. Dies unterscheidet sich von einem iFrame, bei dem dem Attribut src eine URL oder ein undurchsichtiger URN zugewiesen wird. Das FencedFrameConfig-Objekt hat ein schreibgeschütztes url-Attribut. Da in den aktuellen Anwendungsfällen jedoch die tatsächliche URL der internen Ressource verborgen werden muss, wird beim Lesen dieses Attributs der String opaque zurückgegeben.

Ein Fenced Frame kann postMessage nicht verwenden, um mit dem Einbettungs-Element zu kommunizieren. In einem umzäunten Frame kann jedoch postMessage mit Iframes innerhalb des umzäunten Frames verwendet werden.

Fenced Frames werden auf andere Weise vom Publisher isoliert. Der Publisher hat beispielsweise keinen Zugriff auf das DOM in einem 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. bei interessenbezogenen Retargeting-Anzeigen) websiteübergreifende Daten (z. B. eine Interessengruppe der Protected Audience API) enthalten kann, kann über den Frame nicht auf nicht partitionierten Speicher oder Cookies zugegriffen werden. Der eingezäunte Frame kann auf ein eindeutiges, noncebasiertes Cookie und eine eindeutige Speicherpartition zugreifen.

Die Eigenschaften von Fenced Frames werden in der Erläuterung genauer beschrieben.

Wie unterscheiden sich Fenced Frames von iFrames?

Nachdem Sie nun wissen, was mit Fenced Frames möglich ist und was nicht, ist es sinnvoll, sie mit vorhandenen iFrame-Funktionen zu vergleichen.

Fenced Frames unterstützen weniger externe Kommunikationsoptionen, um den Datenschutz zu wahren.

Werden iframes durch Fenced Frames ersetzt?

Letztendlich werden Fenced Frames keine iFrames ersetzen und Sie müssen sie nicht verwenden. Fenced Frames sind ein privaterer Frame, der verwendet wird, wenn Daten aus verschiedenen Partitionen auf oberster Ebene auf derselben Seite angezeigt werden müssen.

Same-Site-iFrames (auch als „Friendly 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 darzustellen. Mögliche APIs werden derzeit diskutiert.

Aktuelle Kandidaten für diese Kombination sind:

• Aus der TURTLEDOVE API-Familie (die die Grundlage für die Protected Audience API bildet) könnten Fenced Frames mit Conversion Lift Measurement mit Shared Storage funktionieren.
• Eine weitere Option besteht darin, Fenced Frames als schreibgeschützt zuzulassen oder auf nicht partitionierten Speicher zuzugreifen.

Weitere Informationen finden Sie in der Erklärung zu Anwendungsfällen für Fenced Frames.

Beispiele

Um ein config-Objekt für einen umzäunten 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 Eigenschaft nicht hinzugefügt wird (oder auf false festgelegt ist), wird das resultierende Promise in eine URN aufgelöst, die 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 umzäunten Frames zuweisen, um den Frame zur Ressource zu navigieren, die durch die Konfiguration dargestellt wird. Ältere Versionen von Chrome unterstützen die resolveToConfig-Eigenschaft nicht. Sie müssen daher weiterhin bestätigen, dass das Promise zu einem FencedFrameConfig aufgelöst wurde, bevor Sie die Navigation ausführen:

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 config.

Header

Browser legen Sec-Fetch-Dest: fencedframe für Anfragen fest, die aus Fenced Frames und iFrames stammen, 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 umzäunten 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

Möglicherweise möchten Sie Private Aggregation verwenden, um Daten auf Ereignisebene in Fenced Frames zu melden, die mit Kontextdaten des Einbettungsprogramms verknüpft sind. Mit der Methode fencedFrameConfig.setSharedStorageContext() können Sie einige Kontextdaten, z. B. eine Ereignis-ID, vom Einbettungsprogramm an Shared Storage-Worklets übergeben, die von der Protected Audience API initiiert werden.

Im folgenden Beispiel speichern wir einige Daten, die auf der Einbettungsseite verfügbar sind, und einige Daten, die im eingezäunten Frame verfügbar sind, im freigegebenen Speicher. Auf der Einbettungsseite wird eine Mock-Ereignis-ID als Kontext für den freigegebenen Speicher festgelegt. Die Frame-Ereignisdaten werden aus dem eingezäunten Frame übergeben.

Auf der Seite des Einbettungstags 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;

Aus dem eingezäunten Frame können Sie Daten auf Ereignisebene aus dem Frame in 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 Einbettungs-Elements aus sharedStorage.context und die Daten auf Ereignisebene des Frames aus dem Objekt data 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 Einbettungsprogramms in einem Konfigurationsobjekt für einen umzäunten Frame finden Sie in der Erläuterung.

Fenced Frames ausprobieren

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

Im Dialogfeld stehen mehrere Optionen zur Auswahl. Wir empfehlen dringend, *Aktivieren* auszuwählen, damit Chrome automatisch auf die neue Architektur aktualisiert wird, 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. Heute funktioniert Aktivieren genauso wie Mit ShadowDOM aktiviert. Künftig wird Aktivieren der Option Mit Architektur mit mehreren Seiten aktivieren zugeordnet.

Funktionserkennung

So stellen Sie fest, ob Fenced Frames definiert sind:

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

So prüfen Sie, ob die Konfiguration für den eingeschränkten Frame verfügbar ist:

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

Unterstützte Browser

• MDN
• Status der Chrome-Plattform

Feedback geben

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

• GitHub: Erklärung lesen, Fragen stellen und Diskussionen verfolgen.

Weitere Informationen

• Status der Chrome-Plattform
• Blink-Absicht für Prototyp