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
lubmicrophone
. - 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:
- Za pomocą nagłówka HTTP
Feature-Policy
. - Za pomocą atrybutu
allow
w elementach iframe.
Nagłówek HTTP Feature-Policy
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.
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 elementuhttps://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ć.
- Zapoznaj się z naszymi prezentacjami na temat ujścia mikrokuchni. Znajdziesz w nim przykłady każdej zasady wdrożonej w Blink.
- Listę nazw funkcji znajdziesz w sekcji Źródło Chrome.
- Zapytanie
document.featurePolicy.allowedFeatures()
wabout:blank
pozwala 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 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.
Czy jeśli zastosuję zasadę, będzie ona obowiązywać w przypadku różnych nawigacji na stronie?
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:
- Wyjaśnienie zasad dotyczących funkcji
- Specyfikacja zasad funkcji
- Wersje demonstracyjne zlewów kuchennych
- Rozszerzenie zasad deweloperskich zasad funkcji – tester, który sprawdza zasady funkcji na stronie.
- wpisy na chromestatus.com