Ochrona witryny za pomocą zasad dotyczących funkcji

Jedną z funkcji platformy internetowej wyróżnionych na ostatnim szczycie Chrome Dev Summit były Zasady dotyczące funkcji, które mają na celu „umożliwienie autorom witryn selektywnego włączania i wyłączania korzystania z różnych funkcji przeglądarki i interfejsów API”. W tym artykule przyjrzę się, co to oznacza dla twórców stron internetowych, z kilkoma praktycznymi przykładami.

W swoim artykule wprowadzającym w witrynie Google Developers Eric Bidelman opisuje zasady dotyczące funkcji w następujący sposób:

„Same zasady dotyczące funkcji to niewielkie umowy opt-in między programistą a przeglądarką, które mogą pomóc w realizacji naszych celów tworzenia (i utrzymywania) wysokiej jakości aplikacji internetowych”.

Specyfikacja została opracowana w Google w ramach działalności Web Platform Incubator Group. Celem Polityki funkcji jest dla nas, jako twórców stron internetowych, możliwość określenia naszego wykorzystania funkcji platformy internetowej bezpośrednio w przeglądarce. W ten sposób zawieramy zgodę na nasze wykorzystanie lub niekorzystanie z tej konkretnej funkcji. Na tej podstawie przeglądarka może blokować określone funkcje lub zgłaszać nam, że używana jest funkcja, której nie spodziewała się zobaczyć.

Przykłady mogą obejmować:

1. Osadzam ramkę iframe i nie chcę, aby osadzona witryna miała dostęp do kamery mojego gościa;
2. Chcę uchwycić sytuacje, w których niezoptymalizowane obrazy są wdrażane w mojej witrynie za pośrednictwem systemu CMS;
3. Nad moim projektem pracuje wielu programistów i chciałbym wiedzieć, czy używają przestarzałych interfejsów API, takich jak document.write .

Wszystkie te rzeczy można śledzić, blokować lub zgłaszać w ramach Polityki funkcji.

Jak korzystać z zasad dotyczących funkcji

Aby korzystać z zasad funkcji, przeglądarka musi wiedzieć dwie rzeczy: dla której funkcji tworzysz zasady i jak chcesz, aby ta funkcja była obsługiwana.

 Feature-Policy: <directive> <allowlist>

<directive> to nazwa funkcji, dla której ustawiasz zasady.

Aktualna lista funkcji (zaczerpnięta z prezentacji przedstawionej na Chrome Dev Summit) przedstawia się następująco:

• akcelerometr
• czujnik światła otoczenia
• Automatyczne odtwarzanie
• kamera
• zapis-dokumentu
• zaszyfrowane media
• pełny ekran
• geolokalizacja
• żyroskop
• układ-animacje
• leniwy
• starsze-formaty-obrazów
• magnetometr
• midi
• przewymiarowane-obrazy
• Zapłata
• Obrazek w obrazku
• głośnik
• skrypt synchronizacji
• synchronizacja-xhr
• niezoptymalizowane-obrazy
• niewymiarowe-media
• usb
• przewijanie w pionie
• vr

Lista <allowlist> szczegółowo opisuje, w jaki sposób funkcja może być używana — jeśli w ogóle — i przyjmuje jedną lub więcej z następujących wartości.

• *
  Najbardziej liberalna polityka, stwierdzająca, że ​​funkcja będzie dozwolona w tym dokumencie i wszelkich elementach iframe, czy to z tej domeny, czy z innego miejsca. Może być używany tylko jako pojedyncza wartość, ponieważ nie ma sensu włączać wszystkiego, a także na przykład przekazywać listy domen.
• self
  Ta funkcja będzie dostępna w dokumencie i we wszystkich elementach iframe, jednak elementy iframe muszą mieć to samo pochodzenie.
• src
  Ma zastosowanie tylko w przypadku korzystania z atrybutu allow iframe. Umożliwia to funkcję, o ile załadowany do niej dokument pochodzi z tego samego źródła, co adres URL w atrybucie src elementu iframe.
• none
  Wyłącza funkcję dokumentu i wszelkich zagnieżdżonych ramek iframe. Może być używany tylko jako pojedyncza wartość.
• <origin(s)>
  Ta funkcja jest dozwolona dla określonych źródeł; oznacza to, że możesz określić listę domen, w których ta funkcja jest dozwolona. Lista domen jest oddzielona spacjami.

Istnieją dwie metody włączania zasad funkcji w witrynie: Możesz wysłać nagłówek HTTP lub użyć atrybutu allow w ramce iframe.

Nagłówek HTTP

Wysłanie nagłówka HTTP oznacza, że ​​możesz włączyć zasady funkcji dla strony lub całej witryny, ustawiając ten nagłówek, a także wszystko, co jest w niej osadzone. Nagłówki można ustawić dla całej witryny na serwerze WWW lub można je wysłać z aplikacji.

Na przykład, jeśli chciałem uniemożliwić korzystanie z API geolokalizacji i korzystałem z serwera WWW NGINX, mógłbym edytować pliki konfiguracyjne dla mojej witryny w NGINX, aby dodać następujący nagłówek, który uniemożliwiłby jakikolwiek dokument w mojej witrynie i wszelki wbudowany element iframe z wykorzystaniem interfejsu API geolokalizacji.

 add_header Feature-Policy "geolocation none;";

W jednym nagłówku można ustawić wiele zasad. Aby zapobiec geolokalizacji i wibracjom, ale zezwolić na unsized-media z domeny example.com , mogę ustawić następujące opcje:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

allow atrybut na iFrames

Jeśli interesuje nas przede wszystkim to, co dzieje się z treścią w elemencie iframe, możemy zastosować Zasady dotyczące funkcji w samym elemencie iframe; korzysta to z nieco lepszej obsługi przeglądarek w momencie pisania tego tekstu, a Chrome i Safari obsługują to użycie.

Jeśli osadzam witrynę i nie chcę, aby ta witryna korzystała z interfejsów API geolokalizacji, kamery lub mikrofonu, mój element iframe będzie wyglądał jak w następującym przykładzie:

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

Być może znasz już poszczególne atrybuty kontrolujące zawartość elementów iframes allowfullscreen , allowpaymentrequest i allowusermedia . Można je zastąpić atrybutem allow na zasady dotyczące funkcji, a ze względu na zgodność przeglądarki można używać obu na ramce iframe. Jeśli użyjesz obu atrybutów, zostanie zastosowany najbardziej restrykcyjny. W artykule Google pokazano przykład ramki iframe, która używa allowfullscreen – co oznacza, że ​​ramka iframe może przejść na pełny ekran, ale z sprzeczną zasadą funkcji fullscreen none . Są to konflikty, więc wygrywa najbardziej restrykcyjna zasada, a ten element iframe nie będzie mógł wejść na pełny ekran.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

Element iframe ma również atrybut sandbox przeznaczony do zarządzania obsługą wielu funkcji. Ta funkcja została również dodana do polityki bezpieczeństwa treści z wartością sandbox , która wyłącza wszystkie funkcje piaskownicy, które można następnie selektywnie włączyć. Istnieje pewne skrzyżowanie między funkcjami piaskownicy a tymi kontrolowanymi przez Zasady dotyczące funkcji, a Zasady dotyczące funkcji nie mają na celu powielania wartości już objętych piaskownicą. Rozwiązuje jednak niektóre ograniczenia piaskownicy, przyjmując bardziej precyzyjne podejście do zarządzania tymi zasadami, zamiast wyłączania wszystkiego globalnie jako jednego dużego zestawu zasad.

Zasady dotyczące funkcji i interfejs API raportowania

Naruszenia zasad dotyczących funkcji można zgłaszać za pomocą interfejsu API do raportowania, co oznacza, że ​​możesz opracować kompleksowy zestaw zasad śledzących wykorzystanie funkcji w swojej witrynie. Byłoby to całkowicie przejrzyste dla Twoich użytkowników, ale dałoby Ci ogromną ilość informacji o tym, w jaki sposób funkcje były używane.

Obsługa przeglądarek dla polityki funkcji

Obecnie obsługa zasad funkcji przez przeglądarki jest ograniczona do Chrome, jednak w wielu przypadkach, gdy korzystasz z zasad funkcji podczas opracowywania i podczas wyświetlania podglądu witryn, niekoniecznie stanowi to problem.

Wiele przypadków użycia, które opiszę poniżej, nadaje się do użytku już teraz, nie powodując żadnego wpływu na odwiedzających witrynę, którzy korzystają z przeglądarek bez wsparcia.

Kiedy używać zasad dotyczących funkcji

Bardzo podoba mi się pomysł, aby móc korzystać z zasad funkcji, aby pomóc w tworzeniu kopii zapasowych decyzji podjętych podczas tworzenia witryny. Decyzje, które równie dobrze mogą być zapisane w dokumentach, takich jak budżet zadaniowy, czy w ramach audytu RODO, ale które potem stają się czymś, o czym musimy pamiętać, aby zachować je przez całe życie serwisu. Nie zawsze jest to łatwe, gdy w witrynie pracuje wiele osób; ludzie, którzy być może nie byli zaangażowani w początkowe podejmowanie decyzji lub po prostu nie są świadomi wymagań. Dużo myślimy o tym, że strony trzecie mogą w jakiś sposób wpłynąć na naszą witrynę, jednak czasami nasze witryny wymagają ochrony przed nami samymi!

Miej oko na strony trzecie

Możesz uniemożliwić witrynie innej firmy dostęp do kamery lub mikrofonu za pomocą zasad funkcji w elemencie iframe z atrybutem allow . Jeśli powód umieszczenia tej witryny nie ma nic wspólnego z tymi funkcjami, wyłączenie ich oznacza, że ​​witryna nigdy nie zacznie o nie prosić. Można to następnie połączyć z Twoimi procesami w celu zapewnienia zgodności z RODO. Kontrolując wpływ witryny na prywatność, możesz wbudować procesy blokowania dostępu stron trzecich za pomocą zasad dotyczących funkcji — zapewniając Tobie i odwiedzającym dodatkowe bezpieczeństwo i spokój.

To użycie opiera się na obsłudze przez przeglądarkę zasad dotyczących funkcji w celu zablokowania użycia. Możesz jednak użyć trybu raportowania zasad dotyczących funkcji, aby poinformować Cię o korzystaniu z tych interfejsów API, jeśli strona trzecia zmieni swoje działania. Dałoby to bardzo szybką informację – zasadniczo, gdy tylko pierwsza osoba korzystająca z Chrome wejdzie na stronę.

Selektywne włączanie funkcji

Możemy również chcieć selektywnie włączyć niektóre funkcje, które zwykle są blokowane. Być może chcemy, aby zawartość ładująca się ramką iframe z innej witryny korzystała z funkcji geolokalizacji w przeglądarce. Chrome domyślnie blokuje to, ale jeśli ładujesz zawartość z zaufanej witryny, możesz włączyć żądanie między źródłami za pomocą zasad funkcji. Oznacza to, że możesz bezpiecznie włączać funkcje podczas ładowania treści z innej domeny, nad którą masz kontrolę.

Wyłapywanie przestarzałych interfejsów API i słabo działających funkcji

Zasady dotyczące funkcji można uruchomić w trybie tylko raportów. Następnie może śledzić wykorzystanie niektórych funkcji i informować o ich znalezieniu w witrynie. Może to być przydatne w wielu scenariuszach. Jeśli masz bardzo dużą witrynę z dużą ilością starszego kodu, włączenie Polityki funkcji pomoże Ci znaleźć miejsca, które wymagają uwagi. Jeśli pracujesz z dużym zespołem (zwłaszcza jeśli programiści często pobierają biblioteki kodu stron trzecich), Polityka funkcji może wyłapać rzeczy, których wolelibyście nie widzieć na stronie.

Radzenie sobie ze źle zoptymalizowanymi obrazami

Podczas gdy większość artykułów, które widziałem na temat zasad dotyczących funkcji, koncentruje się na aspektach bezpieczeństwa i prywatności, funkcje związane z optymalizacją obrazu bardzo mi się spodobały, jako kogoś, kto zajmuje się dużą ilością treści generowanych przez technicznych i nietechnicznych użytkowników. Zasady dotyczące funkcji mogą służyć do ochrony wygody użytkownika oraz wydajności witryny, zapobiegając pobieraniu przez odwiedzających zbyt dużych lub niezoptymalizowanych obrazów.

W idealnym świecie Twój CMS zajmowałby się zarządzaniem obrazami, zapewniając, że obrazy zostały odpowiednio przeskalowane, zoptymalizowane pod kątem sieci i kontekstu, w którym będą wyświetlane. Jednak prawdziwe życie rzadko jest tak idealnym światem, a więc czasami praca polegająca na zmianie rozmiaru a optymalizację obrazów pozostawiono redaktorom treści, aby upewnić się, że nie przesyłają dużych obrazów do sieci. Jest to szczególnie problem, jeśli używasz statycznego CMS bez warstwy zarządzania treścią. Nawet jako osoba techniczna bardzo łatwo jest zapomnieć o zmianie rozmiaru tego gigantycznego zrzutu ekranu lub obrazu z kamery, który pojawił się w folderze jako symbol zastępczy.

Obecnie za flagą w Chrome znajdują się funkcje, które mogą pomóc. Ideą tych funkcji jest wyróżnienie problematycznych obrazów, aby można je było naprawić — bez całkowitego uszkodzenia witryny.

Zasady dotyczące funkcji unsized-media wyszukują obrazy lub wideo, które nie mają ustawionego rozmiaru w kodzie HTML lub CSS. Ładowanie elementu multimedialnego o nierozmiarowym rozmiarze może spowodować ponowne wlanie treści na stronie.

Aby zapobiec dodawaniu do witryny jakichkolwiek niesformatowanych mediów, ustaw następujący nagłówek. Media będą wtedy wyświetlane w domyślnym rozmiarze 300×150 pikseli. Zobaczysz, jak Twoja witryna ładuje się z małym nośnikiem i zdasz sobie sprawę, że masz problem do naprawienia.

 Feature-Policy: unsized-media 'none'

Zobacz demo (wymaga przeglądarki Chrome Canary z włączonymi eksperymentalnymi funkcjami platformy internetowej).

oversized-images zawierają kontrolę zasad, aby zobaczyć, czy obrazy nie są dużo większe niż ich kontener. Jeśli tak, zamiast tego zostanie wyświetlony symbol zastępczy. Ta zasada jest niezwykle przydatna, aby sprawdzić, czy nie wysyłasz dużych obrazów na komputery do użytkowników mobilnych.

 Feature-Policy: oversized-images 'none'

Zobacz demo (wymaga przeglądarki Chrome Canary z włączonymi eksperymentalnymi funkcjami platformy internetowej).

Polityka funkcji unoptimized-images sprawdza, czy rozmiar danych obrazów w bajtach nie jest większy niż 0,5x większy niż obszar renderowania w pikselach. Jeśli ta zasada jest włączona i obrazy ją naruszają, zamiast obrazu zostanie wyświetlony symbol zastępczy.

 Feature-Policy: unoptimized-images 'none'

Zobacz demo (wymaga przeglądarki Chrome Canary z włączonymi eksperymentalnymi funkcjami platformy internetowej).

Zasady testowania i raportowania dotyczące funkcji

Chrome DevTools wyświetli komunikat informujący, że niektóre funkcje zostały zablokowane lub włączone przez zasady dotyczące funkcji. Jeśli włączyłeś Zasady dotyczące funkcji w swojej witrynie, możesz sprawdzić, czy to działa.

Obsługa zasad funkcji została również dodana do witryny Nagłówki bezpieczeństwa, co oznacza, że ​​możesz je sprawdzić wraz z nagłówkami, takimi jak Polityka bezpieczeństwa treści w Twojej witrynie — lub w innych witrynach w Internecie.

Istnieje rozszerzenie Chrome DevTools, które umożliwia włączanie i wyłączanie różnych zasad funkcji (również świetny sposób na sprawdzanie stron bez konieczności konfigurowania jakichkolwiek nagłówków).

Jeśli chcesz rozpocząć integrację zasad dotyczących funkcji z interfejsem API raportowania, tutaj znajdziesz więcej informacji na temat tego, jak to zrobić.

Dalsze czytanie i zasoby

Znalazłem wiele zasobów, z których wiele korzystałem podczas badania tego artykułu. Powinny one dać ci wszystko, czego potrzebujesz, aby rozpocząć wdrażanie zasad funkcji we własnych aplikacjach. Jeśli korzystasz już z Polityki bezpieczeństwa treści, wydaje się to dodatkowym logicznym krokiem w kierunku kontrolowania sposobu, w jaki Twoja witryna współpracuje z przeglądarką, aby zapewnić bezpieczeństwo i prywatność osób korzystających z Twojej witryny. Dodatkową zaletą jest możliwość korzystania z zasad dotyczących funkcji, które pomogą Ci być na bieżąco z dodawanymi do Twojej witryny elementami obniżającymi wydajność.

• Specyfikacja zasad dotyczących funkcji
• Przedstawiamy zasady dotyczące funkcji
• Widok z Chrome Dev Summit
• Zasady dotyczące funkcji na MDN
• Czy mogę korzystać z zasad dotyczących funkcji?
• Prezentacje zasad dotyczących funkcji
• Skonfiguruj nagłówki Feature-Policy, Referrer-Policy i Content Security Policy w Nginx