Einführung in die Richtlinie für Funktionen

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 oder microphone 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:

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

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">
</ph> Verstoß gegen die festgelegte Richtlinie für die Standortbestimmung
Verstoß gegen die festgelegte Richtlinie für die Standortbestimmung.

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 und https://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() am about: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.

iframes ü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.

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: