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

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. Wraz z rozwojem projektu deweloperzy dołączają do programu, pojawiają się nowe funkcje, a baza kodu się powiększa. Osiągnięta przez Ciebie „doskonała jakość” może zacząć się pogarszać, co negatywnie wpłynie na wrażenia użytkownika. 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 ograniczają dostęp witryny do interfejsów API lub modyfikację domyślnego zachowania przeglądarki w przypadku niektórych funkcji.

Oto przykłady czynności, które możesz wykonać za pomocą zasad dotyczących funkcji:

  • Zmień domyślne zachowanie autoplay w przypadku filmów mobilnych i filmów innych firm.
  • Ogranicz witrynie możliwość używania poufnych interfejsów API, 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().
  • Upewnij się, że obrazy mają odpowiedni rozmiar (np. zapobiega to chaotycznemu układowi) i nie są zbyt duże w stosunku do widocznego obszaru (np. nie marnują przepustowości użytkownika).

Zasady to umowa między deweloperem a przeglądarką. Informują 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 osoby trzeciej próbują naruszyć którąkolwiek z wstępnie wybranych reguł programisty, 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 umożliwiają kontrolowanie funkcji na 2 sposoby:

  1. Za pomocą nagłówka HTTP Feature-Policy.
  2. z atrybutem allow w ramach ramek 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': 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 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ć wszystkim treściom możliwość używania interfejsu Geolocation API 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 go. Tak jest nawet wtedy, gdy użytkownik zezwolił wcześniej na udostępnianie swojej lokalizacji.

Naruszenie ustawionej zasady geolokalizacji
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ą atrybut, który umożliwia ich kontrolowanie. 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, 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, że pierwszeństwo ma 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 wysyłając oddzielny 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:

  • Zabrania używania unsized-media we wszystkich kontekstach przeglądania.
  • Uniemożliwia używanie geolocation we wszystkich kontekstach przeglądania z wyjątkiem własnego źródła strony i 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 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

Jakich funkcji można używać w ramach zasad dotyczących funkcji?

Obecnie brakuje dokumentacji na temat tego, jakie zasady są wdrażane i jak z nich korzystać. Lista będzie się też z czasem wydłużać, gdy różne przeglądarki będą stosować specyfikację i wdrażać 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. Znajdziesz w nim przykłady każdej zasady wdrożonej w Blink.
  • Listę nazw funkcji znajdziesz w sekcji Źródło 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 informacje o zasadach, 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. Zamieściliśmy w nim kilka objaśnień dotyczących niektórych zasad.

Najczęstsze pytania

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

Wszystkie zasady wymagają akceptacji, więc stosuj Zasady korzystania z funkcji, gdy mają one 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.

Innych zasad, takich jak document-write i sync-xhr, należy używać z większym wyczuciem. 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 używam 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 w trakcie programowania może ułatwić Ci rozpoczęcie pracy. 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 w trakcie tworzenia. 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 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 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ę, aby zastosować te zasady, nagłówek Feature-Policy musi być wyraźnie wysłany w nowej odpowiedzi.

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

Dodatkowe materiały: