Signatur
Beschreibung
Die Eigenschaft browsingTopics des HTMLIFrameElement-Interfaces spiegelt das HTML-Attribut browsingtopics wider. Ist sie true, schickt der Browser beim Laden der iframe-Quelle die aktuell ausgewählten Themen des Nutzers im HTTP-Anfrage-Header Sec-Browsing-Topics mit. Das gehört zur Topics API aus Googles Privacy-Sandbox-Initiative. Sie sollte eine datenschutzfreundlichere Alternative zu Drittanbieter-Cookies für interessenbasierte Werbung werden.
Typischer Einsatz: Eine Werbe- oder Analyseplattform bindet ein iframe ein und will serverseitig schon bei der ersten Anfrage wissen, zu welchen Interessenkategorien der Nutzer gehört, zum Beispiel „Sport“ oder „Reisen“. Einen zusätzlichen JavaScript-Aufruf von document.browsingTopics() braucht es dafür nicht. Der Server kann den Header auswerten und mit dem Antwort-Header Observe-Browsing-Topics: ?1 festlegen, dass der aktuelle Seitenbesuch in die künftige Themenberechnung einfließt.
Wichtig ist der Zeitpunkt: Die Eigenschaft muss gesetzt sein, bevor src zugewiesen oder das iframe in das Dokument eingefügt wird. Sonst geht die erste Anfrage ohne Themen raus. Die Themen werden nur mitgeschickt, wenn die Permissions-Policy browsing-topics das erlaubt, der Nutzer die Funktion nicht abgeschaltet hat und die aufrufende Herkunft bei der Privacy Sandbox registriert ist.
Rückgabewert
true, wenn das Attribut browsingtopics gesetzt ist und die Themen mit der iframe-Anfrage mitgeschickt werden. Sonst false (Standard). Die Eigenschaft ist les- und schreibbar.Beispiele
Werbe-iframe mit Topics-Header erzeugen
const adFrame = document.createElement('iframe');
// Nur setzen, wenn der Browser die Eigenschaft kennt
if ('browsingTopics' in adFrame) {
adFrame.browsingTopics = true; // VOR src setzen!
}
adFrame.src = 'https://ads.example.com/banner';
adFrame.width = 300;
adFrame.height = 250;
document.body.append(adFrame);
console.log(adFrame.browsingTopics);
console.log(adFrame.hasAttribute('browsingtopics'));Zustand eines iframes aus dem HTML auslesen
// HTML: <iframe id="ad" src="https://ads.example.com/slot" browsingtopics></iframe>
const frame = document.getElementById('ad');
if (frame.browsingTopics) {
console.log('Topics werden mitgesendet an:', new URL(frame.src).origin);
} else {
console.log('Keine Topics für dieses iframe.');
}Topics abhängig von der Einwilligung aktivieren und wieder abschalten
const createAdFrame = (url, hasConsent) => {
const frame = document.createElement('iframe');
frame.browsingTopics = Boolean(hasConsent) && 'browsingTopics' in frame;
frame.src = url;
return frame;
};
const frame = createAdFrame('https://ads.example.com/slot', true);
document.body.append(frame);
// Einwilligung widerrufen: gilt erst für die nächste Navigation
frame.browsingTopics = false;
frame.src = frame.src; // neu laden, jetzt ohne Topics-Header
console.log(frame.browsingTopics);// Wichtig · Fallstricke
Veraltet und nicht standardisiert: Die Topics API gibt es nur in Chromium-Browsern (ab Chrome 115). Firefox und Safari unterstützen sie nicht und lehnen sie ab. Google hat angekündigt, die Privacy-Sandbox-APIs einschließlich Topics einzustellen. Für neue Projekte deshalb nicht verwenden. Wenn doch, immer vorher mit 'browsingTopics' in iframe prüfen, ob der Browser die Eigenschaft kennt.
- Zeitpunkt: Wer die Eigenschaft erst nach dem Start des Ladevorgangs ändert, beeinflusst die laufende Anfrage nicht mehr. Die Änderung gilt erst bei der nächsten Navigation des iframes.
- Permissions-Policy: Verbietet die einbettende Seite die Funktion, etwa mit
Permissions-Policy: browsing-topics=(), wird kein Header gesendet. Die Eigenschaft bleibt trotzdemtrue. - Kein Garant für Daten: Der Header kann leer sein, wenn der Nutzer Topics deaktiviert hat, im Inkognito-Modus surft oder die Herkunft nicht registriert ist.
- Datenschutz/DSGVO: Die Themen gelten als personenbezogene Profildaten. In der EU ist in der Regel vorher eine Einwilligung nötig.