Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<fencedframe> HTML fenced frame-Element

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das <fencedframe> HTML-Element repräsentiert einen verschachtelten Browsing-Kontext und bettet eine andere HTML-Seite in die aktuelle ein. <fencedframe>s sind sehr ähnlich zu <iframe>-Elementen in Form und Funktion, außer dass:

  • Die Kommunikation zwischen dem <fencedframe>-Inhalt und seiner einbettenden Seite eingeschränkt ist.
  • Ein <fencedframe> kann auf cross-site Daten zugreifen, jedoch nur unter sehr spezifischen kontrollierten Umständen, die die Privatsphäre der Benutzer wahren.
  • Ein <fencedframe> kann nicht durch reguläres Scripting manipuliert werden oder auf dessen Daten zugegriffen werden (zum Beispiel das Lesen oder Setzen der Quell-URL). <fencedframe>-Inhalte können nur über spezifische APIs eingebettet werden.
  • Ein <fencedframe> kann nicht auf den DOM des einbettenden Kontexts zugreifen, noch kann der einbettende Kontext auf das DOM des <fencedframe> zugreifen.

Das <fencedframe>-Element ist eine Art von <iframe> mit stärker integrierten Datenschutzfunktionen. Es behebt die Mängel von <iframe>s, wie die Abhängigkeit von Drittanbieter-Cookies und andere Datenschutzrisiken. Siehe Fenced frame API für weitere Details.

Attribute

Dieses Element umfasst die globalen Attribute.

allow

Gibt eine Permissions Policy für das <fencedframe> an, die definiert, welche Funktionen dem <fencedframe> basierend auf dem Ursprung der Anfrage verfügbar sind. Siehe Verfügbare Berechtigungspolicies für fenced frames für weitere Details, welche Funktionen durch eine auf einem fenced frame gesetzte Policy gesteuert werden können.

height

Ein ganzzahliger Wert ohne Einheit, der die Höhe des fenced frames in CSS-Pixel angibt. Der Standardwert ist 150.

width

Ein ganzzahliger Wert ohne Einheit, der die Breite des fenced frames in CSS-Pixel angibt. Der Standardwert ist 300.

Verfügbare Berechtigungspolicies für fenced frames

Berechtigungen, die vom obersten Kontext an einen fenced frame delegiert werden, um Funktionen zu erlauben oder zu verweigern, könnten als Kommunikationskanal genutzt werden und stellen daher ein Datenschutzrisiko dar. Aus diesem Grund sind standardmäßige Web-Funktionen, deren Verfügbarkeit durch die Permissions Policy kontrolliert werden kann (zum Beispiel, camera oder geolocation), innerhalb von fenced frames nicht verfügbar.

Die einzigen Funktionen, die durch eine Policy innerhalb von fenced frames aktiviert werden können, sind die spezifischen Funktionen, die zur Nutzung innerhalb von fenced frames entwickelt wurden:

  • Protected Audience API
    • attribution-reporting
    • private-aggregation
    • shared-storage
    • shared-storage-select-url
  • Shared Storage API
    • attribution-reporting
    • private-aggregation
    • shared-storage
    • shared-storage-select-url

Derzeit sind diese immer innerhalb von fenced frames aktiviert. In Zukunft wird es möglich sein, mithilfe des <fencedframe>-allow-Attributes zu kontrollieren, welche von ihnen aktiviert sind. Das Blockieren von Privacy Sandbox-Funktionen auf diese Weise wird auch das Laden des fenced frames blockieren — es wird keinen Kommunikationskanal geben.

Fokussieren über die Grenzen von fenced frames hinweg

Die Fähigkeit des aktiven Fokus des Dokuments, über die Grenzen von fenced frames hinweg verschoben zu werden (d.h. von einem Element außerhalb des fenced frames zu einem innerhalb, oder umgekehrt), ist eingeschränkt. Benutzerinitiierte Aktionen wie ein Klick oder ein Tab können dies tun, da hierbei kein Fingerprinting-Risiko besteht.

Jedoch ist der Versuch, die Grenze über einen API-Aufruf wie HTMLElement.focus() zu durchqueren, verboten — ein bösartiges Skript könnte eine Reihe solcher Aufrufe verwenden, um abgeleitete Informationen über die Grenze hinweg zu leaken.

Positionierung und Skalierung

Als ein ersetztes Element erlaubt das <fencedframe>, die Position des eingebetteten Dokuments innerhalb seines Rahmens mithilfe der object-position-Eigenschaft anzupassen.

Hinweis: Die object-fit-Eigenschaft hat keine Wirkung auf <fencedframe>-Elemente.

Die Größe des eingebetteten Inhalts kann durch interne contentWidth und contentHeight Eigenschaften des config-Objekts des <fencedframe> festgelegt werden. In solchen Fällen ändert das Ändern der width oder height des <fencedframe> die Größe des eingebetteten Containers auf der Seite, aber das Dokument innerhalb des Containers wird visuell skaliert, um zu passen. Die gemeldete Breite und Höhe des eingebetteten Dokuments (d.h. Window.innerWidth und Window.innerHeight) bleibt unverändert.

Barrierefreiheit

Personen, die mit assistiver Technologie navigieren, wie einem Bildschirmleser, können das title-Attribut auf einem <fencedframe> verwenden, um dessen Inhalt zu kennzeichnen. Der Wert des Titels sollte den eingebetteten Inhalt prägnant beschreiben:

html
<fencedframe
  title="Advertisement for new Log. From Blammo!"
  width="640"
  height="320"></fencedframe>

Ohne diesen Titel müssen sie in das <fencedframe> hinein navigieren, um festzustellen, was sein eingebetteter Inhalt ist. Diese Kontextverschiebung kann verwirrend und zeitaufwendig sein, insbesondere bei Seiten mit mehreren <fencedframe>s und/oder wenn Embeds interaktive Inhalte wie Video oder Audio enthalten.

Beispiele

Um festzulegen, welcher Inhalt in einem <fencedframe> angezeigt wird, generiert eine nutzende API (wie Protected Audience oder Shared Storage) ein FencedFrameConfig-Objekt, das dann als Wert der config-Eigenschaft des <fencedframe> gesetzt wird.

Das folgende Beispiel erhält eine FencedFrameConfig aus einer Werbeauktion der Protected Audience API, die dann verwendet wird, um die gewonnene Werbung in einem <fencedframe> anzuzeigen:

html
<fencedframe width="640" height="320"></fencedframe>
js
const frameConfig = await navigator.runAdAuction({
  // … auction configuration
  resolveToConfig: true,
});

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

Hinweis: resolveToConfig: true muss in den runAdAuction()-Aufruf übergeben werden, um ein FencedFrameConfig-Objekt zu erhalten. Wenn es nicht gesetzt ist, wird der resultierende Promise zu einer URN aufgelöst, die nur in einem <iframe> verwendet werden kann.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasing-Inhalt, eingebetteter Inhalt, interaktiver Inhalt, greifbarer Inhalt.
Erlaubte Inhalte Keine.
Tag-Aussparung Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das eingebetteten Inhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen application, document, img, none, presentation
DOM-Schnittstelle [`HTMLFencedFrameElement`](/de/docs/Web/API/HTMLFencedFrameElement)

Spezifikationen

Spezifikation
Fenced Frame
# the-fencedframe-element

Browser-Kompatibilität

Siehe auch