<fencedframe>: Das Fenced Frame-Element

Dieses Element enthält die globalen Attribute.

allow Experimentell

Legt eine Permissions Policy für das <fencedframe> fest, die definiert, welche Features für das <fencedframe> basierend auf dem Ursprung der Anfrage verfügbar sind. Siehe Permissions policies available to fenced frames für weitere Details zu welchen Features über eine Richtlinie, die auf einem gefangenen Frame gesetzt ist, gesteuert werden können.

height Experimentell

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

width Experimentell

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

Berechtigungen, die vom Top-Level-Kontext an einen gefangenen Frame delegiert werden, um Features zu erlauben oder zu verweigern, könnten als Kommunikationskanal genutzt werden und stellen daher ein Datenschutzrisiko dar. Deshalb sind standardmäßige Webfeatures, deren Verfügbarkeit über Permissions Policy kontrolliert werden kann (zum Beispiel camera oder geolocation), nicht verfügbar innerhalb von fenced frames.

Die einzigen Features, die durch eine Richtlinie innerhalb von fenced frames aktiviert werden können, sind die spezifischen Features, die dazu gedacht sind, innerhalb von fenced frames verwendet zu werden:

• 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 kontrollierbar sein, welche durch das <fencedframe> allow-Attribut aktiviert werden. Das Blockieren von Datenschutz-Sandbox-Features auf diese Weise wird auch das Laden des fenced frame blockieren — es wird keinen Kommunikationskanal geben.

Die Fähigkeit des aktiven Fokus des Dokuments über Fenced-Frame-Grenzen hinweg verschoben zu werden (d. h. von einem Element außerhalb des fenced frame zu einem darin oder umgekehrt) ist eingeschränkt. Vom Benutzer initiierte Aktionen wie ein Klick oder Tab können dies tun, da dort kein Fingerabdrucksrisiko besteht.

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

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

Die Größe des eingebetteten Inhalts kann durch interne contentWidth und contentHeight-Eigenschaften des config-Objekts des <fencedframe> gesetzt werden. In solchen Fällen wird durch Ändern der width oder height des <fencedframe> die Größe des eingebetteten Containers auf der Seite ändern, 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 wie einem Bildschirmleser navigieren, 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:

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

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

Um festzulegen, welche Inhalte in einem <fencedframe> angezeigt werden, 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 ein FencedFrameConfig von einer Ad-Auktion der Protected Audience API, das dann verwendet wird, um die gewinnende Anzeige in einem <fencedframe> anzuzeigen:

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

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

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

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

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