<fencedframe>: Das Fenced Frame-Element

Dieses Element umfasst die globalen Attribute.

allow Experimentell

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

height Experimentell

Eine integer Zahl ohne Einheit, die die Höhe des fenced frame in CSS-Pixeln darstellt. Der Standardwert ist 150.

width Experimentell

Eine integer Zahl ohne Einheit, die die Breite des fenced frame in CSS-Pixeln darstellt. Der Standardwert ist 300.

Berechtigungen, die vom Top-Level-Kontext an einen fenced frame delegiert werden, um Funktionen zu erlauben oder zu verweigern, könnten als Kommunikationskanal verwendet werden und stellen daher ein Datenschutzrisiko dar. Daher sind Standard-Webfunktionen, deren Verfügbarkeit über Permissions Policy gesteuert werden können (z. B. 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 speziell dafür gestalteten Funktionen:

• 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 über das allow-Attribut des <fencedframe> gesteuert, welche davon aktiviert sind. Das Blockieren von Privacy-Sandbox-Funktionen auf diese Weise wird auch den fenced frame daran hindern zu laden – es wird keinen Kommunikationskanal geben.

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

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

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

Die Größe des eingebetteten Inhalts kann durch interne contentWidth- und contentHeight-Eigenschaften des config-Objekts des <fencedframe>-Elements festgelegt werden. In solchen Fällen führt das Ändern der width oder height des <fencedframe> dazu, dass sich die Größe des eingebetteten Containers auf der Seite ä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) bleiben unverändert.

Personen, die mit unterstützender Technologie navigieren, beispielsweise mit einem Screenreader, können das title-Attribut auf einem <fencedframe> nutzen, 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 <fencedframe> navigieren, um herauszufinden, was der eingebettete Inhalt ist. Diese Kontextverschiebung kann verwirrend und zeitaufwendig sein, insbesondere auf Seiten mit mehreren <fencedframe>s und/oder wenn Embeds interaktive Inhalte wie Video oder Audio enthalten.

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 einen FencedFrameConfig aus der Anzeigenauktion der Protected Audience API, die 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;

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