Einführung in die Richtlinie für Funktionen

Zusammenfassung

Mit der Richtlinie zu Funktionen können Webentwickler bestimmte APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren und das Verhalten ändern. Es ist wie ein CSP, aber statt die Sicherheit zu steuern, werden die Funktionen gesteuert.

Die Richtlinien für Funktionen sind kleine Opt-in-Vereinbarungen zwischen Entwickler und Browser, die dazu beitragen können, unsere Ziele beim Erstellen und Betreiben hochwertiger Web-Apps zu erreichen.

Einführung

Das Entwickeln für das Web ist ein abenteuerliches Unterfangen. Es ist schon schwierig genug, eine erstklassige Webanwendung zu entwickeln, die eine hervorragende Leistung erzielt und alle aktuellen Best Practices nutzt. Es ist noch schwieriger, diese Qualität im Laufe der Zeit beizubehalten. Im Laufe der Zeit kommen Entwickler hinzu, es werden neue Funktionen eingeführt und die Codebasis wächst. Die einstige „Gute Erfahrung“ ™ kann sich verschlechtern und die UX leidet. Die Funktion soll dir dabei helfen, auf Kurs zu bleiben.

Mit der Funktion „Funktionsrichtlinie“ können Sie eine Reihe von „Richtlinien“ aktivieren, die der Browser für bestimmte Funktionen auf Ihrer Website erzwingt. Mit diesen Richtlinien wird eingeschränkt, auf welche APIs die Website zugreifen kann, oder das Standardverhalten des Browsers für bestimmte Funktionen geändert.

Hier sind einige Beispiele für die Verwendung der Richtlinie zu Funktionen:

  • Ändern Sie das Standardverhalten von autoplay für Videos auf Mobilgeräten und von Drittanbietern.
  • Sie können die Verwendung sensibler APIs wie camera oder microphone für eine Website einschränken.
  • 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. um Layout-Fehler zu vermeiden) und nicht zu groß für den Darstellungsbereich sind (z.B. um die Bandbreite der Nutzer nicht zu verschwenden).

Richtlinien sind ein Vertrag zwischen Entwickler und Browser. Sie informieren den Browser über die Absicht des Entwicklers und helfen uns so, ehrlich zu bleiben, wenn unsere App versucht, vom Kurs abzuweichen und etwas Böses zu tun. Wenn die Website oder eingebetteten Inhalte von Drittanbietern gegen eine der vom Entwickler vorab ausgewählten Regeln verstoßen, überschreibt der Browser das Verhalten mit einer besseren UX oder blockiert die API vollständig.

Feature-Richtlinie verwenden

Die Richtlinie für Funktionen bietet zwei Möglichkeiten, Funktionen zu steuern:

  1. Über den Feature-Policy-HTTP-Header.
  2. Mit dem allow-Attribut für iframes

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

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

Die Zulassungsliste für Ursprünge kann mehrere Werte haben:

  • *: Die Funktion ist in Browserkontexten der obersten Ebene und in verschachtelten Browserkontexten (Iframes) zulässig.
  • 'self': Die Funktion ist in Browserkontexten der obersten Ebene und in 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 der obersten 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 die Verwendung der Geolocation API für alle Inhalte auf Ihrer Website blockieren. Dazu senden Sie eine strenge Zulassungsliste von 'none' für die Funktion geolocation:

Feature-Policy: geolocation 'none'

Wenn ein Code- oder iFrame-Element versucht, die Geolocation API zu verwenden, blockiert der Browser dies. Das gilt auch dann, wenn der Nutzer zuvor die Berechtigung zum Teilen seines Standorts erteilt hat.

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

In anderen Fällen kann es sinnvoll sein, diese Richtlinie etwas zu lockern. Wir können unserem eigenen Ursprung erlauben, die Geolocation API zu verwenden, aber den Zugriff von Drittanbieterinhalten verhindern, indem wir 'self' in die Zulassungsliste aufnehmen:

Feature-Policy: geolocation 'self'

Das iFrame-Attribut allow

Die zweite Möglichkeit, die Feature-Richtlinie zu verwenden, besteht darin, Inhalte in einer 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?

Für einige der von der Funktionsweise-Richtlinie gesteuerten Funktionen gibt es bereits ein Attribut, mit dem ihr Verhalten gesteuert werden kann. <iframe allowfullscreen> ist beispielsweise ein Attribut, mit dem iframe-Inhalte die HTMLElement.requestFullscreen() API verwenden können. Außerdem gibt es die Attribute allowpaymentrequest und allowusermedia, mit denen Sie die Zahlungsanfrage-API bzw. getUserMedia() zulassen können.

Verwenden Sie nach Möglichkeit das Attribut allow anstelle dieser alten Attribute. Wenn Sie die Abwärtskompatibilität unterstützen müssen, ist es in Ordnung, das Attribut allow mit einem entsprechenden älteren Attribut zu verwenden (z.B. <iframe allowfullscreen allow="fullscreen">). Beachten Sie jedoch, dass die strengere Richtlinie gilt. Für den folgenden Iframe ist beispielsweise kein Vollbildmodus zulässig, da allow="fullscreen 'none'" strenger ist als allowfullscreen:

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

Mehrere Richtlinien gleichzeitig verwalten

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 *;

In diesem Beispiel geschieht Folgendes:

  • Die Verwendung von unsized-media wird für alle Browserkontexte unterbunden.
  • Hiermit wird die Verwendung von geolocation für alle Browserkontexte außer der eigenen Herkunft der Seite und https://example.com unterbunden.
  • Gewährt camera Zugriff für alle Browserkontexte.

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 wurde die Unterstützung für den Feature-Policy-HTTP-Header und das allow-Attribut für iframes hinzugefügt. Die JavaScript API wurde in Chrome 74 hinzugefügt.

Mit dieser API kann clientseitiger Code ermitteln, welche Funktionen von einer Seite, einem Frame oder einem Browser zulässig sind. Sie können über document.featurePolicy für das Hauptdokument oder frame.featurePolicy für Iframes darauf zugreifen.

Beispiel

Im folgenden Beispiel wird dargestellt, was passiert, wenn eine Richtlinie von Feature-Policy: geolocation 'self' für 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 Funktionsweise-Richtlinie gesteuert werden?

Derzeit gibt es keine Dokumentation dazu, welche Richtlinien implementiert sind und wie sie verwendet werden. Die Liste wird im Laufe der Zeit auch wachsen, da verschiedene Browser die Spezifikation übernehmen und verschiedene Richtlinien implementieren. Die Richtlinie zu Funktionen wird sich weiterentwickeln und gute Referenzdokumente sind unbedingt erforderlich.

Derzeit gibt es mehrere Möglichkeiten, herauszufinden, welche Funktionen steuerbar sind.

  • In unserer Demo-Sammlung zu Richtlinien für App-Funktionen finden Sie weitere Beispiele. Es enthält Beispiele für jede Richtlinie, die in Blink implementiert wurde.
  • Eine Liste der Funktionsnamen finden Sie in der Chrome-Quelle.
  • Fragen Sie document.featurePolicy.allowedFeatures() auf about:blank ab, um die Liste zu finden:
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Auf chromestatus.com finden Sie Informationen zu den Richtlinien, die in Blink implementiert wurden oder in Erwägung gezogen werden.

Informationen zur Verwendung einiger dieser Richtlinien finden Sie im GitHub-Repository der Spezifikation. Dort finden Sie auch einige Erläuterungen zu einigen der Richtlinien.

FAQ

Wann verwende ich die Feature-Richtlinie?

Alle Richtlinien müssen aktiviert werden. Verwenden Sie die Funktionsweise für Funktionen also nur, wenn es sinnvoll ist. Wenn Ihre App beispielsweise eine Bildergalerie ist, können Sie mithilfe der maximum-downscaling-image-Richtlinie verhindern, dass riesige Bilder an mobile Darstellungsbereiche gesendet werden.

Andere Richtlinien wie document-write und sync-xhr sollten mit Bedacht verwendet werden. Wenn Sie sie aktivieren, funktionieren Inhalte von Drittanbietern wie Anzeigen möglicherweise nicht mehr richtig. Andererseits kann die Feature-Richtlinie eine gute Möglichkeit sein, um sicherzustellen, dass auf Ihren Seiten niemals diese schrecklichen APIs verwendet werden.

Verwende ich die Richtlinie zu Funktionen in der Entwicklungs- oder Produktionsumgebung?

Beides. Wir empfehlen, die Richtlinien während der Entwicklung zu aktivieren und sie auch während der Produktion aktiv zu lassen. Wenn Sie Richtlinien während der Entwicklung aktivieren, können Sie von Anfang an auf dem richtigen Weg sein. So können Sie unerwartete Rückschritte erkennen, bevor sie auftreten. Lassen Sie die Richtlinien in der Produktion aktiviert, um Nutzern eine bestimmte Nutzererfahrung zu bieten.

Gibt es eine Möglichkeit, Richtlinienverstöße auf meinem Server zu melden?

Wir arbeiten an einer Reporting API. Ähnlich wie Websites die Option aktivieren können, Berichte zu CSP-Verstößen oder Einstellung von Funktionen zu erhalten, können Sie auch Berichte zu Verstößen gegen die Funktionsrichtlinien erhalten.

Wie werden iframe-Inhalte übernommen?

Scripts (eigene oder Drittanbieter-Scripts) übernehmen die Richtlinie des jeweiligen Browserkontexts. Das bedeutet, dass Scripts der obersten Ebene die Richtlinien des Hauptdokuments übernehmen.

iframe übernehmen die Richtlinien der übergeordneten Seite. Wenn die 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 im Hilfeartikel zum allow-Attribut in Iframes.

Nein. Die Lebensdauer einer Richtlinie bezieht sich auf eine einzelne Navigationsantwort. Wenn der Nutzer zu einer neuen Seite wechselt, muss der Feature-Policy-Header in der neuen Antwort explizit gesendet werden, damit die Richtlinie angewendet wird.

Welche Browser unterstützen die Richtlinie zu Funktionen?

Aktuelle Informationen zur Browserunterstützung finden Sie unter caniuse.com.

Derzeit ist Chrome der einzige Browser, der die Funktion unterstützt. Da jedoch die gesamte API-Oberfläche aktiviert oder funktionserkennungsfähig ist, eignet sich die Funktionsrichtlinie gut für progressive Verbesserungen.

Fazit

Die Richtlinien für Funktionen können Ihnen dabei helfen, die Nutzerfreundlichkeit und Leistung zu verbessern. Das ist besonders praktisch bei der Entwicklung oder Pflege einer App, da so potenzielle Fallstricke vermieden werden können, bevor sie in Ihren Code eindringen.

Weitere Ressourcen: