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. Zostało to zdefiniowane już w 1996 r. (RFC 1945 dla HTTP/1.0), gdzie można znaleźć pierwotną definicję ciągu znaków Klient użytkownika, która zawiera przykład:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Ten nagłówek miał na celu określenie w kolejności ważności produktu (np. przeglądarki lub biblioteki) i 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 oraz wystarczającą liczbę wskazówek, aby stwierdzić, że jest to przeglądarka mobilna. Oprócz tego zawiera też kilka odwołań do innych przeglądarek ze względów historycznych.
Połączenie tych parametrów z ogromną różnorodnoś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.
Konieczne jest też zwiększenie zgodności z internetem w przypadku ciągu User-Agent. Jest on nieustrukturyzowany, więc jego parsowanie powoduje zbędną złożoność, która często jest przyczyną błędów i problemów z kompatybilnoś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 klienta wymuszają model, w którym serwer musi poprosić przeglądarkę o zbiór danych o kliencie (wskazówek), a przeglądarka stosuje własne zasady lub konfigurację użytkownika, aby określić, jakie dane zwracać. Oznacza to, że zamiast domyślnie udostępniać wszystkie informacje w nagłówku User-Agent, dostęp jest teraz zarządzany w wyraźny i sprawdzalny sposób. 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. Szczegółowe informacje znajdziesz w artykule Automatyzacja wyboru zasobów za pomocą wskazówek klienta, ale poniżej znajdziesz krótkie przypomnienie tego procesu.
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" />
W kolejnych żądaniach przeglądarka może wysłać te nagłówki:
⬆️ 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 żądania User-Agent
⬇️ 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ą na temat przeglądarki 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 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 żą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ślający kompletny zestaw podpowiedzi na danej stronie, co oznacza, że przeglądarka wysyła określone podpowiedzi dla 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 element 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ń z innych źródeł, należy określić każdy z tych żądań i pochodzące z nich źródła 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ź 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.
Warto też ponownie sprawdzić, jak używasz informacji User-Agent i w miarę możliwości zastąpić 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 User-Agent jest to, że zawsze musisz utrzymywać mapowanie między usługą, którą sprawdzasz, a zachowaniem, które umożliwia. Jest to koszt utrzymania, który pozwala zapewnić kompleksowe wykrywanie i aktualność.
Pamiętając o tych ograniczeniach, w repozytorium User-Agent Client Hints znajdziesz kilka prawidłowych zastosowań w przypadku witryn.
Co się dzieje z ciągiem znaków User-Agent?
Planujemy zminimalizować możliwość ukrytego śledzenia w internecie przez ograniczenie 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 te same informacje o wysokiej jakości i wersji przeglądarki, które są dostępne w podpowiedzeniach domyślnych. 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). Z powodów związanych ze zgodnością zwraca on ciąg znaków z historycznymi wpisami, ale z oczyszczonymi szczegółami. 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