Wprowadzenie do zasad dotyczących funkcji

Podsumowanie

Zasady dotyczące funkcji umożliwiają deweloperom internetowym selektywne włączanie, wyłączanie i modyfikowanie działania niektórych interfejsów API oraz funkcji internetowych w przeglądarce. To rozwiązanie podobne do CSP, ale zamiast kontrolować bezpieczeństwo, kontroluje funkcje.

Same zasady dotyczące funkcji to małe umowy między deweloperem a przeglądarką, które mogą pomóc w realizacji naszych celów związanych z tworzeniem i utrzymywaniem wysokiej jakości aplikacji internetowych.

Wprowadzenie

Tworzenie aplikacji internetowych to długa i kręta droga. Trudno jest stworzyć świetną aplikację internetową, która zapewnia wysoką wydajność i wykorzystuje najnowsze sprawdzone metody. Jeszcze trudniej jest utrzymać te wrażenia na wysokim poziomie przez dłuższy czas. W miarę rozwoju projektu dołączają do niego programiści, pojawiają się nowe funkcje, a baza kodu rośnie. Zdobyte doświadczenie „Great Experience TM” może pogarszać się i zmniejszać wygodę użytkowników. Zasady dotyczące funkcji mają na celu zapewnienie Ci wsparcia.

Zasady dotyczące funkcji to opcjonalne „zasady”, które przeglądarka może stosować w przypadku określonych funkcji używanych w witrynie. Te zasady określają, do jakich interfejsów API witryna może uzyskiwać dostęp, lub modyfikować domyślne działanie przeglądarki w przypadku określonych funkcji.

Oto przykłady zasad dotyczących funkcji:

  • Zmień domyślne zachowanie autoplay w przypadku filmów mobilnych i filmów innych firm.
  • Ogranicz możliwość korzystania przez witrynę z interfejsów API o charakterze wrażliwym, takich jak camera lub microphone.
  • Zezwalaj na używanie interfejsu API fullscreen w ramkach iframe.
  • Blokowanie używania przestarzałych interfejsów API, takich jak synchroniczne XHR i document.write().
  • Zadbaj o odpowiednie wymiary obrazów (np. zapobiegaj utracie układu) i nie są zbyt duże w widocznym obszarze (np. nie zużywają przepustowości łącza przez użytkownika).

Zasady to umowa między deweloperem a przeglądarką. Informują one przeglądarkę o zamierze dewelopera, dzięki czemu pomagają nam zachować uczciwość, gdy nasza aplikacja próbuje wymknąć się spod kontroli i zrobić coś złego. Jeśli witryna lub osadzone treści innych firm próbują naruszyć którekolwiek z wstępnie wybranych reguł dewelopera, przeglądarka zastąpi to zachowanie lepszym UX lub całkowicie zablokuje interfejs API.

Korzystanie z zasad dotyczących funkcji

Zasady dotyczące funkcji umożliwiają kontrolowanie funkcji na 2 sposoby:

  1. Za pomocą nagłówka HTTP Feature-Policy.
  2. Za pomocą atrybutu allow w elementach iframe.

Najprostszym sposobem korzystania z Zasad dotyczących funkcji jest wysłanie nagłówka HTTP Feature-Policy w odpowiedzi na żądanie strony. Wartość tego nagłówka to zasada lub zestaw zasad, które przeglądarka ma stosować w przypadku danego źródła:

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

Lista dozwolonych adresów domenowych może zawierać kilka różnych wartości:

  • *: funkcja jest dozwolona w kontekstach przeglądania najwyższego poziomu i w zagnieżdżonych kontekstach przeglądania (iframe).
  • 'self': funkcja jest dozwolona w kontekstach przeglądania najwyższego poziomu i kontekstach przeglądania zagnieżdżonych w tym samym źródle. Jest to niedozwolone w dokumentach z innych domen w zagnieżdżonych kontekstach przeglądania.
  • 'none': funkcja jest niedozwolona w kontekstach przeglądania najwyższego poziomu i niedozwolona w zagnieżdżonych kontekstach przeglądania.
  • <origin(s)>: konkretne źródła, dla których ma zostać włączona zasada (np. https://example.com).

Przykład

Załóżmy, że chcesz zablokować korzystanie z interfejsu API geolokalizacji na wszystkich stronach w swojej witrynie. Możesz to zrobić, wysyłając ścisłą listę dozwolonych adresów 'none' dla funkcji geolocation:

Feature-Policy: geolocation 'none'

Jeśli fragment kodu lub element iframe próbuje użyć interfejsu Geolocation API, przeglądarka blokuje ten interfejs. Tak jest nawet wtedy, gdy użytkownik zezwolił wcześniej na udostępnianie swojej lokalizacji.

Naruszenie zasad dotyczących ustawień lokalizacji geograficznej
Naruszenie ustawionej zasady geolokalizacji.

W innych przypadkach może być sensowne nieco złagodzenie tej zasady. Możemy zezwolić na korzystanie przez nasze własne źródło z interfejsu Geolocation API, ale uniemożliwić treściom osób trzecich dostęp do nich, ustawiając 'self' na liście dozwolonych:

Feature-Policy: geolocation 'self'

Atrybut iframe allow

Drugim sposobem korzystania z zasad funkcji jest kontrolowanie treści w iframe. Użyj atrybutu allow, aby określić listę zasad dla treści umieszczonych w ramach:

<!-- 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>

Co z dotychczasowymi atrybutami iframe?

Niektóre funkcje kontrolowane przez zasady dotyczące funkcji mają już atrybut, który pozwala określić ich działanie. Na przykład atrybut <iframe allowfullscreen> pozwala treści w ramce iframe korzystać z interfejsu API HTMLElement.requestFullscreen(). Istnieją też atrybuty allowpaymentrequest i allowusermedia, które pozwalają odpowiednio korzystać z Payment Request API i getUserMedia().

W miarę możliwości używaj atrybutu allow zamiast tych starych atrybutów. W przypadkach, gdy musisz zapewnić zgodność wsteczną, możesz użyć atrybutu allow z odpowiednim atrybutem starszej wersji (np. <iframe allowfullscreen allow="fullscreen">). Pamiętaj, że obowiązuje bardziej restrykcyjna zasada. Na przykład ten iframe nie może przejść do trybu pełnoekranowego, ponieważallow="fullscreen 'none'" jest bardziej restrykcyjny niż allowfullscreen:

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

Zarządzanie wieloma zasadami jednocześnie

Możesz kontrolować kilka funkcji jednocześnie, wysyłając nagłówek HTTP z listą dyrektyw zasad rozdzieloną znakiem ;:

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

lub wysłanie osobnego nagłówka dla każdej z zasad:

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

W tym przykładzie:

  • Nie zezwala na używanie unsized-media we wszystkich kontekstach przeglądania.
  • Nie zezwala na używanie atrybutu geolocation we wszystkich kontekstach przeglądania oprócz źródła strony i elementu https://example.com.
  • Umożliwia camera dostęp do wszystkich kontekstów przeglądania.

Przykład – ustawienie wielu zasad dla elementu iframe

<!-- 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 Chrome 60 dodano obsługę nagłówka Feature-Policy HTTP i atrybutu allow w ramach ramek iframe, a interfejs JavaScript API został dodany w Chrome 74.

Ten interfejs API pozwala kodowi po stronie klienta określić, które funkcje są dozwolone przez stronę, ramkę lub przeglądarkę. Dostęp do tych funkcji uzyskasz, klikając document.featurePolicy w przypadku dokumentu głównego lub frame.featurePolicy w przypadku ramek iframe.

Przykład

Przykład poniżej pokazuje wyniki wysłania zasad Feature-Policy: geolocation 'self' w witrynie 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"]

Lista zasad

Jakimi funkcjami można więc sterować za pomocą zasad dotyczących funkcji?

Obecnie brakuje dokumentacji dotyczącej wdrożonych zasad i sposobów ich stosowania. Ta lista będzie się też powiększać w miarę, jak różne przeglądarki wdrażają specyfikację i wdrażają różne zasady. Zasady dotyczące funkcji będą się zmieniać, dlatego konieczne będzie korzystanie z dobrych dokumentów referencyjnych.

Istnieją jednak kilka sposobów sprawdzenia, którymi funkcjami można sterować.

  • Zapoznaj się z demo z wielu przykładów funkcji. Zawiera on przykłady każdej zasady zaimplementowanej w Blink.
  • Lista nazw funkcji znajduje się w źródle kodu Chrome.
  • Aby znaleźć listę, wyślij zapytanie document.featurePolicy.allowedFeatures() do tabeli about:blank:
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Na stronie chromestatus.com znajdziesz zasady, które zostały wdrożone lub są rozważane w Blink.

Aby dowiedzieć się, jak korzystać z niektórych z tych zasad, zapoznaj się z specyfikacją repozytorium GitHub. Zawiera on kilka objaśnień dotyczących niektórych zasad.

Najczęstsze pytania

Kiedy należy używać zasad dotyczących funkcji?

Wszystkie zasady są opcjonalne, więc używaj zasad dotyczących funkcji tam, gdzie ma to sens. Jeśli np. Twoja aplikacja jest galerią obrazów, zasady maximum-downscaling-imagepomogą Ci uniknąć wysyłania gigantycznych obrazów do widocznych obszarów na urządzeniach mobilnych.

Inne zasady, takie jak document-write czy sync-xhr, należy stosować z rozwagą. Włączenie ich może spowodować problemy z treściami innych firm, np. reklamami. Z drugiej strony zasady dotyczące funkcji mogą być przydatnym narzędziem, które pomoże Ci sprawdzić, czy Twoje strony nigdy nie używają tych fatalnych interfejsów API.

Czy mogę używać zasad dotyczących funkcji w wersji deweloperskiej czy produkcyjnej?

Obie. Zalecamy włączenie zasad podczas tworzenia aplikacji i utrzymanie ich w wersji produkcyjnej. Włączenie zasad podczas tworzenia aplikacji może pomóc Ci zacząć od razu na właściwej drodze. Pomoże Ci to wykryć nieoczekiwane regresje, zanim się pojawią. Zachowaj włączone zasady w wersji produkcyjnej, aby zapewnić użytkownikom odpowiednią jakość wrażeń.

Czy mogę zgłosić naruszenie zasad na moim serwerze?

Interfejs API do raportowania jest faktyczny. Podobnie jak w przypadku stron, które mogą wyrazić zgodę na otrzymywanie zgłoszeń o naruszeniu zasad CSP lub wycofania, będziesz otrzymywać zgłoszenia o naruszeniu zasad dotyczących funkcji.

Jakie są reguły dziedziczenia treści w elementach iframe?

Skrypty (własne lub innych firm) dziedziczą zasady kontekstu przeglądania. Oznacza to, że skrypty najwyższego poziomu dziedziczą zasady dokumentu głównego.

iframe dziedziczą zasady strony nadrzędnej. Jeśli element iframe ma atrybut allow, zastosowanie mają bardziej rygorystyczne zasady między stroną nadrzędną a listą allow. Więcej informacji o używaniu atrybutu iframe znajdziesz w atrybucie allow w tagach iframe.

Nie. Okres ważności zasad dotyczy odpowiedzi na jedną stronę nawigacji. Jeśli użytkownik przejdzie na nową stronę, w nowej odpowiedzi musi zostać wyraźnie wysłany nagłówek Feature-Policy, aby zasada została zastosowana.

Które przeglądarki obsługują zasady dotyczące funkcji?

Najnowsze informacje o obsługiwanych przeglądarkach znajdziesz na stronie caniuse.com.

Obecnie Chrome jest jedyną przeglądarką, która obsługuje zasady dotyczące funkcji. Ponieważ jednak cały interfejs API jest dostępny po wyrażeniu zgody lub po wykryciu funkcji, zasady dotyczące funkcji dobrze sprawdzają się w przypadku stopniowego ulepszania.

Podsumowanie

Zasady dotyczące funkcji mogą zapewnić dobrze oświetloną ścieżkę w kierunku lepszego UX i dobrej wydajności. Jest to szczególnie przydatne podczas tworzenia i utrzymywania aplikacji, ponieważ pozwala uniknąć potencjalnych błędów w kodzie źródłowym.

Dodatkowe materiały: