Zusammenfassung
Funktionsrichtlinien ermöglichen es Webentwicklern, das Verhalten bestimmter APIs und Webfunktionen im Browser zu ändern. Die CSP, aber statt die Sicherheit zu kontrollieren, Steuerungsfunktionen!
Die Funktionsrichtlinien selbst sind kleine Opt-in-Vereinbarungen zwischen Entwicklern. und Browser, die dazu beitragen können, qualitativ hochwertige qualitativ hochwertiger Web-Apps.
Einführung
Das Erstellen eines Webs ist ein schwieriges Abenteuer. Es ist schwer genug, eine erstklassige Web-App, die eine hervorragende Leistung bietet und die neuesten Best Practices umsetzt. Es ist sogar ist es immer schwieriger, dies zu verbessern. Wenn sich Ihr Projekt weiterentwickelt, und neue Funktionen hinzukommen und die Codebasis wächst. Das Die Erfahrung, die Sie einmal erreicht haben, kann sich verschlechtern und die Nutzererfahrung beginnt zu leiden! Die Funktionsrichtlinie soll Sie dabei unterstützen, den Überblick zu behalten.
Mit der Funktionsrichtlinie aktivieren Sie eine Reihe von Richtlinien, die der Browser bestimmte Funktionen auf Ihrer Website durchzusetzen. Diese Richtlinien beschränken auf welche APIs die Website zugreifen oder das Standardverhalten des Browsers ändern kann bestimmte Funktionen.
Hier sind einige Beispiele für die Möglichkeiten, die Ihnen die Funktionsrichtlinie bietet:
- Standardverhalten ändern
von
autoplay
für Mobilgeräte 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 z.B. Layout-Flachen) und zu groß für den Darstellungsbereich (vergeudet z.B. die Bandbreite des Nutzers).
Richtlinien sind ein Vertrag zwischen Entwickler und Browser. Sie informieren die was die Absichten des Entwicklers sind. unsere App aus dem Verkehr zu ziehen und etwas Schlimmes zu tun. Wenn die Website oder eingebettete versucht der Entwickler, überschreibt der Browser das Verhalten mit einer besseren Benutzeroberfläche oder blockiert die API gesprochen.
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 Funktionsrichtlinie verwenden, indem das HTTP-Protokoll Feature-Policy
gesendet wird
-Header mit der Antwort einer Seite zurück. Der Wert dieses Headers ist eine Richtlinie oder festgelegt
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 im Browserkontext auf oberster Ebene und in verschachtelten Browserkontexte (iFrames)'self'
: Die Funktion ist in Browserkontexten der obersten Ebene zulässig und verschachtelte Browserkontexte am selben Ursprung. In ursprungsübergreifenden Elementen ist es nicht zulässig. in verschachtelten Browserkontexten.'none'
: Die Funktion ist in Browserkontexten auf oberster Ebene nicht zulässig. ist 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
Nehmen wir an, Sie möchten für alle Inhalte verhindern, dass
die Geolocation API auf Ihrer Website nutzen. Senden Sie dazu einen strikten
Zulassungsliste von 'none'
für die Funktion geolocation
:
Feature-Policy: geolocation 'none'
Wenn ein Code oder iFrame versucht, die Geolocation API zu verwenden, wird vom Browser blockiert. Dies gilt auch dann, wenn der Nutzer Berechtigung, seinen Standort zu teilen.
<ph type="x-smartling-placeholder">![Verstoß gegen die festgelegte Richtlinie für die Standortbestimmung](https://developer.chrome.com/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=9&hl=de)
In anderen Fällen kann es sinnvoll sein, diese Richtlinie etwas zu lockern. Wir können erlauben,
die Geolocation API zu nutzen, aber zu verhindern, dass
indem du 'self'
in der Zulassungsliste festlegst:
Feature-Policy: geolocation 'self'
Das iFrame-Attribut allow
Die zweite Möglichkeit zur Verwendung der Funktionsrichtlinie ist die Steuerung von Inhalten in
ein iframe
. Verwenden Sie das Attribut allow
, um eine Richtlinienliste für
eingebetteten Inhalt:
<!-- 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?
Für einige der von der Funktionsrichtlinie gesteuerten Funktionen ist bereits ein
um ihr Verhalten zu steuern. Beispiel: <iframe allowfullscreen>
ist ein Attribut, das es für iFrame-Content ermöglicht,
HTMLElement.requestFullscreen()
API verwenden. Es gibt auch die allowpaymentrequest
und
allowusermedia
-Attribute für die Verwendung von
Payment Request API und getUserMedia()
.
Versuchen Sie, das allow
-Attribut anstelle der bisherigen zu verwenden.
Attribute enthalten. Für Fälle, in denen eine Rückwärtsbewegung
Kompatibilität durch Verwendung des Attributs allow
mit einem äquivalenten Legacy-Attribut
vollkommen in Ordnung ist (z.B. <iframe allowfullscreen allow="fullscreen">
).
Die restriktivere Richtlinie hat Vorrang. Beispiel:
iFrame nicht in den Vollbildmodus wechseln dürfen,
allow="fullscreen 'none'"
ist restriktiver als allowfullscreen
:
<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>
Mehrere Richtlinien gleichzeitig steuern
Durch Senden des HTTP-Headers können mehrere Funktionen gleichzeitig gesteuert werden.
mit einer durch ;
getrennten Liste von Richtlinienanweisungen:
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 mit Ausnahme des den eigenen Ursprung undhttps://example.com
der Seite. - 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
In Chrome 60 werden der HTTP-Header Feature-Policy
und der
allow
-Attribut in iFrames verwenden, wurde in Chrome 74 die JavaScript API hinzugefügt.
Mit dieser API kann clientseitiger Code ermittelt werden, welche Funktionen von einem
eine Seite, einen Frame oder einen Browser. Du findest die Extras unter
document.featurePolicy
für das Hauptdokument oder frame.featurePolicy
für
iFrames.
Beispiel
Das Beispiel unten zeigt die Ergebnisse, wenn eine Richtlinie gesendet wird:
Feature-Policy: geolocation 'self'
auf der Website https://example.com
:
/* @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 dokumentiert, welche Richtlinien implementiert wurden. und wie sie verwendet werden. Die Liste wächst auch im Laufe der Zeit, je nachdem, die Spezifikation zu übernehmen und verschiedene Richtlinien zu implementieren. Die Funktionsrichtlinie wird verschoben und gute Referenzdokumente benötigen.
Im Moment gibt es mehrere Möglichkeiten, herauszufinden, welche Funktionen steuerbar sind.
- Demos zu Feature Policy Kitchen Sink Enthält Beispiele jeder Richtlinie, die in Blink implementiert ist.
- Prüfen Sie die 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",
...
- Suchen Sie unter chromestatus.com nach Richtlinien, die bereits implementiert oder in Blink berücksichtigt werden.
Informationen zur Verwendung einiger dieser Richtlinien finden Sie in der GitHub-Repository der Spezifikation. Sie enthält Erläuterungen zu einigen der Richtlinien.
FAQ
Wann verwende ich die Funktionsrichtlinie?
Alle Richtlinien sind Opt-in. Verwenden Sie die Funktionsrichtlinie also immer dann, wenn dies sinnvoll ist. Für
Wenn es sich bei deiner App beispielsweise um eine Bildergalerie handelt, gibt das Feld maximum-downscaling-image
verhindern, dass riesige Bilder an mobile Darstellungsbereiche gesendet werden.
Andere Richtlinien wie document-write
und sync-xhr
sollten mit weiteren Richtlinien verwendet werden
. Wenn Sie sie aktivieren, funktionieren Inhalte von Drittanbietern wie Anzeigen möglicherweise nicht mehr. Am
Mit den Funktionsrichtlinien können Sie überprüfen, ob Ihre Seiten
diese schrecklichen APIs nie verwendet!
Soll ich die Funktionsrichtlinie in der Entwicklung oder in der Produktion verwenden?
Beides. Wir empfehlen, Richtlinien während der Entwicklung zu aktivieren und die Richtlinien, die während der Produktion aktiv sind. Das Aktivieren von Richtlinien während der Entwicklung kann damit Sie den richtigen Weg einschlagen können. Es wird Ihnen helfen, unerwartete bevor sie eintreten. Richtlinien in der Produktionsumgebung aktiviert lassen um den Nutzenden eine bestimmte UX zu garantieren.
Gibt es eine Möglichkeit, Richtlinienverstöße an meinen Server zu melden?
Reporting API ist in Arbeit! Ähnlich wie Websites, die dem Erhalt von Berichten über CSP-Verstöße oder Veraltet, werden Sie Berichte über Verstöße gegen Funktionsrichtlinien erhalten.
Welche Übernahmeregeln gelten für iFrame-Inhalte?
Für Skripts (entweder Erst- oder Drittanbieter-Skripts) wird die Browserrichtlinie übernommen. Kontext. 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 ist die strengere Richtlinie für die übergeordnete Seite und die allow
Liste, gewinnt. Weitere Informationen zur Nutzung von iframe
finden Sie in der
allow
-Attribut 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 zu einer neuen Seite wechselt, muss der Feature-Policy
-Header explizit
in der neuen Antwort gesendet, damit die Richtlinie angewendet wird.
Welche Browser unterstützen die Funktionsrichtlinie?
Auf caniuse.com findest du die neuesten Informationen zur Browserunterstützung.
Derzeit ist Chrome der einzige Browser, der diese Funktionsrichtlinien unterstützt. Sie können jedoch Da die gesamte API-Oberfläche mit Opt-in oder Erkennung von Funktionen sichtbar ist, ist die Funktionsrichtlinie eignet sich gut für progressive Verbesserung.
Fazit
Die Funktionsrichtlinie kann dazu beitragen, einen gut ausgeleuchteten Weg zu einer besseren Nutzererfahrung und gute Leistung erzielen. Das ist besonders praktisch bei der Entwicklung oder Wartung einer App. da dies dazu beitragen kann, potenzielle Fußangriffe zu vermeiden, 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