Wskazówki dotyczące klienta użytkownika to nowe rozszerzenie interfejsu Client Hints API, które umożliwia programistom uzyskiwanie dostępu do informacji o przeglądarce użytkownika w sposób zapewniający ochronę prywatności i ergonomiczny.
Wskazówki dotyczące klienta pozwalają programistom aktywnie prosić o informacje o urządzeniu lub warunkach użytkownika bez konieczności ich analizowania z ciągu znaków User-Agent (UA). Podanie tej alternatywnej trasy to pierwszy krok do zmniejszania szczegółowości ciągu znaków klienta użytkownika.
Dowiedz się, jak zaktualizować istniejącą funkcję, która wymaga analizy ciągu znaków User-Agent tak, aby zamiast tego korzystać ze wskazówek klienta User-Agent.
Wprowadzenie
Gdy przeglądarki wysyłają żądania, dołączają informacje o przeglądarce i jej środowisku, dzięki czemu serwery mogą włączyć narzędzia analityczne i dostosować odpowiedź. Ta zasada została zdefiniowana w 1996 roku (RFC 1945 dla HTTP/1.0), gdzie znajduje się pierwotna definicję ciągu znaków User-Agent, która obejmuje przykład:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Ten nagłówek służył do określenia (w kolejności istotności) produktu (np. przeglądarki lub biblioteki) i komentarza (np. wersji).
Stan ciągu znaków User-Agent
W ciągu ostatnich dekad na tym ciągu znaków pojawiło się wiele dodatkowych informacji na temat klienta przesyłającego żądanie (oraz zniknęło ze względu na wsteczną zgodność). Jak widać, w bieżącym ciągu znaków User-Agent w Chrome:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
Powyższy ciąg zawiera informacje o systemie operacyjnym użytkownika i jego wersji, modelu urządzenia, marce przeglądarki i pełnej wersji, wystarczająco dużo wskazówek, by stwierdzić, że jest to przeglądarka mobilna. Nie wspominając o odwołaniach do innych przeglądarek z powodów historycznych.
Połączenie tych parametrów z ogromną różnorodnością możliwych wartości oznacza, że ciąg znaków User-Agent może zawierać wystarczającą ilość informacji, aby umożliwić jednoznaczne rozpoznanie poszczególnych użytkowników. Jeśli testujesz swoją przeglądarkę na AmIUnique, możesz sprawdzić, jak dokładnie Twój ciąg znaków User-Agent identyfikuje Ciebie. Im niższy wynikowy „współczynnik podobieństwa”, tym bardziej unikalne są Twoje żądania, tym łatwiej serwery mogą Cię dyskretnie śledzić.
Ciąg znaków User-Agent umożliwia wiele uzasadnionych przypadków użycia oraz spełnia ważne funkcje dla deweloperów i właścicieli witryn. Ważne jest jednak również, aby prywatność użytkowników była chroniona przed ukrytymi metodami śledzenia, a wysyłanie informacji z UA jest domyślnie sprzeczne z tym celem.
Konieczne jest też zwiększenie zgodności z internetem w przypadku ciągu znaków User-Agent. Jest nieuporządkowana, więc jego analizowanie zwiększa złożoność, która często jest przyczyną błędów i problemów ze zgodnością witryny, które szkodzą użytkownikom. Problemy te nieproporcjonalnie wpływają na użytkowników mniej popularnych przeglądarek, ponieważ nie udało się przetestować ich konfiguracji pod kątem konfiguracji.
Przedstawiamy nowe wskazówki dla klienta użytkownika
Wskazówki dotyczące klienta użytkownika umożliwiają dostęp do tych samych informacji, ale w sposób zapewniający większą ochronę prywatności. To z kolei pozwala przeglądarkom zmniejszyć domyślne ustawienia przesyłania wszystkich treści ciągu klienta użytkownika. Wskazówki dotyczące klienta wymuszają model, w którym serwer musi zapytać przeglądarkę o zestaw danych o kliencie (wskazówki), a przeglądarka stosuje własne zasady lub konfigurację użytkownika, aby określić, jakie dane są zwracane. Oznacza to, że zamiast domyślnie ujawniać wszystkie informacje o kliencie użytkownika, dostęp jest zarządzany i kontrolowany w sposób wyraźny i kontrolny. Deweloperzy korzystają też z prostszego interfejsu API, czyli rezygnowania z wyrażeń regularnych.
Bieżący zestaw wskazówek klienta opisuje przede wszystkim możliwości wyświetlania i łączenia się przeglądarki. Szczegóły znajdziesz w artykule o automatyzowaniu wyboru zasobów przy użyciu wskazówek klienta, ale przypomnieć sobie, jak wygląda cały proces.
Serwer prosi o konkretne wskazówki klienta w nagłówku:
🇦️ Odpowiedź z serwera
Accept-CH: Viewport-Width, Width
Albo metatag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Następnie w kolejnych żądaniach przeglądarka może wysłać te nagłówki z powrotem:
⬆️ Kolejne żądanie
Viewport-Width: 460
Width: 230
Serwer może zróżnicować swoje odpowiedzi, na przykład wyświetlając obrazy w odpowiedniej rozdzielczości.
Wskazówki dla klienta użytkownika zwiększają zakres właściwości o prefiks Sec-CH-UA, który można określić za pomocą nagłówka odpowiedzi serwera Accept-CH. Aby poznać wszystkie szczegóły, zacznij od wyjaśnienia, a potem przejdź do pełnej oferty.
Wskazówki dotyczące klienta użytkownika z Chromium 89
Wskazówki dotyczące klienta użytkownika są domyślnie włączone w Chrome od wersji 89.
Domyślnie przeglądarka zwraca markę przeglądarki, jej wersję główną lub główną, platformę oraz wskaźnik, czy klient jest urządzeniem mobilnym:
⬆️ Wszystkie prośby
Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"
Nagłówki odpowiedzi klienta użytkownika i żądania
🎮️ Odpowiedź Accept-CH⬆️ Nagłówek żądania |
⬆️ Poproś Przykładowa wartość |
Opis |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Lista marek przeglądarek i ich najważniejszych wersji. |
Sec-CH-UA-Mobile |
?1 |
Wartość logiczna wskazująca, czy przeglądarka jest na urządzeniu mobilnym (?1 – prawda) czy nie (?0 – fałsz). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Wycofano]Pełna wersja przeglądarki. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Lista marek przeglądarek i ich pełna wersja. |
Sec-CH-UA-Platform |
"Android" |
Platforma urządzenia, zwykle system operacyjny. |
Sec-CH-UA-Platform-Version |
"10" |
Wersja platformy lub systemu operacyjnego. |
Sec-CH-UA-Arch |
"arm" |
Podstawowa architektura urządzenia. Nie musi to być istotne w odniesieniu do wyświetlenia strony, ale witryna może chcieć pobrać plik w domyślnym formacie do pobrania. |
Sec-CH-UA-Model |
"Pixel 3" |
Model urządzenia. |
Sec-CH-UA-Bitness |
"64" |
Jakość bitowej architektury (tj. rozmiar w bitach liczby całkowitej lub adresu pamięci) |
Przykładowa giełda
Przykładowa giełda będzie wyglądać tak:
⬆️ Wstępne żądanie z przeglądarki
Przeglądarka wysyła w witrynie żądanie udostępnienia strony /downloads i wysyła swojego domyślnego podstawowego klienta użytkownika.
GET /downloads HTTP/1.1
Host: example.site
Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"
🎮️ Odpowiedź z serwera
Serwer odsyła stronę i dodatkowo prosi o dostęp do pełnej wersji przeglądarki oraz platformy.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Kolejne żądania
Przeglądarka przyznaje serwerowi dostęp do dodatkowych informacji i wysyła dodatkowe wskazówki w kolejnych żądaniach.
GET /downloads/app1 HTTP/1.1
Host: example.site
Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"
JavaScript API
Dostęp do klienta użytkownika można uzyskać w języku JavaScript oprócz nagłówków przez navigator.userAgentData. Do domyślnych informacji w nagłówku Sec-CH-UA, Sec-CH-UA-Mobile i Sec-CH-UA-Platform można uzyskać dostęp odpowiednio za pomocą właściwości brands i mobile:
// Log the brand data
console.log(navigator.userAgentData.brands);
// output
[
{
brand: 'Chromium',
version: '93',
},
{
brand: 'Google Chrome',
version: '93',
},
{
brand: ' Not;A Brand',
version: '99',
},
];
// Log the mobile indicator
console.log(navigator.userAgentData.mobile);
// output
false;
// Log the platform value
console.log(navigator.userAgentData.platform);
// output
"macOS";
Dostęp do dodatkowych wartości można uzyskać przez wywołanie getHighEntropyValues(). Termin „wysoka entropia” odnosi się do entropii informacji, czyli inaczej ilości informacji o przeglądarce użytkownika, które te wartości ujawniają. Tak jak w przypadku żądania dodatkowych nagłówków, to od przeglądarki zależy, jakie wartości zostaną zwrócone.
// Log the full user-agent data
navigator
.userAgentData.getHighEntropyValues(
["architecture", "model", "bitness", "platformVersion",
"fullVersionList"])
.then(ua => { console.log(ua) });
// output
{
"architecture":"x86",
"bitness":"64",
"brands":[
{
"brand":" Not A;Brand",
"version":"99"
},
{
"brand":"Chromium",
"version":"98"
},
{
"brand":"Google Chrome",
"version":"98"
}
],
"fullVersionList":[
{
"brand":" Not A;Brand",
"version":"99.0.0.0"
},
{
"brand":"Chromium",
"version":"98.0.4738.0"
},
{
"brand":"Google Chrome",
"version":"98.0.4738.0"
}
],
"mobile":false,
"model":"",
"platformVersion":"12.0.1"
}
Pokaz
Zarówno nagłówki, jak i interfejs JavaScript API możesz wypróbować na swoim urządzeniu na stronie user-agent-client-hints.glitch.me.
Żywotność podpowiedzi i resetowanie
Wskazówki określone w nagłówku Accept-CH będą wysyłane przez cały czas trwania sesji przeglądarki lub do momentu określenia innego zestawu wskazówek.
Oznacza to, że jeśli serwer wysyła:
🎮️ Odpowiedź
Accept-CH: Sec-CH-UA-Full-Version-List
Następnie przeglądarka będzie wysyłać nagłówek Sec-CH-UA-Full-Version-List we wszystkich żądaniach dotyczących tej witryny, dopóki przeglądarka nie zostanie zamknięta.
⬆️ Kolejne prośby
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Jeśli jednak zostanie odebrany inny nagłówek Accept-CH, zastąpi on bieżące wskazówki wysyłane przez przeglądarkę.
🎮️ Odpowiedź
Accept-CH: Sec-CH-UA-Bitness
⬆️ Kolejne prośby
Sec-CH-UA-Platform: "64"
Prośba o Sec-CH-UA-Full-Version-List nie zostanie wysłana.
Najlepiej traktować nagłówek Accept-CH jako zawierający kompletny zestaw wskazówek wymaganych w przypadku danej strony. Oznacza to, że przeglądarka wysyła następnie określone wskazówki dotyczące wszystkich zasobów podrzędnych tej strony. Wskazówki będą obowiązywać przy następnej nawigacji, ale witryna nie powinna polegać na ich urzeczywistnieniu.
Możesz też użyć tej opcji, aby skutecznie wyczyścić wszystkie wskazówki wysyłane przez przeglądarkę, wysyłając w odpowiedzi pustego Accept-CH. Możesz dodać ten element wszędzie tam, gdzie użytkownik resetuje ustawienia lub wylogowuje się z Twojej witryny.
Ten wzorzec odpowiada też temu, jak działają wskazówki za pomocą tagu <meta http-equiv="Accept-CH" …>. Żądane wskazówki będą wysyłane tylko w przypadku żądań zainicjowanych przez stronę, a nie podczas kolejnych nawigacji.
Zakres podpowiedzi i żądania z innych domen
Domyślnie wskazówki klienta będą wysyłane tylko w przypadku żądań z tego samego źródła. Oznacza to, że jeśli prosisz o konkretne wskazówki dotyczące atrybutu https://example.com, ale zasoby, które chcesz zoptymalizować, znajdują się w https://downloads.example.com, a zasoby te nie otrzymają żadnych wskazówek.
Aby umożliwić wyświetlanie wskazówek dotyczących żądań z innych domen, każda wskazówka i źródło muszą być określone za pomocą nagłówka Permissions-Policy. Aby zastosować ją do podpowiedzi klienta użytkownika, musisz ją zapisać małymi literami i usunąć prefiks sec-. Na przykład:
⚠️ Odpowiedź od: example.com
Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
ch-dpr=(self "cdn.provider" "img.example.com");
⬆️ Prośba do: downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Prośby do: cdn.provider lub img.example.com
DPR: 2
Gdzie można używać wskazówek dotyczących klienta użytkownika?
Odpowiedź brzmi: wszelkie przypadki, w których analizujesz nagłówek User-Agent lub korzystasz z wywołania JavaScript z dostępem do tych samych informacji (np. navigator.userAgent, navigator.appVersion lub navigator.platform), i stosuj wskazówki klienta użytkownika.
Jeśli to możliwe, jeszcze raz sprawdź, w jaki sposób wykorzystujesz informacje o kliencie użytkownika, i w miarę możliwości zastąp je innymi metodami. Często można osiągnąć ten sam cel, stosując stopniowe ulepszanie, wykrywanie funkcji lub projektowanie responsywne. Podstawowym problemem związanym z korzystaniem z danych klienta użytkownika jest to, że zawsze utrzymuje się mapowanie między sprawdzaną właściwością a włączonym przez nią zachowaniem. To nakład pracy związany z konserwacją, aby mieć pewność, że wykrywanie jest kompleksowe i aktualne.
Mając to na uwadze, w repozytorium User-Agent Client Hints znajduje się kilka prawidłowych przypadków użycia witryn.
Co się stanie z ciągiem znaków User-Agent?
Plan ma na celu zminimalizowanie możliwości potajemnego śledzenia w internecie przez zmniejszenie ilości informacji umożliwiających identyfikację ujawnianych przez istniejący ciąg znaków User-Agent, a jednocześnie nie zakłóca korzystania z istniejących witryn. Dzięki funkcji wskazówek dla klienta użytkownika możesz teraz zapoznać się z nową możliwością i poeksperymentować z nią, zanim wprowadzisz jakiekolwiek zmiany w ciągach znaków klienta użytkownika.
Ostatecznie informacje w ciągu znaków User-Agent zostaną zmniejszone, aby zachować starszy format, a jednocześnie udostępnić tylko tę samą przeglądarkę wysokiego poziomu i ważne informacje o wersji zgodnie z domyślnymi wskazówkami. W Chromium ta zmiana została odroczona co najmniej do 2022 roku, aby dać ekosystemowi dodatkowy czas na ocenę nowych funkcji podpowiedzi klienta użytkownika.
Aby przetestować tę wersję, włącz flagę about://flags/#reduce-user-agent z Chrome 93 (uwaga: w Chrome 84–92 ta flaga nazywała się about://flags/#freeze-user-agent). Ze względu na zgodność zwrócony zostanie ciąg znaków z wpisami historycznymi, ale ze szczegółowymi informacjami. Na przykład:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniatura autorstwa Sergeya Zolkina w Unsplash