<fencedframe>: Das Fenced Frame-Element

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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>-Elemente sind in Form und Funktion den <iframe>-Elementen sehr ähnlich, mit folgenden Ausnahmen:

  • Die Kommunikation zwischen dem <fencedframe>-Inhalt und der einbettenden Seite ist eingeschränkt.
  • Ein <fencedframe> kann auf Cross-Site-Daten zugreifen, jedoch nur unter sehr spezifischen, kontrollierten Umständen, die die Privatsphäre des Nutzers wahren.
  • Ein <fencedframe> kann nicht durch reguläre Skripte manipuliert oder auf seine Daten zugegriffen werden (z. B. Lesen oder Setzen der Quell-URL). <fencedframe>-Inhalte können nur über spezifische APIs eingebettet werden.
  • Ein <fencedframe> kann nicht auf das DOM des einbettenden Kontexts zugreifen, ebenso wenig kann der einbettende Kontext auf das DOM des <fencedframe> zugreifen.

Das <fencedframe>-Element ist eine Art von <iframe> mit mehr nativen Datenschutzfunktionen. Es adressiert die Schwächen von <iframe>s wie die Abhängigkeit von Drittanbieter-Cookies und andere Datenschutzrisiken. Weitere Details finden Sie im Fenced Frame API.

Attribute

Dieses Element enthält die globalen Attribute.

allow Experimentell

Gibt eine Zugangssicherheitsrichtlinie für das <fencedframe> an, die definiert, welche Funktionen dem <fencedframe> basierend auf dem Ursprung der Anfrage zur Verfügung stehen. Weitere Details, welche Funktionen über eine auf einem fenced frame gesetzte Richtlinie gesteuert werden können, finden Sie unter Zugangssicherheitsrichtlinien, die auf fenced frames verfügbar sind.

height Experimentell

Eine ganzzahlige Einheit, die die Höhe des fenced frames in CSS-Pixeln darstellt. Der Standardwert ist 150.

width Experimentell

Eine ganzzahlige Einheit, die die Breite des fenced frames in CSS-Pixeln darstellt. Der Standardwert ist 300.

Zugangssicherheitsrichtlinien, die auf fenced frames verfügbar sind

Berechtigungen, die vom obersten Kontext an ein fenced frame delegiert werden, um Funktionen zu erlauben oder zu verweigern, könnten als Kommunikationskanal genutzt werden, was ein Datenschutzrisiko darstellt. Daher sind Standard-Webfunktionen, deren Verfügbarkeit über Zugangssicherheitsrichtlinien gesteuert werden kann (zum Beispiel, camera oder geolocation), nicht verfügbar innerhalb von fenced frames.

Die einzigen Funktionen, die von einer Richtlinie innerhalb von fenced frames aktiviert werden können, sind die spezifischen Funktionen, die zur Verwendung innerhalb von fenced frames gedacht sind:

  • 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 Funktionen immer innerhalb von fenced frames aktiviert. In der Zukunft wird es möglich sein, welche Funktionen aktiviert sind, über das allow-Attribut des <fencedframe> zu steuern. Das Blockieren von Privacy Sandbox-Funktionen auf diese Weise verhindert auch das Laden des fenced frames — es wird überhaupt keinen Kommunikationskanal geben.

Fokussierung über fenced frame-Grenzen hinweg

Die Möglichkeit, den aktiven Fokus eines Dokuments über fenced frame-Grenzen hinweg zu verschieben (d. h. von einem Element außerhalb des fenced frames zu einem innerhalb oder umgekehrt), ist begrenzt. Benutzerinitiierte Aktionen, wie etwa ein Klick oder ein Tab, können dies tun, da dort kein Risiko des Fingerprintings besteht.

Allerdings ist es untersagt, die Grenze über einen API-Aufruf wie HTMLElement.focus() zu durchbrechen — ein bösartiges Skript könnte eine Reihe solcher Aufrufe verwenden, um abgeleitete Informationen über die Grenze hinweg zu leaken.

Positionierung und Skalierung

Als 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 keinen Einfluss 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 verändert sich beim Ändern der width oder height des <fencedframe> die Größe des eingebetteten Containers auf der Seite, aber das Dokument innerhalb des Containers wird visuell angepasst, um zu passen. Die gemeldete Breite und Höhe des eingebetteten Dokuments (d. h. Window.innerWidth und Window.innerHeight) bleiben unverändert.

Barrierefreiheit

Menschen, die mit unterstützender Technologie wie einem Screenreader navigieren, können das title-Attribut auf einem <fencedframe> verwenden, um dessen Inhalt zu beschriften. 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> navigieren, um zu bestimmen, was der eingebettete Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwendig sein, insbesondere für Seiten mit mehreren <fencedframe>-Elementen und/oder falls Einbettungen interaktive Inhalte wie Video oder Audio enthalten.

Beispiele

Um festzulegen, welcher Inhalt in einem <fencedframe> angezeigt wird, generiert eine verwendende 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 Anzeigenauktion der Protected Audience API, die dann verwendet wird, um die gewinnende 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 beim Aufruf von runAdAuction() übergeben werden, um ein FencedFrameConfig-Objekt zu erhalten. Wenn es nicht gesetzt ist, wird die resultierende Promise auf eine URN aufgelöst, die nur in einem <iframe> verwendet werden kann.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phraseninhalt, eingebetteter Inhalt, interaktiver Inhalt, greifbarer Inhalt.
Erlaubter Inhalt Kein.
Tag-Auslassung Keine, sowohl das Start- als auch das Endtag sind obligatorisch.
Erlaubte Eltern Jedes Element, das eingebetteten Inhalt akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen application, document, img, none, presentation
DOM-Schnittstelle [`HTMLFencedFrameElement`](/de/docs/Web/API/HTMLFencedFrameElement)

Spezifikationen

Specification
Fenced Frame
# the-fencedframe-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch