Zusammenfassung
Mit einer Funktionsrichtlinie können Webentwickler bestimmte APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren und ändern. Sie ähnelt einem CSP, steuert jedoch nicht die Sicherheit, sondern Features!
Die Funktionsrichtlinien selbst sind kleine Opt-in-Vereinbarungen zwischen Entwickler und Browser, die dazu beitragen können, qualitativ hochwertige Webanwendungen zu entwickeln (und zu pflegen).
Einleitung
Das Erstellen eines Webs ist ein schwieriges Abenteuer. Es ist schon schwer genug, eine erstklassige Webanwendung zu erstellen, die zu einer hohen Leistung führt und die neuesten Best Practices umsetzt. Es ist noch schwieriger, diese Erfahrung mit der Zeit aufrechtzuerhalten. Wenn sich Ihr Projekt weiterentwickelt, werden neue Funktionen hinzukommen und die Codebasis wächst. Die Erfahrung, die Sie einmal erreicht haben, kann sich verschlechtern und die Nutzerfreundlichkeit wird stark leiden. Die Funktionsrichtlinie soll Sie dabei unterstützen, den Überblick zu behalten.
Mit der Funktionsrichtlinie aktivieren Sie eine Reihe von „Richtlinien“ für den Browser, um bestimmte Funktionen auf Ihrer Website durchzusetzen. Diese Richtlinien beschränken, auf welche APIs die Website zugreifen kann. Außerdem wird das Standardverhalten des Browsers für bestimmte Funktionen geändert.
Hier sind einige Beispiele für die Möglichkeiten, die Ihnen die Funktionsrichtlinie bietet:
- Ändere das Standardverhalten von
autoplay
für mobile Videos und Videos von Drittanbietern. - Eine Website daran hindern, sensible APIs wie
camera
odermicrophone
zu verwenden. - Zulassen, dass iFrames die
fullscreen
API verwenden. - Verwendung veralteter APIs wie synchroner XHR und
document.write()
blockieren. - Achten Sie darauf, dass die Bilder die richtige Größe haben (verhindern Sie ein Layout-Flachen) und nicht zu groß für den Darstellungsbereich, z. B. um Bandbreite 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 Nutzererfahrung oder blockiert die API vollständig.
Funktionsrichtlinie verwenden
Die Funktionsrichtlinie bietet zwei Möglichkeiten zur Steuerung von Funktionen:
- Über den HTTP-Header
Feature-Policy
. - Mit dem Attribut
allow
in iFrames.
Der Feature-Policy
-HTTP-Header
Am einfachsten lässt sich die Feature-Richtlinie nutzen, indem der HTTP-Header Feature-Policy
mit der Antwort einer Seite gesendet wird. Der Wert dieses Headers ist eine Richtlinie oder eine Gruppe von Richtlinien, die der Browser für einen bestimmten Ursprung berücksichtigen soll:
Feature-Policy: <feature> <allow list origin(s)>
Die Zulassungsliste für den Ursprungsserver kann verschiedene Werte annehmen:
*
: Die Funktion ist in Browserkontexten auf oberster Ebene und in verschachtelten Browserkontexten (iFrames) zulässig.'self'
: Die Funktion ist in Browserkontexten auf oberster 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 verhindern, dass die Geolocation API für alle Inhalte auf Ihrer Website verwendet wird. Senden Sie dazu eine strikte Zulassungsliste von 'none'
für die Funktion geolocation
:
Feature-Policy: geolocation 'none'
Wenn ein Code oder iFrame versucht, die Geolocation API zu verwenden, wird sie vom Browser blockiert. Dies gilt auch dann, wenn der Nutzer zuvor die Berechtigung zur Freigabe seines Standorts erteilt hat.
![Verstoß gegen die festgelegte Richtlinie für die Standortbestimmung](https://developer.chrome.com/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=6&hl=de)
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 verhindern, dass Drittanbieterinhalte darauf zugreifen. Dazu legen wir 'self'
in der Zulassungsliste fest:
Feature-Policy: geolocation 'self'
Das iFrame-Attribut allow
Die zweite Möglichkeit zur Verwendung der Funktionsrichtlinie ist die Steuerung von Inhalten innerhalb eines iframe
. 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 geschieht mit den vorhandenen iFrame-Attributen?
Einige der von der Feature-Richtlinie gesteuerten Funktionen haben ein vorhandenes Attribut, mit dem ihr Verhalten gesteuert wird. 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
, um die Payment Request API bzw. getUserMedia()
zuzulassen.
Versuchen Sie nach Möglichkeit, das Attribut allow
anstelle der alten Attribute zu verwenden. 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. 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
Sie können mehrere Funktionen gleichzeitig steuern, indem Sie den HTTP-Header mit einer durch ;
getrennten Liste von Richtlinienanweisungen senden:
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
oder durch Senden eines separaten Headers für jede Richtlinie:
Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;
In diesem Beispiel würden Sie so vorgehen:
- Verhindert die Verwendung von
unsized-media
für alle Browserkontexte. - Verhindert die Verwendung von
geolocation
für alle Browserkontexte, außer für den eigenen Ursprung der Seite undhttps://example.com
. - Erlaubt
camera
den Zugriff für alle Browserkontexte.
Beispiel – Mehrere Richtlinien für einen iFrame einrichten
<!-- Blocks the iframe from using the camera and microphone
(if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>
JavaScript API
Während Chrome 60 den HTTP-Header Feature-Policy
und das Attribut allow
in iFrames unterstützt, wurde in Chrome 74 die JavaScript API 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 zugehörigen Extras unter document.featurePolicy
für das Hauptdokument oder unter frame.featurePolicy
für iFrames zugreifen.
Beispiel
Das folgende Beispiel veranschaulicht die Ergebnisse, wenn die Richtlinie Feature-Policy: geolocation 'self'
auf der 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 Funktionsrichtlinie gesteuert werden?
Derzeit ist nicht ausreichend dokumentiert, welche Richtlinien implementiert und wie sie verwendet werden. Die Liste wird mit der Zeit erweitert, da verschiedene Browser die Spezifikation übernehmen und verschiedene Richtlinien implementieren. Die Funktionsrichtlinie wird sich ändern und auf jeden Fall nützliche Referenzdokumente erforderlich sein.
Im Moment gibt es mehrere Möglichkeiten, herauszufinden, welche Funktionen steuerbar sind.
- Demos zu Feature Policy Kitchen Sink Sie 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()
amabout:blank
ab, um die Liste zu finden:
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- Unter chromestatus.com findest du die Richtlinien, die implementiert wurden oder in Blink berücksichtigt werden.
Informationen zur Verwendung einiger dieser Richtlinien finden Sie im GitHub-Repository der Spezifikation. Sie enthält Erläuterungen zu einigen der Richtlinien.
Häufig gestellte Fragen
Wann verwende ich die Funktionsrichtlinie?
Alle Richtlinien sind Opt-in. Verwenden Sie die Funktionsrichtlinie also immer dann, wenn dies sinnvoll ist. Wenn Ihre Anwendung beispielsweise eine Bildergalerie ist, können Sie mithilfe der Richtlinie maximum-downscaling-image
vermeiden, gigantische Bilder an mobile Darstellungsbereiche zu senden.
Andere Richtlinien wie document-write
und sync-xhr
sollten mit größerer Sorgfalt verwendet werden. Wenn Sie sie aktivieren, funktionieren Inhalte von Drittanbietern wie Anzeigen möglicherweise nicht mehr. Andererseits kannst du mit den Funktionsrichtlinien dafür sorgen, dass auf deinen Seiten nie diese schlechten APIs verwendet werden.
Soll ich die Funktionsrichtlinie in der Entwicklung oder in der Produktion verwenden?
Beides. Wir empfehlen, Richtlinien während der Entwicklung zu aktivieren und während der Produktion aktiv zu lassen. Wenn Sie Richtlinien während der Entwicklung aktivieren, können Sie leichter von vorn anfangen. Es wird Ihnen helfen, unerwartete Regressionen zu erkennen, bevor sie auftreten. Lassen Sie die Richtlinien in der Produktionsumgebung aktiviert, um eine bestimmte UX für die Nutzenden zu gewährleisten.
Gibt es eine Möglichkeit, Richtlinienverstöße an meinen Server zu melden?
Wir arbeiten an einer Reporting API in Arbeit. Ähnlich wie Websites, die den Erhalt von Berichten über CSP-Verstöße oder Einstellungsmöglichkeiten aktivieren können, können Sie auch Berichte über Verstöße gegen Feature-Richtlinien erhalten.
Welche Übernahmeregeln gelten für iFrame-Inhalte?
Sowohl Erst- als auch Drittanbieter-Skripts übernehmen die Richtlinie des jeweiligen Browserkontexts. Das bedeutet, dass Skripts der obersten Ebene die Richtlinien des Hauptdokuments übernehmen.
iframe
s übernehmen die Richtlinien der ü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
findest du unter dem Attribut allow
in iFrames.
Wenn ich eine Richtlinie anwende, gilt sie dann für alle Seitennavigationen?
Nein. Die Lebensdauer einer Richtlinie gilt für eine Navigationsantwort auf einer einzelnen Seite. 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 aktuelle Informationen zur Browserunterstützung.
Derzeit ist Chrome der einzige Browser, der diese Funktionsrichtlinien 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 bei der Entwicklung oder Wartung einer App hilfreich, da potenzielle Schwachstellen vermieden werden können, bevor sie sich in Ihre Codebasis schleichen.
Weitere Informationen:
- Erläuterung der Funktionsrichtlinien
- Spezifikation der Funktionsrichtlinie
- Demos zu Küchenspülen
- Funktionsrichtlinien-Entwicklertools-Erweiterung – Tester zum Ausprobieren von Funktionsrichtlinien auf einer Seite.
- chromestatus.com-Einträge