Betten Sie Inhalte sicher auf einer Seite ein, ohne websiteübergreifende Daten freizugeben.
Implementierungsstatus
In diesem Dokument wird ein neues HTML-Element beschrieben: <fencedframe>
.
- Der Vorschlag Fenced Frames ist jetzt allgemein verfügbar.
- Status der Chrome-Plattform
Vorschlag | Status |
---|---|
Änderungen an der Web API für urn to config Erläuterung |
Im 1. Quartal 2023 in Chrome verfügbar. |
Creative-Makros in Fenced Frames for Ads Reporting (FFAR) GitHub-Problem |
Ab dem 3. Quartal 2023 in Chrome verfügbar. |
Automatische Beacons einmal senden GitHub-Problem |
Verfügbar im 3. Quartal 2023 in Chrome. |
Serialisierbare Fenced Frames-Konfigurationen GitHub-Problem |
Verfügbar im 3. Quartal 2023 in Chrome. |
Zusätzliche Formatoption für Makros für Anzeigengrößen für geschützte Zielgruppen GitHub-Problem |
Verfügbar im 4. Quartal 2023 in Chrome. |
Automatische Beacons, die an alle registrierten URLs senden GitHub-Problem | GitHub-Problem |
Verfügbar im 4. Quartal 2023 in Chrome. |
Verlassen von Anzeigeninteressengruppen aus Urn-iFrames und Frames von Anzeigenkomponenten aktivieren
GitHub-Problem |
Ab dem 1. Quartal 2024 in Chrome verfügbar |
Einführung von „reserviert.top_navigation_start/commit“
GitHub-Problem, GitHub-Problem |
Im 1. Quartal 2024 in Chrome verfügbar |
Cookie-Einstellung in ReportEvent erst nach 3PCD deaktivieren
GitHub-Problem |
Im 1. Quartal 2024 in Chrome verfügbar |
Unterstützung für automatische Beacons in plattformübergreifenden Subframes hinzufügen
GitHub-Problem |
Im 1. Quartal 2024 in Chrome verfügbar |
Cross-Origin-Subframes zulassen, reportEvent() -Beacons zu senden
GitHub-Problem |
Im 2. Quartal 2024 in Chrome verfügbar |
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.
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:
- Aus der TURTLEDOVE API-Familie (die die Grundlage für die Protected Audience API bilden, können Fencing Frames mit Conversion-Steigerung Analyse mit freigegebenem Speicher.
- Eine weitere Option besteht darin, Fenced Frames schreibgeschützt oder auf nicht partitionierte Speicherplatz.
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.
const frameConfig = await navigator.runAdAuction({ // ...auction configuration resolveToConfig: true });
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:
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
.
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.
- GitHub: Lesen Sie die Erläuterung. Fragen stellen und Diskussion.
- Support für Entwickler: Hier können Sie Fragen stellen und sich an Diskussionen zum Privacy Sandbox-Entwicklersupport Repository.