Einführung in die Richtlinie für Funktionen

Zusammenfassung

Mit einer Funktionsrichtlinie können Webentwickler bestimmte APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren und ändern. Sie ähnelt einem CSP, steuert aber nicht die Sicherheit, sondern Features!

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 Erstellen eines Webs ist ein schwieriges Abenteuer. Es ist schon schwierig genug, eine erstklassige Webanwendung zu entwickeln, die eine hohe Leistung erzielt und alle aktuellen Best Practices nutzt. Es ist noch schwieriger, diese Erfahrung mit der Zeit aufrechtzuerhalten. 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.

Im Folgenden finden Sie Beispiele für die Verwendungsmöglichkeiten der Funktionsrichtlinie:

  • Ändere das Standardverhalten von autoplay für mobile Videos und Videos von Drittanbietern.
  • Eine Website daran hindern, sensible APIs wie camera oder microphone zu verwenden.
  • 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 Absichten des Entwicklers und helfen uns so dabei, ehrlich zu sein, wenn unsere App versucht, aus dem Verkehr zu kommen und etwas Schlechtes zu tun. Wenn die Website oder der eingebettete Inhalt von Drittanbietern versucht, gegen eine der vorab ausgewählten Regeln des Entwicklers zu verstoßen, überschreibt der Browser das Verhalten mit einer besseren Benutzeroberfläche oder blockiert die API vollständig.

Feature-Richtlinie verwenden

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

  1. Über den HTTP-Header Feature-Policy.
  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 sie 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 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 für die Standortbestimmung
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. Beispielsweise ist <iframe allowfullscreen> ein Attribut, das es iFrame-Inhalten ermöglicht, die HTMLElement.requestFullscreen() API zu verwenden. 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 die Abwärtskompatibilität durch die Verwendung des Attributs allow mit einem äquivalenten Legacy-Attribut unterstützt werden muss, ist dies völlig in Ordnung (z.B. <iframe allowfullscreen allow="fullscreen">). Beachten Sie jedoch, dass die restriktivere Richtlinie Vorrang hat. 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:

  • Hiermit wird die Verwendung von unsized-media 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 die Funktionen unter document.featurePolicy für das Hauptdokument oder frame.featurePolicy für Iframes aufrufen.

Beispiel

Im folgenden Beispiel wird gezeigt, 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 gesteuert werden?

Derzeit ist nicht ausreichend dokumentiert, welche Richtlinien implementiert 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.
  • Unter Quelle von Chrome finden Sie eine Liste der Funktionsnamen.
  • 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 Funktionsrichtlinie?

Alle Richtlinien müssen aktiviert werden. Verwenden Sie die Funktionsweise für Funktionen also nur, wenn es sinnvoll ist. Wenn Ihre Anwendung beispielsweise eine Bildergalerie ist, können Sie mithilfe der Richtlinie maximum-downscaling-image 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. Andererseits kann die Feature-Richtlinie eine gute Möglichkeit sein, um sicherzustellen, dass auf Ihren Seiten niemals diese schrecklichen APIs verwendet werden.

Soll ich die Funktionsrichtlinie in der Entwicklung oder in der Produktion verwenden?

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 in Arbeit. Ähnlich wie Websites können dem Erhalt von Berichten über CSP-Verstöße oder Einstellungsmöglichkeiten zustimmen, können Sie auch Berichte über Verstöße gegen Feature-Richtlinien 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 findest du unter dem Attribut allow 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?

Unter caniuse.com finden Sie aktuelle Informationen zur Browserunterstützung.

Derzeit ist Chrome der einzige Browser, der die Funktion unterstützt. Da jedoch die gesamte API-Oberfläche aktiviert werden kann oder Funktionen erkannt werden können, eignet sich die Funktionsrichtlinie sehr gut für schrittweise Verbesserungen.

Fazit

Die Funktionsrichtlinie kann dazu beitragen, einen gut beleuchteten Weg zu einer besseren Nutzererfahrung und guten Leistung zu bieten. 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: