Einführung in die Richtlinie für Funktionen

Eric Bidelman
Twitter GitHub Startseite

Zusammenfassung

Mit der Funktionsrichtlinie können Webentwickler das Verhalten bestimmter APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren und ändern. Es ist wie ein CSP, aber statt der Sicherheit werden die Features gesteuert.

Die Funktionsrichtlinien selbst sind kleine Zustimmungsvereinbarungen zwischen Entwickler und Browser, die dazu beitragen können, unsere Ziele in Bezug auf die Erstellung (und Verwaltung) qualitativ hochwertiger Webanwendungen zu erreichen.

Einführung

Die Entwicklung für das Web ist ein felsiges Abenteuer. Es ist schon schwer genug, eine erstklassige Webanwendung zu erstellen, die sich durch Leistung übertrifft und die neuesten Best Practices anwendet. Es ist sogar noch schwieriger, diese Erfahrung auf lange Sicht zu halten. Wenn sich Ihr Projekt weiterentwickelt, kommen Entwickler hinzu, neue Funktionen werden eingeführt und die Codebasis wächst. Das großartige Erlebnis, das Sie einmal erreicht haben, kann sich verschlechtern und die UX wird langsam verschlechtert. Die Funktionsrichtlinie soll dich auf dem Laufenden halten.

Mit dieser Richtlinie aktivieren Sie eine Reihe von „Richtlinien“ für den Browser, um bestimmte Funktionen auf Ihrer Website durchzusetzen. Mit diesen Richtlinien wird festgelegt, auf welche APIs die Website zugreifen oder das Standardverhalten des Browsers für bestimmte Funktionen ändern kann.

Die Funktionsrichtlinie bietet unter anderem folgende Möglichkeiten:

  • Ändere das Standardverhalten von autoplay bei Videos auf Mobilgeräten und von Drittanbietern.
  • Schränken Sie die Verwendung sensibler APIs wie camera oder microphone für eine Website ein.
  • Zulassen, dass iFrames die fullscreen API verwenden.
  • Blockieren Sie die Verwendung veralteter APIs wie synchroner XHR und document.write().
  • Achten Sie darauf, dass die Bilder die richtige Größe haben (z.B. Layoutüberlastungen verhindern) und nicht zu groß für den Darstellungsbereich sind (z.B. Verschwenden von Nutzerbandbreite).

Richtlinien sind ein Vertrag zwischen Entwickler und Browser. Sie informieren den Browser darüber, was die Absicht des Entwicklers ist, und helfen uns so ehrlich, wenn unsere App versucht, aus der Bahn zu kommen und etwas Schlechtes zu machen. Wenn auf der Website oder den eingebetteten Inhalten Dritter versucht wird, gegen eine der vom Entwickler ausgewählten Regeln zu verstoßen, überschreibt der Browser das Verhalten mit einer besseren Nutzererfahrung oder blockiert die API vollständig.

Funktionsrichtlinie verwenden

Mit den Richtlinien für Funktionen können Sie Funktionen auf zwei Arten steuern:

  1. Über den HTTP-Header Feature-Policy.
  2. Mit dem Attribut allow in iFrames

Am einfachsten können Sie die Funktionsrichtlinie verwenden, indem Sie den HTTP-Header Feature-Policy mit der Antwort einer Seite senden. Der Wert dieses Headers ist eine Richtlinie oder eine Gruppe von Richtlinien, die der Browser für einen bestimmten Ursprung respektieren soll:

Feature-Policy: <feature> <allow list origin(s)>

Die Liste der zulässigen Ursprünge kann mehrere unterschiedliche Werte annehmen:

  • *: Die Funktion ist in Browserkontexten auf oberster Ebene und in verschachtelten Browserkontexten (iFrames) zulässig.
  • 'self': Die Funktion ist in Browserkontexten der obersten Ebene und verschachtelten Browserkontexten mit demselben Ursprung zulässig. In ursprungsübergreifenden Dokumenten in verschachtelten Browserkontexten ist dies nicht zulässig.
  • 'none': Die Funktion ist in Browserkontexten auf oberster Ebene und in verschachtelten Browserkontexten nicht zulässig.
  • <origin(s)>: bestimmte Ursprünge, für die die Richtlinie aktiviert werden soll (z.B. https://example.com).

Beispiel

Angenommen, Sie möchten auf Ihrer Website für keinen Content die Geolocation API verwenden. Senden Sie dazu eine strikte Zulassungsliste von 'none' für das Feature geolocation:

Feature-Policy: geolocation 'none'

Wenn ein Code- oder iFrame-Snippet versucht, die Geolocation API zu verwenden, wird es vom Browser blockiert. Das gilt auch dann, wenn der Nutzer zuvor die Berechtigung zur Freigabe seines Standorts erteilt hat.

Verstoß gegen die festgelegte Richtlinie zur Standortbestimmung
Verstoß gegen die festgelegte Richtlinie zur Standortbestimmung.

In anderen Fällen kann es sinnvoll sein, diese Richtlinie etwas zu lockern. Wir können zulassen, dass unser eigener Ursprung die Geolocation API verwendet, aber Drittanbieterinhalte nicht darauf zugreifen können, indem wir 'self' in die Zulassungsliste setzen:

Feature-Policy: geolocation 'self'

Das iFrame-Attribut allow

Die zweite Möglichkeit zur Verwendung der Funktionsrichtlinie besteht darin, Inhalte innerhalb eines iframe zu steuern. Verwenden Sie das Attribut allow, um eine Richtlinienliste für eingebettete Inhalte anzugeben:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

Was ist mit den vorhandenen iFrame-Attributen?

Einige der von der Feature-Richtlinie gesteuerten Features haben ein vorhandenes Attribut, um ihr Verhalten zu steuern. Beispielsweise ist <iframe allowfullscreen> ein Attribut, mit dem iFrame-Inhalte die HTMLElement.requestFullscreen() API verwenden können. Mit den Attributen allowpaymentrequest und allowusermedia können Sie die Payment Request API bzw. getUserMedia() zulassen.

Verwenden Sie nach Möglichkeit das Attribut allow anstelle dieser alten Attribute. Für Fälle, in denen Sie die Abwärtskompatibilität unterstützen müssen, ist die Verwendung des Attributs allow mit einem entsprechenden alten Attribut völlig in Ordnung (z.B. <iframe allowfullscreen allow="fullscreen">). Beachten Sie jedoch, dass die restriktivere Richtlinie Vorrang hat. Der folgende iFrame darf beispielsweise nicht in den Vollbildmodus wechseln, da allow="fullscreen 'none'" restriktiver als allowfullscreen ist:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

Mehrere Richtlinien gleichzeitig steuern

Mehrere Funktionen können gleichzeitig gesteuert werden, indem der HTTP-Header mit einer durch ; getrennten Liste von Richtlinienanweisungen gesendet wird:

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

oder indem Sie für jede Richtlinie einen separaten Header senden:

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

Dieses Beispiel würde so aussehen:

  • Verhindert die Verwendung von unsized-media für alle Browserkontexte.
  • Verhindert die Verwendung von geolocation für alle Browserkontexte mit Ausnahme des eigenen Ursprungs der Seite und von https://example.com.
  • Ermöglicht camera den Zugriff in allen Browserkontexten.

Beispiel: Mehrere Richtlinien für einen iFrame festlegen

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

In Chrome 60 wurden der HTTP-Header Feature-Policy und das Attribut allow in iFrames unterstützt. Die JavaScript API wurde in Chrome 74 hinzugefügt.

Mit dieser API kann clientseitiger Code feststellen, welche Funktionen von einer Seite, einem Frame oder einem Browser zugelassen werden. Sie können auf die Extras unter document.featurePolicy für das Hauptdokument oder unter frame.featurePolicy für iFrames zugreifen.

Beispiel

Im folgenden Beispiel sehen Sie, was passiert, wenn die Richtlinie Feature-Policy: geolocation 'self' an die Website https://example.com gesendet wird:

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

Liste der Richtlinien

Welche Funktionen können also über die Richtlinie für Funktionen gesteuert werden?

Derzeit ist nicht ausreichend dokumentiert, welche Richtlinien implementiert werden und wie sie verwendet werden. Die Liste wird auch im Laufe der Zeit erweitert, wenn verschiedene Browser die Spezifikation übernehmen und verschiedene Richtlinien implementieren. Die Feature-Richtlinie ist ein bewegliches Ziel und gute Referenzdokumente werden auf jeden Fall benötigt.

Vorerst gibt es mehrere Möglichkeiten zu sehen, welche Funktionen gesteuert werden können.

  • Sehen Sie sich unsere Demos zu den Feature-Richtlinien für Küchensenken an. Sie finden dort Beispiele für jede Richtlinie, die in Blink implementiert wurde.
  • Eine Liste der Funktionsnamen finden Sie in der Quelle von Chrome.
  • Fragen Sie document.featurePolicy.allowedFeatures() für about:blank ab, um die Liste zu finden:
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Unter chromestatus.com finden Sie die Richtlinien, die implementiert wurden oder in Blink berücksichtigt werden.

Informationen dazu, wie einige dieser Richtlinien verwendet werden, findest du im GitHub-Repository der Spezifikation. Er enthält Erläuterungen zu einigen Richtlinien.

Häufig gestellte Fragen

Wann verwende ich die Funktionsrichtlinie?

Da alle Richtlinien Zustimmung geben, können Sie die Funktionsrichtlinie verwenden, wenn und wo es sinnvoll ist. Wenn Ihre Anwendung beispielsweise eine Bildergalerie ist, können Sie mit der Richtlinie maximum-downscaling-image vermeiden, dass riesige Bilder an mobile Darstellungsbereiche gesendet werden.

Andere Richtlinien wie document-write und sync-xhr sollten vorsichtiger verwendet werden. Wenn Sie sie aktivieren, funktionieren Inhalte von Drittanbietern möglicherweise nicht wie Werbeanzeigen. Andererseits können Sie mit der Funktionsrichtlinie prüfen, ob Ihre Seiten diese schrecklichen APIs nicht verwenden.

Verwende ich die Funktionsrichtlinie in der Entwicklung oder Produktion?

Beides. Wir empfehlen, Richtlinien während der Entwicklung zu aktivieren und die Richtlinien während der Produktion aktiv zu lassen. Richtlinien während der Entwicklung zu aktivieren, kann Ihnen helfen, auf dem richtigen Weg zu beginnen. Es wird Ihnen helfen, unerwartete Regresse zu erkennen, bevor sie auftreten. Lassen Sie die Richtlinien in der Produktion aktiviert, um eine bestimmte UX für Nutzende zu gewährleisten.

Kann ich meinem Server Richtlinienverstöße melden?

Wir arbeiten bereits an einer Reporting API. Ähnlich wie bei Websites können Sie den Erhalt von Berichten zu Verstößen gegen CSPs oder zur Einstellung von Funktionen aktivieren, um Berichte zu Verstößen gegen die Funktionsrichtlinien zu erhalten.

Wie lauten die Übernahmeregeln für iFrame-Inhalte?

Für Skripts (Erst- oder Drittanbieter-Skripts) wird die Richtlinie ihres Browserkontexts übernommen. Das bedeutet, dass für Skripts auf oberster Ebene die Richtlinien des Hauptdokuments übernommen werden.

iframe-Elemente übernehmen die Richtlinien der ihnen übergeordneten Seite. Wenn iframe ein allow-Attribut hat, gilt die strengere Richtlinie zwischen der übergeordneten Seite und der allow-Liste. Weitere Informationen zur Verwendung von iframe finden Sie unter allow-Attribut in iFrames.

Nein. Die Lebensdauer einer Richtlinie gilt für die Antwort auf eine einzelne Seitennavigation. Wenn der Nutzer eine neue Seite aufruft, muss der Feature-Policy-Header explizit in der neuen Antwort gesendet werden, damit die Richtlinie angewendet wird.

Welche Browser unterstützen die Funktionsrichtlinie?

Unter caniuse.com finden Sie die neuesten Informationen zur Browserunterstützung.

Derzeit ist Chrome der einzige Browser, der die Funktionsrichtlinie unterstützt. Da jedoch die gesamte API-Oberfläche aktiviert oder erkannt werden kann, eignet sich die Funktionsrichtlinie gut für eine schrittweise Verbesserung.

Fazit

Die Feature-Richtlinie kann dazu beitragen, die Nutzerfreundlichkeit und Leistung zu optimieren. Dies ist besonders praktisch bei der Entwicklung oder Wartung einer Anwendung, da Sie so potenzielle Probleme vermeiden können, bevor sie sich in Ihre Codebasis schleichen.

Weitere Informationen: