<fencedframe>: Das Fenced Frame Element

Dieses Element schließt die globalen Attribute ein.

allow Experimentell

Definiert eine Permissions Policy für das <fencedframe>, die festlegt, welche Funktionen dem <fencedframe> basierend auf dem Ursprung der Anfrage zur Verfügung stehen. Details zu den über eine Richtlinie steuerbaren Funktionen innerhalb von Fenced Frames finden Sie unter Berechtigungsrichtlinien verfügbar für Fenced Frames.

height Experimentell

Eine ganzzahlige Zahl ohne Einheit, die die Höhe des Fenced Frames in CSS-Pixeln darstellt. Der Standardwert ist 150.

width Experimentell

Eine ganzzahlige Zahl ohne Einheit, die die Breite des Fenced Frames in CSS-Pixeln darstellt. Der Standardwert ist 300.

Berechtigungen, die vom Top-Level-Kontext zu einem Fenced Frame delegiert werden, um Funktionen zu erlauben und zu verweigern, könnten als Kommunikationskanal genutzt werden und stellen daher eine Bedrohung der Privatsphäre dar. Daher sind standardmäßige Webfunktionen, deren Verfügbarkeit über eine Permissions Policy gesteuert werden kann (z. B. camera oder geolocation), innerhalb von Fenced Frames nicht verfügbar.

Die einzigen Funktionen, die in einem Fenced Frame über eine Richtlinie aktiviert werden können, sind die spezifischen Funktionen, die für die Verwendung innerhalb von Fenced Frames vorgesehen 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, mit dem allow-Attribut des <fencedframe> zu steuern, welche aktiviert sind. Das Blockieren von Privacy Sandbox-Funktionen auf diese Weise wird auch das Laden des Fenced Frames blockieren — es wird keinerlei Kommunikationskanal existieren.

Die Fähigkeit, den aktiven Fokus des Dokuments über Fenced Frame Grenzen hinweg zu bewegen (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 hier kein Risiko des Fingerprintings besteht.

Jedoch wird der Versuch, die Grenze über einen API-Aufruf wie HTMLElement.focus() zu überqueren, verhindert — ein bösartiges Skript könnte eine Reihe solcher Aufrufe nutzen, um Informationen über die Grenze hinweg zu leaken.

Da es sich um ein ersetzen Element handelt, ermöglicht das <fencedframe>, die Position des eingebetteten Dokuments innerhalb seines Kastens mit der object-position Eigenschaft anzupassen.

Die Größe des eingebetteten Inhalts kann durch interne contentWidth und contentHeight Eigenschaften des <fencedframe> config Objekts festgelegt werden. In solchen Fällen verändert das Ändern der width oder height des <fencedframe> zwar 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) bleiben unverändert.

Personen, die mit unterstützender Technologie navigieren, wie z.B. einem Screenreader, 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:

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

Ohne diesen Titel müssen sie in das <fencedframe> navigieren, um festzustellen, was der eingebettete Inhalt ist. Diese Kontextverschiebung kann verwirrend und zeitaufwändig sein, besonders für Seiten mit mehreren <fencedframe>s und/oder wenn Einbettungen interaktive Inhalte wie Video oder Audio enthalten.

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> festgelegt wird.

Das folgende Beispiel erhält einen FencedFrameConfig von einer Ad Auction der Protected Audience API, welcher dann verwendet wird, um die gewonnene Anzeige in einem <fencedframe> darzustellen:

<fencedframe width="640" height="320"></fencedframe>

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true,
});

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

• Fenced Frame API
• Fenced frames auf developers.google.com
• The Privacy Sandbox auf developers.google.com