Wprowadzenie do zasad dotyczących funkcji

Podsumowanie

Zasada funkcji umożliwia programistom stron internetowych selektywne włączanie, wyłączanie i modyfikowanie działania określonych interfejsów API i funkcji internetowych w przeglądarce. To coś jak CSP, ale to nie kontrola nad zabezpieczeniami, ale kontrola nad funkcjami.

Same zasady dotyczące funkcji to krótkie umowy pomiędzy deweloperem a przeglądarką, które pomagają nam realizować nasze cele związane z tworzeniem (i utrzymywaniem) wysokiej jakości aplikacji internetowych.

Wstęp

Tworzenie witryn internetowych to skala przygoda. Nie jest łatwo stworzyć najwyższej klasy aplikację internetową, która odznacza się skutecznością i wykorzysta z najnowszych sprawdzonych metod. Jeszcze trudniej jest utrzymać świetne wrażenia. Wraz z rozwojem projektu dochodzą do niego programiści, pojawiają się nowe funkcje, a baza kodu rośnie. Wspaniała optymalizacja TM może zacząć się pogorszyć, a wrażenia użytkowników zaczną na tym polegać. Zasady dotyczące funkcji pomogą Ci być na bieżąco.

Zasady dotyczące funkcji pozwalają wyrazić zgodę na zastosowanie zestawu „zasad” dla przeglądarki, które mają egzekwować określone funkcje używane w witrynie. Zasady te ograniczają dostęp do interfejsów API witryny oraz modyfikują domyślne działanie przeglądarki w przypadku określonych funkcji.

Oto przykłady tego, co można zrobić za pomocą zasad dotyczących funkcji:

  • Zmień domyślne działanie parametru autoplay w przypadku filmów na urządzenia mobilne i filmów innych firm.
  • Nie zezwalaj witrynie na korzystanie z poufnych interfejsów API, takich jak camera lub microphone.
  • Zezwalaj w elementach iframe na korzystanie z interfejsu API fullscreen.
  • Zablokuj używanie nieaktualnych interfejsów API, takich jak synchroniczne interfejsy XHR i document.write().
  • Zadbaj o to, by obrazy miały odpowiedni rozmiar (np. nie łamały rozkładu stron) i nie były za duże w odniesieniu do widocznego obszaru (np. nie zmniejszają przepustowości łącza użytkownika).

Zasady to umowa między deweloperem a przeglądarką. Informują one przeglądarkę o intencjach dewelopera i pomagają nam zachować uczciwość w sytuacjach, gdy aplikacja próbuje zniechęcić użytkowników do działania. Jeśli witryna lub umieszczone treści innych firm usiłują naruszyć którąkolwiek z wcześniej wybranych reguł dewelopera, przeglądarka zastępuje to działanie, zwiększając w ten sposób wygodę użytkowników, lub całkowicie blokuje interfejs API.

Korzystanie z zasad dotyczących funkcji

Zasada funkcji zapewnia 2 sposoby kontrolowania funkcji:

  1. Przez nagłówek HTTP Feature-Policy.
  2. Z atrybutem allow w elementach iframe.

Najłatwiejszym sposobem korzystania z zasad funkcji jest wysłanie nagłówka HTTP Feature-Policy z odpowiedzią strony. Wartość tego nagłówka to zasada lub zestaw zasad, które przeglądarka ma respektować dla danego źródła:

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

Lista dozwolonych źródeł może mieć kilka różnych wartości:

  • *: ta funkcja jest dozwolona w kontekstach przeglądania najwyższego poziomu oraz w zagnieżdżonych kontekstach przeglądania (elementy iframe).
  • 'self': ta funkcja jest dozwolona w kontekstach przeglądania najwyższego poziomu i w zagnieżdżonych kontekstach przeglądania z tego samego źródła. Jest on niedozwolony w dokumentach z innych domen w zagnieżdżonych kontekstach przeglądania.
  • 'none': ta funkcja jest niedozwolona w kontekstach przeglądania najwyższego poziomu, a w zagnieżdżonych kontekstach przeglądania.
  • <origin(s)>: konkretne źródła, dla których chcesz włączyć zasadę (np. https://example.com).

Przykład

Załóżmy, że chcesz zablokować wszystkim treściom w swojej witrynie dostęp do interfejsu Geolocation API. Aby to zrobić, wyślij ścisłą listę dozwolonych wartości 'none' dla funkcji geolocation:

Feature-Policy: geolocation 'none'

Jeśli fragment kodu lub element iframe próbuje użyć interfejsu Geolocation API, przeglądarka go blokuje. Jest tak nawet wtedy, gdy użytkownik wyraził wcześniej zgodę na udostępnianie swojej lokalizacji.

Naruszenie ustawionej zasady geolokalizacji
Naruszanie ustawionej zasady geolokalizacji.

W innych przypadkach warto nieco złagodzić tę zasadę. Możemy zezwolić na korzystanie z interfejsu Geolocation API przez nasze własne źródło, ale zablokować dostęp do niego treści osób trzecich, ustawiając element 'self' na liście dozwolonych:

Feature-Policy: geolocation 'self'

Atrybut elementu iframe allow

Drugim sposobem korzystania z zasad dotyczących funkcji jest kontrolowanie treści w iframe. Użyj atrybutu allow, aby określić listę zasad dotyczących umieszczonej treści:

<!-- 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 istniejącymi atrybutami iframe?

Niektóre funkcje kontrolowane przez zasady dotyczące funkcji mają atrybuty, które kontrolują ich działanie. Na przykład <iframe allowfullscreen> to atrybut, który pozwala zawartość elementów iframe na korzystanie z interfejsu API HTMLElement.requestFullscreen(). Dostępne są też atrybuty allowpaymentrequest i allowusermedia, które umożliwiają zezwolenie na interfejs Payment Request API i getUserMedia().

W miarę możliwości używaj atrybutu allow zamiast starych atrybutów. Nie ma potrzeby, aby można było korzystać z zgodności wstecznej za pomocą atrybutu allow z odpowiadającym mu atrybutem w starszej wersji (np. <iframe allowfullscreen allow="fullscreen">). Pamiętaj, że wygrywa bardziej restrykcyjna zasada. Na przykład ten iframe nie mógłby wejść na pełny ekran, ponieważ właściwość allow="fullscreen 'none'" jest bardziej restrykcyjna niż allowfullscreen:

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

Kontrolowanie wielu zasad jednocześnie

Możesz sterować kilkoma funkcjami jednocześnie, wysyłając nagłówek HTTP z listą dyrektyw zasad rozdzielonych ;:

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

lub wysyłając osobny nagłówek dla każdej zasady:

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

W tym przykładzie ma to miejsce:

  • Nie zezwala na używanie unsized-media we wszystkich kontekstach przeglądania.
  • Nie zezwala na używanie geolocation we wszystkich kontekstach przeglądania z wyjątkiem pierwotnego źródła strony i elementu https://example.com.
  • Zezwala na dostęp camera we wszystkich kontekstach przeglądania.

Przykład – ustawianie wielu zasad w elemencie 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

Chociaż w Chrome 60 dodaliśmy obsługę nagłówka HTTP Feature-Policy i atrybutu allow w elementach iframe, w Chrome 74 dodaliśmy interfejs JavaScript API.

Ten interfejs API pozwala kodowi po stronie klienta określać, które funkcje są dozwolone przez stronę, ramkę lub przeglądarkę. Bonusy znajdziesz w sekcji document.featurePolicy dla dokumentu głównego lub frame.featurePolicy w przypadku elementów iframe.

Przykład

Przykład poniżej pokazuje rezultaty przesłania zasady 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 sterować za pomocą zasad dotyczących funkcji?

W tej chwili trudno jest dokumentować, jakie zasady są wdrożone i jak z nich korzystać. Z czasem lista będzie się wydłużać w miarę, jak różne przeglądarki wdrażają specyfikację i wdrażają różne zasady. Zasady dotyczące funkcji będą się zmieniać, i konieczne będą dobre dokumenty referencyjne.

Obecnie istnieje kilka sposobów sprawdzenia, którymi funkcjami można sterować.

  • Zapoznaj się z wersjami demonstracyjnymi Zasad dotyczących zlewu. Znajdziesz w nim przykłady wszystkich zasad wdrożonych w Blink.
  • Listę nazw funkcji znajdziesz w źródle źródłowym Chrome.
  • Wyślij zapytanie document.featurePolicy.allowedFeatures() na about:blank, aby znaleźć listę:
        ["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 ramach Blink.

Aby dowiedzieć się, jak używać niektórych z tych zasad, przejrzyj repozytorium na GitHubie dotyczące specyfikacji. Zawiera on kilka wyjaśnień dotyczących niektórych zasad.

Najczęstsze pytania

Kiedy korzystam z zasad dotyczących funkcji?

Wszystkie zasady wymagają akceptacji, więc korzystaj z Zasad funkcji, gdy ma to sens. Jeśli na przykład aplikacja jest galerią obrazów, zasada maximum-downscaling-image pozwoli uniknąć wysyłania dużych obrazów do widocznych na urządzeniach mobilnych.

Innych zasad, takich jak document-write czy sync-xhr, należy używać z większą ostrożnością. Włączenie ich może zakłócić działanie treści zewnętrznych, na przykład reklam. Z drugiej strony polityka funkcji pozwala się upewnić, że Twoje strony nigdy nie korzystają z tych okropnych interfejsów API.

Czy korzystam z zasad dotyczących funkcji w fazie tworzenia lub produkcji?

Oba rodzaje. Zalecamy włączenie zasad na etapie tworzenia i utrzymanie ich aktywności podczas produkcji. Włączenie zasad na etapie programowania może pomóc Ci wyjść na właściwe tory. Pomoże Ci to wychwycić nieoczekiwane nieprawidłowości, zanim wystąpią. Pozostaw włączone zasady w wersji produkcyjnej, aby zagwarantować użytkownikom określony komfort.

Czy mogę zgłaszać naruszenia zasad na moim serwerze?

Pracujemy nad interfejsem API do raportowania. Podobnie jak w przypadku witryn, które mogą wyrazić zgodę na otrzymywanie raportów o naruszeniach zasad dotyczących CSP lub wycofaniu, również możesz otrzymywać raporty o naruszeniach zasad dotyczących funkcji w ogóle.

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

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

Elementy iframe dziedziczą zasady strony nadrzędnej. Jeśli iframe ma atrybut allow, wygrywa bardziej rygorystyczna zasada między stroną nadrzędną a listą allow. Więcej informacji o wykorzystaniu elementu iframe znajdziesz w artykule Atrybut allow w elementach iframe.

Nie. Czas obowiązywania zasady dotyczy tylko odpowiedzi na jedną stronę. Jeśli użytkownik przejdzie na nową stronę, w nowej odpowiedzi musi być 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 na temat obsługi przeglądarek znajdziesz na caniuse.com.

Obecnie Chrome jest jedyną przeglądarką, która obsługuje zasady dotyczące funkcji. Ponieważ jednak cała powierzchnia interfejsu API jest opcjonalna lub wykrywalna w niej funkcje, zasady dotyczące funkcji dobrze się sprawdzają w stopniowym udoskonalaniu.

Podsumowanie

Zasada funkcji może pomóc w opracowaniu dobrze oświetlonej ścieżki prowadzącej do lepszych wrażeń użytkownika i większej skuteczności. Jest to szczególnie przydatne przy tworzeniu lub utrzymywaniu aplikacji, ponieważ pozwala uniknąć włamań do bazy kodu.

Dodatkowe materiały: