Wskazówki dotyczące klienta użytkownika to nowe rozszerzenie interfejsu Client Hints API, które umożliwia deweloperom dostęp do informacji o przeglądarce użytkownika w sposób ergonomiczny i chroniący prywatność.
Wskazówki klienta umożliwiają deweloperom aktywne żądanie informacji o urządzeniu lub warunkach użytkownika, zamiast analizowania ich z ciągu danych User-Agent (UA). Udostępnienie tej alternatywnej ścieżki to pierwszy krok do zmniejszenia szczegółowości ciągu User-Agent.
Dowiedz się, jak zaktualizować dotychczasowe funkcje, które polegają na analizowaniu ciągu znaków klienta użytkownika, aby zamiast tego używać wskazówek dotyczących klienta User-Agent.
Tło
Gdy przeglądarki wysyłają żądania, zawierają one informacje o przeglądarce i jej środowisku, aby serwery mogły włączyć funkcje analityczne i dostosowywać odpowiedzi. Jest on zdefiniowany aż do 1996 roku (RFC 1945 dla HTTP/1.0). Znajdziesz tam pierwotną definicję ciągu znaków User-Agent, w tym przykład:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Jego przeznaczeniem było określenie w kolejności według istotności usługi (np. przeglądarki lub biblioteki) oraz komentarza (np. wersji).
stan ciągu znaków klienta użytkownika.
W ciągu ostatnich dziesięcioleci ten ciąg znaków zawierał coraz więcej dodatkowych informacji o kliencie wysyłającym żądanie (a także niepotrzebne dane ze względu na zgodność wsteczną). Widać to, gdy spojrzymy na bieżący ciąg 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 i jego wersji, modelu urządzenia, marce i pełnej wersji przeglądarki. Wystarczające wskazówki pozwalają stwierdzić, że jest to przeglądarka mobilna. Z powodów historycznych zawiera też kilka odwołań do innych przeglądarek.
Połączenie tych parametrów z wielkością możliwych wartości oznacza, że ciąg User-Agent może zawierać wystarczającą ilość informacji, aby umożliwić jednoznaczną identyfikację poszczególnych użytkowników.
Ciąg User-Agent umożliwia wiele uzasadnionych sposobów użycia i pełni ważną rolę dla deweloperów i właścicieli witryn. Niezwykle ważne jest jednak to, aby prywatność użytkowników była chroniona przed ukrytymi metodami śledzenia, a wysyłanie informacji UA domyślnie jest sprzeczne z tym celem.
Trzeba też poprawić zgodność z internetem, jeśli chodzi o ciąg znaków klienta użytkownika. Jest nieuporządkowany, więc jej analizowanie powoduje niepotrzebne złożoności, które często są przyczyną błędów i problemów ze zgodnością witryny, które szkodzą użytkownikom. Te problemy mają też nieproporcjonalnie negatywny wpływ na użytkowników mniej popularnych przeglądarek, ponieważ witryny mogą nie przejść testów w przypadku ich konfiguracji.
Przedstawiamy nowe wskazówki dotyczące klienta użytkownika
Wskazówki dotyczące klienta użytkownika zapewniają dostęp do tych samych informacji, ale w bardziej chroniący prywatność sposób. Umożliwiają one przeglądarkom ograniczenie domyślnego rozpowszechniania wszystkich informacji zawartych w ciągu danych klienta użytkownika. Wskazówki dla klienta wymuszają model, w którym serwer musi poprosić przeglądarkę o zbiór 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 udostępniać wszystkie informacje w nagłówku User-Agent, dostępem można teraz zarządzać w wyraźny sposób, który można zweryfikować. Deweloperzy korzystają też z prostszego interfejsu API – nie muszą już pisać wyrażeń regularnych.
Obecny zestaw wskazówek klienta opisuje głównie możliwości wyświetlania i łączenia się przeglądarki. Więcej informacji znajdziesz w artykule Automatyzacja wyboru zasobów za pomocą wskazówek klienta, ale przypomnę sobie ten proces w skrócie.
Serwer prosi o określone wskazówki dotyczące klienta za pomocą nagłówka:
⬇️ Odpowiedź serwera
Accept-CH: Viewport-Width, Width
Lub metatag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Przeglądarka może następnie wysłać te nagłówki z powrotem w kolejnych żądaniach:
⬆️ Kolejna prośba
Viewport-Width: 460
Width: 230
Serwer może zmieniać swoje odpowiedzi, np. wyświetlając obrazy w odpowiedniej rozdzielczości.
Wskazówki dotyczące klienta użytkownika w polu User-Agent poszerzają 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 tego artykułu, a potem przejdź do pełnej wersji oferty.
Wskazówki dotyczące klienta użytkownika w 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, wersję główną, platformę i wskaźnik, czy klient to urządzenie mobilne:
⬆️ Wszystkie żądania
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 i żądań klienta użytkownika
⬇️ Odpowiedź Accept-CH ⬆️ Nagłówek żądania |
⬆️ Request Przykładowa wartość |
Opis |
---|---|---|
Sec-CH-UA |
"Chromium";v="84", "Google Chrome";v="84" |
Lista marek przeglądarek i ich znaczących 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" |
[Wycofana] Pełna wersja dla 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łnych wersji. |
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. Chociaż może to nie mieć znaczenia dla wyświetlania strony, witryna może oferować pobranie w odpowiednim formacie. |
Sec-CH-UA-Model |
"Pixel 3" |
Model urządzenia. |
Sec-CH-UA-Bitness |
"64" |
Liczba bitów podstawowej architektury (czyli rozmiar w bitach liczby całkowitej lub adresu pamięci). |
Przykładowa wymiana
Przykładowa wymiana danych wyglądałaby tak:
⬆️ Pierwsze żądanie z przeglądarki
Przeglądarka wysyła żądanie strony /downloads
do witryny i przesyła domyślny podstawowy klient 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ź serwera
Serwer wysyła stronę z powrotem i dodatkowo prosi o pełną wersję przeglądarki i platformę.
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 przesyła dodatkowe wskazówki we wszystkich 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
Oprócz nagłówków do atrybutu User-Agent można też uzyskać dostęp w JavaScript za pomocą funkcji navigator.userAgentData
. Domyślne informacje nagłówka Sec-CH-UA
, Sec-CH-UA-Mobile
i Sec-CH-UA-Platform
są dostępne odpowiednio w właściwościach 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 uzyskuje się za pomocą wywołania getHighEntropyValues()
. Termin „wysoka entropia” odnosi się do entropii informacji, czyli ilości informacji, które te wartości ujawniają o przeglądarce użytkownika. Podobnie jak w przypadku żądania dodatkowych nagłówków, to przeglądarka decyduje, jakie wartości (jeśli w ogóle) 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"
}
Prezentacja
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.
Czas trwania 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 podania 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 żądania
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 otrzymamy inny nagłówek Accept-CH
, całkowicie zastąpi on obecne wskazówki wysyłane przez przeglądarkę.
⬇️ Odpowiedź
Accept-CH: Sec-CH-UA-Bitness
⬆️ Kolejne żądania
Sec-CH-UA-Platform: "64"
Wcześniej przesłane Sec-CH-UA-Full-Version-List
nie zostanie wysłane.
Najlepiej rozpatrywać nagłówek Accept-CH
jako określenie pełnego zestawu podpowiedzi na danej stronie, co oznacza, że przeglądarka wysyła określone podpowiedzi do wszystkich zasobów podrzędnych na tej stronie. Wskazówki będą widoczne w następnych elementach nawigacji, ale nie należy zakładać, że będą one wyświetlane.
Możesz też skutecznie usunąć wszystkie wskazówki wysyłane przez przeglądarkę, wysyłając w odpowiedzi pusty obiekt Accept-CH
. Rozważ dodanie tego dowolnym miejscu, w którym użytkownik resetuje preferencje lub wylogowuje się z Twojej witryny.
Ten wzór odpowiada też działaniu podpowiedzi za pomocą tagu <meta http-equiv="Accept-CH" …>
. Żądane wskazówki będą wysyłane tylko w przypadku żądań zainicjowanych przez stronę, a nie w przypadku żadnej późniejszej nawigacji.
Zakres podpowiedzi i żądania między domenami
Domyślnie wskazówki dotyczące klienta będą wysyłane tylko w przypadku żądań dotyczących tego samego pochodzenia. Oznacza to, że jeśli poprosisz o konkretne wskazówki dotyczące https://example.com
, ale zasoby, które chcesz zoptymalizować, znajdują się na https://downloads.example.com
, nie otrzymasz żadnych wskazówek.
Aby zezwolić na wskazówki dotyczące żądań między domenami, należy określić każdą wskazówkę i źródło za pomocą nagłówka Permissions-Policy
. Aby zastosować to w sposobie wskazówki dotyczącej klienta User-Agent, musisz zmienić wskazówkę na małe litery 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 wysłane do cdn.provider
lub img.example.com
DPR: 2
Gdzie stosować wskazówki dotyczące klienta użytkownika?
Najprostszą odpowiedzią jest to, że należy przerobić wszystkie miejsca, w których analizowany jest nagłówek User-Agent lub używane są wywołania JavaScript, które uzyskują dostęp do tych samych informacji (czyli navigator.userAgent
, navigator.appVersion
lub navigator.platform
), aby zamiast tego używać podpowiedzi klienta User-Agent.
Ponownie przejrzyj 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, korzystając z ulepszeń progresywnych, wykrywania funkcji lub projektowania RWD. Podstawowym problemem związanym z korzystaniem z danych klienta użytkownika jest to, że zawsze utrzymujesz mapowanie między badaną usługą a włączanym przez nią działaniem. Jest to koszt utrzymania, który pozwala zapewnić kompleksowe wykrywanie i aktualność.
Mając na uwadze te zastrzeżenia, repozytorium User-Agent Client Hints zawiera listę prawidłowych przypadków użycia witryn.
Co się dzieje z ciągiem znaków User-Agent?
Planujemy zminimalizować możliwość ukrytego śledzenia w internecie przez zmniejszenie ilości informacji identyfikujących udostępnianych przez obecny ciąg znaków User-Agent, nie powodując przy tym niepotrzebnych zakłóceń w dotychczasowych witrynach. Wskazówki dotyczące klienta dotyczące informacji User-Agent dają Ci teraz możliwość zapoznania się z nową funkcją i eksperymentowania z nią, zanim wprowadzimy jakiekolwiek zmiany w ciągu informacji User-Agent.
Ostatecznie informacje w ciągu znaków User-Agent zostaną ograniczone, aby zachować format starszy, podając tylko informacje o wysokiej jakości przeglądarki i istotne informacje o wersji zgodnie z domyślnymi podpowiedziami. W Chromium ta zmiana została odroczona co najmniej do 2022 r., aby dać ekosystemowi więcej czasu na ocenę nowych możliwości podpowiedzi klienta dotyczącego użytkownika.
Możesz przetestować tę funkcję, włączając flagę about://flags/#reduce-user-agent
w Chrome 93 (uwaga: w wersjach Chrome 84–92 ta flaga miała nazwę about://flags/#freeze-user-agent
). Ze względu na zgodność z konkretnymi informacjami spowoduje to zwrócenie ciągu znaków z wpisami historycznymi. Może to być 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 Sergey Zolkin na Unsplash