Wprowadzenie do zasad dotyczących funkcji

Podsumowanie

Zasady dotyczące funkcji pozwalają programistom stron internetowych na selektywne włączanie, wyłączanie i modyfikowanie działania określonych interfejsów API i funkcji internetowych w przeglądarce. Działanie przypomina CSP, ale zamiast kontrolować bezpieczeństwo, kontroluje funkcje.

Same zasady dotyczące funkcji to niewielkie umowy o wyrażenie zgody między deweloperem a przeglądarką, które mogą pomóc nam osiągać cele, które polegają na tworzeniu (i utrzymywaniu) wysokiej jakości aplikacji internetowych.

Wstęp

Tworzenie stron dla internetu to ciężka przygoda. Nie jest łatwo stworzyć doskonałą aplikację internetową, która będzie działać na najwyższych obrotach i korzystać z najnowszych sprawdzonych metod. Jeszcze trudniej jest zadbać o to, by z upływem czasu działało jak najlepiej. Wraz z rozwojem projektu deweloperzy dołączają do programu, pojawiają się nowe funkcje, a baza kodu się powiększa. Zdobyte doświadczenie „Great Experience TM” może pogorszyć się, a wrażenia użytkowników zaczną ucierpieć. Zasady dotyczące funkcji zostały opracowane, aby pomóc Ci na bieżąco.

Dzięki zasadom funkcji wybierasz zestaw „zasad”, które spowodują, że przeglądarka będzie stosować określone funkcje używane w całej witrynie. Te zasady określają, do jakich interfejsów API witryna ma 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 działanie autoplay w przypadku filmów na urządzenia mobilne i filmów innych firm.
  • Ogranicz witrynie możliwość używania poufnych interfejsów API, takich jak camera lub microphone.
  • Zezwalaj elementom iframe na używanie interfejsu API fullscreen.
  • Blokuj używanie nieaktualnych 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 zamiarach dewelopera i pomagają nam zachować uczciwość, gdy nasza aplikacja próbuje działać nieprawidłowo. Jeśli witryna lub umieszczone w niej treści innej firmy próbują naruszyć którąkolwiek z wstępnie wybranych reguł dewelopera, przeglądarka zastępuje to działanie, zapewniając lepszy interfejs, lub całkowicie blokuje interfejs API.

Korzystanie z zasad dotyczących funkcji

Zasady dotyczące funkcji zapewniają kontrolę nad funkcjami na 2 sposoby:

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

Najłatwiejszym sposobem korzystania z zasad funkcji jest wysłanie nagłówka HTTP Feature-Policy z odpowiedzią strony. Wartością tego nagłówka jest 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 źródeł może mieć kilka różnych wartości:

  • *: ta funkcja jest dozwolona w kontekstach przeglądania najwyższego poziomu i w zagnieżdżonych kontekstach przeglądania (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. Nie jest ona dozwolona w dokumentach z innych domen w zagnieżdżonych kontekstach przeglądania.
  • 'none': ta 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ć wszystkim treściom możliwość używania interfejsu Geolocation API w swojej witrynie. Aby to zrobić, wyślij rygorystyczną 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 blokuje ten interfejs. Jest tak nawet wtedy, gdy użytkownik zezwolił wcześniej na udostępnianie swojej lokalizacji.

Naruszenie ustawionej zasady geolokalizacji
Naruszenie ustawionej zasady geolokalizacji.

W innych przypadkach warto nieco złagodzić te 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 umieszczonych 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 dotychczasowymi atrybutami iframe?

Niektóre funkcje kontrolowane przez zasady dotyczące funkcji mają atrybut, który umożliwia ich kontrolowanie. Na przykład <iframe allowfullscreen> to atrybut, który zezwala treściom iframe na korzystanie 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 staraj się używać atrybutu allow zamiast starych atrybutów. W przypadkach, w których musisz obsługiwać zgodność wsteczną, użyj atrybutu allow z odpowiednim atrybutem w starszym atrybucie (np. <iframe allowfullscreen allow="fullscreen">). Pamiętaj tylko, że wygrywa bardziej restrykcyjna zasada. Na przykład ten element iframe nie może włączyć pełnego ekranu, ponieważ parametr allow="fullscreen 'none'" jest bardziej restrykcyjny niż allowfullscreen:

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

Kontrolowanie wielu zasad jednocześnie

Kilka funkcji można kontrolować jednocześnie, wysyłając nagłówek HTTP z oddzielną listą dyrektyw zasad oddzielonych ;:

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 *;

Ten przykład wyglądałby tak:

  • 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.
  • Zezwala na dostęp usłudze 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

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

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

Przykład

Przykład poniżej pokazuje wyniki wysł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

Którymi 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ą ruchomym celem, więc na pewno będą potrzebne dobre dokumenty referencyjne.

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

        ["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 używać niektórych z tych zasad, zajrzyj do repozytorium GitHub specyfikacji. Zamieściliśmy w nim kilka objaśnień dotyczących niektórych zasad.

Najczęstsze pytania

Kiedy 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 na przykład Twoja aplikacja to galeria obrazów, zasada maximum-downscaling-image pozwoli 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 zakłócić działanie treści osób trzecich, takich jak reklamy. Z drugiej strony możesz dobrze sprawdzić zasady, aby mieć pewność, że Twoje strony nigdy nie będą używać tych strasznych interfejsów API.

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

Obie możliwości. Zalecamy włączanie zasad na etapie tworzenia i zachowanie ich aktywności na etapie produkcji. Włączenie zasad w trakcie programowania może ułatwić Ci rozpoczęcie pracy. Pomoże Ci to wykrywać nieoczekiwane regresje, zanim nastąpią. Pozostaw zasady włączone w wersji produkcyjnej, aby zagwarantować użytkownikom określone UX.

Czy istnieje sposób zgłaszania naruszeń zasad na moim serwerze?

Interfejs API do raportowania jest faktyczny. Tak samo jak w przypadku witryn mogących wyrazić zgodę na otrzymywanie raportów o naruszeniach zasad CSP lub wycofaniu, Ty możesz też otrzymywać raporty o naruszeniach zasad dotyczących funkcji bez dostępu do internetu.

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

Skrypty (własne lub zewnętrzne) dziedziczą zasady z 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 korzystaniu z elementu iframe znajdziesz w artykule o atrybucie allow w elementach iframe.

Nie. Czas istnienia zasady dotyczy odpowiedzi na nawigację na jednej stronie. 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łudze przeglądarek znajdziesz na stronie 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, zasady dotyczące funkcji dobrze współgrają z progresywnym ulepszeniem.

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 przy tworzeniu lub utrzymaniu aplikacji, ponieważ pozwala uniknąć potencjalnej sprzedaży, zanim zdobędą oni Twoją bazę kodu.

Dodatkowe materiały: