Wprowadzenie do zasad dotyczących funkcji

Podsumowanie

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

Same zasady dotyczące funkcji to drobne uzgodnienia zawarte między deweloperami i przeglądarkę, która może pomóc w osiągnięciu celów związanych z tworzeniem (i utrzymywaniem) wysokiej wysokiej jakości aplikacji internetowych.

Wprowadzenie

Tworzenie stron dla internetu to ciężka przygoda. Zdecydowanie trudno jest stworzyć która jest niezwykle wydajna i korzysta z najnowszych sprawdzonych metod. Jest nawet co sprawia, że korzystanie z niej stale się opłaca. W miarę rozwoju projektu dołączają do programistów, pojawiają się nowe funkcje, a baza kodu rośnie. To Zdobyte doświadczenie w programie Great Experience TM może zacząć się pogorszyć, a zadowolenie użytkowników zaczyna cierpieć! Zasady dotyczące funkcji zostały opracowane, aby pomóc Ci na bieżąco.

Dzięki zasadom funkcji zgadzasz się na zestaw „zasad”, które pozwolą przeglądarce wymuszenia w konkretnych funkcjach używanych w całej witrynie. Te zasady ograniczają do jakich interfejsów API witryna może uzyskiwać dostęp lub modyfikować domyślne działanie przeglądarki; określonych funkcji.

Oto przykłady zasad dotyczących funkcji:

  • zmienić domyślne działanie, z autoplay na urządzeniach mobilnych i filmach 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().
  • Upewnij się, że obrazy mają właściwe wymiary (np. zapobiegają umknięciu układu) i zbyt duży dla widocznego obszaru (np. zużywanie przepustowości łącza przez użytkownika).

Zasady to umowa między deweloperem a przeglądarką. Informują one o intencjach programisty, pomagają nam być uczciwym nasza aplikacja działa źle. Jeśli witryna lub strona osadzona należące do osoby trzeciej treści usiłują naruszyć zasady określone przez dewelopera reguły, przeglądarka zastępuje działanie z lepszym interfejsem lub blokuje interfejs API, a nawet ich anulowania.

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 żądania HTTP Feature-Policy nagłówek z odpowiedzią dla strony. Wartość tego nagłówka to zasada lub ustawiona zasad, które przeglądarka ma respektować 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 kontekście przeglądania najwyższego poziomu i w zagnieżdżonych kontekstów przeglądania (elementy iframe).
  • 'self': ta funkcja jest dozwolona w kontekstach przeglądania najwyższego poziomu i zagnieżdżone konteksty przeglądania w tej samej domenie. Jest to niedozwolone w innych domenach dokumentów w zagnieżdżonych kontekstach przeglądania.
  • 'none': ta funkcja jest niedozwolona w kontekstach przeglądania najwyższego poziomu i niedozwolone 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ść korzystania z za pomocą interfejsu Geolocation API w witrynie. Możesz to zrobić, wysyłając rygorystycznie lista dozwolonych domen 'none' dla funkcji geolocation:

Feature-Policy: geolocation 'none'

Jeśli fragment kodu lub element iframe próbuje użyć interfejsu Geolocation API, przeglądarka zostanie zablokowana. Działa to nawet wtedy, gdy użytkownik wcześniej podał pozwolenie na udostępnianie lokalizacji.

Naruszenie ustawionej zasady geolokalizacji
Naruszanie ustawionych zasad geolokalizacji.

W innych przypadkach warto nieco złagodzić te zasady. Możemy zezwolić na nasze własne źródło, aby używać interfejsu Geolocation API, ale uniemożliwić treściom osób trzecich aby uzyskać do niego dostęp, ustawiając 'self' na liście dozwolonych:

Feature-Policy: geolocation 'self'

Atrybut iframe allow

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

<!-- 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 z funkcji kontrolowanych przez zasady dotyczące funkcji by kontrolować ich działanie. Na przykład: <iframe allowfullscreen> to atrybut, który pozwala zawartości elementu iframe używać Interfejs API HTMLElement.requestFullscreen(). Są też allowpaymentrequest i Atrybuty allowusermedia umożliwiające Payment Request API i getUserMedia(), .

Spróbuj używać atrybutu allow zamiast starego atrybutu tam, gdzie jest to możliwe. W przypadku, gdy trzeba podać wsparcie wsteczne zgodność z użyciem atrybutu allow z odpowiednim atrybutem starszym jest całkowicie poprawne (np. <iframe allowfullscreen allow="fullscreen">). Pamiętaj tylko, że wygra bardziej restrykcyjna zasada. Na przykład: Element iframe nie będzie mógł otworzyć pełnego ekranu, ponieważ Pole allow="fullscreen 'none'" jest bardziej restrykcyjne 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 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 geolocation we wszystkich kontekstach przeglądania oprócz własne źródło strony i 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 oraz allow w elementach iframe, w Chrome 74 dodaliśmy 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 bonusów znajdziesz na stronie document.featurePolicy w przypadku dokumentu głównego lub frame.featurePolicy w przypadku iframe.

Przykład

Poniższy przykład pokazuje efekty 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 jak ich używać. Lista będzie się także powiększać w miarę pojawiania się kolejnych przeglądarek, stosowanie specyfikacji i wdrażanie różnych zasad. Zasady dotyczące funkcji zostaną przeniesione kierowania reklam i przydatnych dokumentów referencyjnych.

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",
        ...
  • Aby sprawdzić, które zasady zostały wprowadzone, wejdź na chromestatus.com są już wdrożone lub rozważane w Blink.

Aby dowiedzieć się, jak korzystać z niektórych z tych zasad, zapoznaj się z 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. Dla: Jeśli np. masz galerię obrazów, maximum-downscaling-image pozwalają uniknąć przesyłania gigantycznych obrazów do obszarów widocznych na urządzeniach mobilnych.

Inne zasady, takie jak document-write i sync-xhr, powinny być stosowane w większej liczbie opiekę. Włączenie ich może zakłócić działanie treści osób trzecich, takich jak reklamy. Dzień Zasady dotyczące funkcji warto sprawdzić i upewnić się, że Twoje strony nigdy nie 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łączenie zasad w trakcie tworzenia aplikacji i zachowanie zasad aktywnych w wersji produkcyjnej. Włączenie zasad w trakcie programowania może pomoże Ci zrobić pierwszy krok. Pomoże Ci złapać każdą nieoczekiwaną regresji, zanim nastąpią. Pozostaw włączone zasady w wersji produkcyjnej i zapewniać użytkownikom określone wrażenia.

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

Interfejs API do raportowania trwa praca. Podobnie jak witryny mogą włączyć otrzymywanie raportów na temat naruszenia zasad CSP lub wycofania, będziemy mogli na bieżąco otrzymywać raporty o naruszeniach zasad dotyczących funkcji.

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

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

Elementy iframe dziedziczą zasady strony nadrzędnej. Jeśli iframe ma allow, czyli bardziej rygorystyczne zasady między stroną nadrzędną a stroną allow i wygrane. Więcej informacji o korzystaniu z iframe znajdziesz tutaj: Atrybut allow w elementach iframe

Nie. Czas istnienia zasady dotyczy odpowiedzi na nawigację na jednej stronie. Jeśli użytkownik przechodzi na nową stronę, nagłówek Feature-Policy musi zawierać wysłana w nowej odpowiedzi, aby zasada została zastosowana.

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

Najnowsze informacje znajdziesz na stronie caniuse.com. na temat obsługi przeglądarek.

Obecnie Chrome jest jedyną przeglądarką, która obsługuje zasady dotyczące funkcji. Pamiętaj jednak: ponieważ cała powierzchnia interfejsu API jest opcjonalna lub wykrywalna, zasady dotyczące funkcji doskonale nadają się do stopniowego ulepszania.

Podsumowanie

Zasady dotyczące funkcji mogą zapewnić odpowiednio oświetlone rozwiązanie w zakresie UX dobrą wydajność. Jest to szczególnie przydatne podczas tworzenia lub utrzymywania aplikacji ponieważ pomaga to uniknąć potencjalnej sztuczki, zanim zakradną się w bazie kodu.

Dodatkowe materiały: