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

Deprecated
To be removed

This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates. Following the announcement that Chrome will maintain its current approach to third-party cookies, Chrome decided to withdraw certain Privacy Sandbox features including the <fencedframe> element and related APIs.

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

  • Die Kommunikation zwischen dem <fencedframe>-Inhalt und der einbettenden Seite eingeschränkt ist.
  • Ein <fencedframe> kann auf siteübergreifende Daten zugreifen, jedoch nur unter sehr spezifischen, kontrollierten Umständen, die den Datenschutz des Nutzers wahren.
  • Ein <fencedframe> kann nicht durch reguläres Scripting manipuliert oder seine Daten abgerufen 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, und der einbettende Kontext kann nicht auf das DOM des <fencedframe> zugreifen.

Das <fencedframe>-Element ist eine Art <iframe> mit eingebauten erweiterten Datenschutzfunktionen. Es behebt die Schwachstellen von <iframe>s, wie die Abhängigkeit von Drittanbieter-Cookies und andere Datenschutzrisiken. Weitere Details finden Sie in der Fenced Frame API.

Attribute

Dieses Element umfasst die globalen Attribute.

allow

Legt eine Berechtigungsrichtlinie für das <fencedframe> fest, 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 kontrolliert werden können, finden Sie unter Berechtigungsrichtlinien für fenced frames.

height

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

width

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

Berechtigungsrichtlinien für fenced frames

Berechtigungen, die vom obersten Kontext an ein fenced frame weitergegeben werden, um Funktionen zu erlauben und zu verweigern, könnten als Kommunikationskanal verwendet werden und stellen daher eine Datenschutzbedrohung dar. Daher sind Standard-Webfunktionen, deren Verfügbarkeit über die Berechtigungsrichtlinie kontrolliert werden kann (z. B. camera oder geolocation), innerhalb von fenced frames nicht verfügbar.

Die einzigen Funktionen, die durch eine Richtlinie in fenced frames aktiviert werden können, sind die spezifischen Funktionen, die für die Verwendung 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 Funktionen innerhalb von fenced frames immer aktiviert. In Zukunft wird es möglich sein, mit dem <fencedframe>-allow-Attribut zu kontrollieren, welche aktiviert sind. Das Blockieren von Datenschutzfunktionen auf diese Weise wird auch verhindern, dass das fenced frame geladen wird — es wird überhaupt keinen Kommunikationskanal geben.

Fokussierung über Grenzen von fenced frames hinweg

Die Möglichkeit, den aktuellen Fokus eines Dokuments über die Grenzen eines fenced frames hinweg zu verschieben (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 dabei kein Risiko des Fingerprintings besteht.

Jedoch ist das Überqueren der Grenze über einen API-Aufruf wie HTMLElement.focus() 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 ersetztes Element ermöglicht das <fencedframe>, die Position des eingebetteten Dokuments innerhalb seines Rahmens mit der Eigenschaft object-position anzupassen.

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

Die Größe des eingebetteten Inhalts kann durch die internen contentWidth- und contentHeight-Eigenschaften des config-Objekts des <fencedframe> festgelegt werden. In solchen Fällen wird durch Ändern der width oder height des <fencedframe> die Größe des eingebetteten Containers auf der Seite verändert, 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 unterstützender Technologie navigieren, wie z. B. einem Bildschirmleser, können das title-Attribut auf einem <fencedframe> verwenden, um dessen Inhalt zu beschreiben. 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 dessen eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwendig sein, insbesondere bei Seiten mit mehreren <fencedframe>s und/oder wenn die Einbettungen interaktive Inhalte wie Video oder Audio enthalten.

Beispiele

Um festzulegen, welcher Inhalt in einem <fencedframe> angezeigt wird, erzeugt 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 ein FencedFrameConfig aus einer Anzeigenauktion der Protected Audience API, das dann verwendet wird, um die gewonnene Anzeige 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. Wird es nicht gesetzt, wird das resultierende Promise zu einer URN aufgelöst, die nur in einem <iframe> verwendet werden kann.

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phraseninhalt, eingebetteter Inhalt, interaktiver Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt Keiner.
Tag-Auslassung Keiner, sowohl das öffnende als auch das schließende Tag sind erforderlich.
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

Spezifikation
Fenced Frame
# the-fencedframe-element

Browser-Kompatibilität

Siehe auch