Poprawa prywatności użytkowników i wygody programistów dzięki wskazówkom klienta użytkownika

User-Agent Client Hints to nowe rozszerzenie interfejsu Client Hints API, które umożliwia deweloperom uzyskiwanie dostępu do informacji o przeglądarce użytkownika w sposób zapewniający ochronę prywatności i ergonomię.

Rowan Merewood

Yoav Weiss

Wskazówki dla klienta pozwalają programistom aktywnie prosić o informacje na temat urządzeń lub warunków, bez konieczności analizowania ich z klienta użytkownika (UA). ciągu znaków. Wyznaczanie alternatywnej trasy to pierwszy krok do tego, zmniejsza szczegółowość ciągu znaków klienta użytkownika.

Dowiedz się, jak zaktualizować obecne funkcje, które wymagają analizy składni Ciąg znaków klienta użytkownika, aby korzystać z instrukcji dotyczących klienta użytkownika.

Uwaga: jeśli korzystasz już z instrukcji klienta User-Agent Client Hints, pamiętaj, że od wersji Chrome 90 format nagłówka został zmieniony i tokeny Accept-CH muszą dokładnie odpowiadać zostały zwrócone nagłówki.

Tło

Gdy przeglądarka wysyła żądania, podają informacje o przeglądarce aby serwery mogły włączyć statystyki i dostosować odpowiedź. Zostało to zdefiniowane już w 1996 roku (RFC 1945 dla HTTP/1.0), gdzie można znajdź pierwotną definicję ciągu znaków User-Agent, która zawiera przykład:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Ten nagłówek służył do określania (w kolejności według istotności) produktu (np. (przeglądarka lub biblioteka) oraz komentarz (np. wersję).

Stan ciągu znaków klienta użytkownika

W ciągu dekad ten ciąg wygenerował różne dodatkowe szczegółowe informacje o kliencie przesyłającym żądanie (oraz informacje o problemie ze względu na negatywną sytuację); zgodność). Widać to, gdy spojrzymy na klienta użytkownika Chrome ciąg znaków:

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 wersja, model urządzenia, marka i pełna wersja przeglądarki, a także kilka wskazówek, wywnioskować, że chodzi o przeglądarkę mobilną i nie wspominając o wielu odniesieniach 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, jednoznaczną identyfikację użytkowników.

Ciąg znaków klienta użytkownika umożliwia wiele uzasadnionych przypadków użycia, i służą deweloperom i właścicielom witryn. Jest jednak kluczowe znaczenie ma też to, aby użytkownicy prywatność jest chroniona przed ukrytymi metodami śledzenia, a wysyłanie informacji UA domyślnie narusza ten cel.

Trzeba też poprawić zgodność z internetem, jeśli chodzi o klienta użytkownika. ciągu znaków. Jest nieuporządkowany, więc analizowanie go skutkuje zbędną złożonością, co jest często przyczyną błędów i problemów ze zgodnością witryny, które mają negatywny wpływ na użytkowników. Problemy te są także nieproporcjonalnie szkodliwe dla użytkowników mniej popularnych przeglądarek, może nie udać się przeprowadzić testów pod kątem ich konfiguracji.

Przedstawiamy nowe wskazówki dotyczące klienta użytkownika

Wskazówki dotyczące klienta użytkownika umożliwiają dostęp do tych samych informacji, ale w sposób zapewniający ochronę prywatności, włącz przeglądarki, aby ostatecznie zmniejszyć domyślne ustawienie ciągu znaków User-Agent transmitowanie wszystkiego. Wskazówki dla klienta wymuszają model, w którym serwer musi poprosić przeglądarkę o zebranie danych o kliencie (wskazówki), a przeglądarka stosuje własne zasady lub konfigurację użytkownika do określać, jakie dane są zwracane. Zamiast ujawniać wszystkie do informacji o kliencie użytkownika, dostęp jest teraz zarządzany w sposób bezpośredni i o modzie. Prostsze interfejsy API mogą być też przydatne dla programistów – nie trzeba ich już stosować wyrażenia.

Obecny zestaw wskazówek dla klienta opisuje przede wszystkim sposób wyświetlania i możliwości połączeń. 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 konkretne wskazówki dla klienta w nagłówku:

Љ️ Odpowiedź z serwera

Accept-CH: Viewport-Width, Width

Lub metatag:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

Przeglądarka może następnie zdecydować się na wysłanie poniższych nagłówków z powrotem żądania:

⬆️ Następna prośba

Viewport-Width: 460
Width: 230

Serwer może zróżnicować swoje odpowiedzi, na przykład wyświetlając obrazy w odpowiednie rozwiązanie.

Uwaga: toczą się dyskusje na temat włączania wskazówek dla klienta w przypadku pierwszej prośby. ale rozważ projektowanie responsywne, stopniowego ulepszania naszych usług.

Wskazówki dotyczące klienta użytkownika rozszerzają zakres właściwości za pomocą interfejsu Sec-CH-UA prefiks, który można określić w nagłówku odpowiedzi serwera Accept-CH. Dla każdego szczegóły, zacznij od wyjaśniania, zapoznaj się z pełną ofertą.

Uwaga: wskazówki dla klienta są wysyłane tylko przez bezpieczne połączenia, więc upewnij się, że masz przenieśli Twoją witrynę do HTTPS.

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ę istotną / główną, oraz wskaźnik, jeśli klient korzysta z urządzenia mobilnego:

⬆️ 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"

Uwaga: te właściwości są bardziej złożone niż pojedyncza wartość, dlatego uporządkowane Nagłówki służą do reprezentowania list i wartości logicznych.

Nagłówki odpowiedzi i żądań klienta użytkownika

⩍️ Odpowiedź Accept-CH ⬆️ Nagłówek żądania	⬆️ Żądanie 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 korzysta z urządzenia mobilnego (?1 – prawda) czy nie (?0 – fałsz).
Sec-CH-UA-Full-Version	"84.0.4143.2"	[Wycofano]Kompletna 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łna wersja.
Sec-CH-UA-Platform	"Android"	Platforma, z której korzysta urządzenie, zwykle jest to system operacyjny.
Sec-CH-UA-Platform-Version	"10"	Wersja platformy lub systemu operacyjnego.
Sec-CH-UA-Arch	"arm"	Podstawowa architektura urządzenia. Choć wyświetlenie strony może nie mieć związku z wyświetlaniem, witryna może oferować możliwość pobrania pliku w domyślnym formacie.
Sec-CH-UA-Model	"Pixel 3"	Model urządzenia.
Sec-CH-UA-Bitness	"64"	Bitwa bazowej architektury (tzn. rozmiar w bitach liczby całkowitej lub adresu pamięci)

Ważne: kwestie dotyczące prywatności i zgodności oznaczają, że wartość może być pusta, zwracany lub wypełniony różną wartością. Jest to tzw. GREA.

Przykładowa giełda

Przykładowa giełda może wyglądać tak:

⬆️ Wstępne żądanie z przeglądarki
Przeglądarka żąda /downloads z witryny i wysył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ź z serwera
Serwer wysyła stronę z powrotem i dodatkowo prosi o podanie pełnej wersji przeglądarki i platformy.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

⬆️ Kolejne żądania
Przeglądarka przyznaje serwerowi dostęp do danych zawiera dodatkowe informacje i odsyła dodatkowe wskazówki w kolejnych żądań.

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 pola User-Agent możesz uzyskać dostęp w JavaScripcie za pomocą navigator.userAgentData Domyślne ustawienia: Sec-CH-UA, Sec-CH-UA-Mobile oraz Informacje z nagłówka Sec-CH-UA-Platform są dostępne za pomocą interfejsów brands oraz mobile właściwości:

// 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ę poprzez wywołanie getHighEntropyValues(). „wysoka entropia” oznacza entropię informacji, w innym słowa – ilość informacji na temat przeglądarki. Podobnie jak w przypadku żądania dodatkowych nagłówków, wybór należy do przeglądarki, jakie wartości są zwracane.

// 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 user-agent-client-hints.glitch.me.

Uwaga: upewnij się, że używasz Chrome w wersji 89 lub nowszej.

Cykl życia podpowiedzi i resetowanie

Wskazówki określone w nagłówku Accept-CH będą wysyłane na czas lub do 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 do momentu zamknięcia przeglądarki.

⬆️ 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, zostanie to całkowicie usunięte zastąp bieżące wskazówki wysyłane przez przeglądarkę.

⩍️ Odpowiedź

Accept-CH: Sec-CH-UA-Bitness

⬆️ Kolejne prośby

Sec-CH-UA-Platform: "64"

Pytanie o: Sec-CH-UA-Full-Version-List nie zostanie wysłane.

Nagłówek Accept-CH najlepiej traktować jako określenie pełnego zestawu wskazówki dotyczące danej strony, co oznacza, że przeglądarka wysyła określone wskazówki dla wszystkich zasobów podrzędnych na tej stronie. Wskazówki będą obowiązywać przez następne nawigacji, witryna nie powinna polegać na tym, że zostaną wyświetlone.

Sukces: zadbaj o to, aby użytkownicy mogli przekazywać cenne doświadczenia bez korzystania z tych narzędzi. i informacjami o nich. Chodzi o poprawę wrażeń użytkownika, a nie o jego definiowanie. Dlatego Są to „wskazówki” a nie „odpowiedzi” czyli „wymagania”.

Możesz również użyć tej opcji, aby usunąć wszystkie wskazówki wysyłane przez przeglądarkę. wysyłając w odpowiedzi puste pole Accept-CH. Zastanów się nad dodaniem tych elementów w dowolnym miejscu o resetowaniu ustawień lub wylogowaniu się użytkownika z Twojej witryny.

Ten wzorzec odpowiada również temu, jak działają wskazówki na podstawie <meta http-equiv="Accept-CH" …>. Żądane wskazówki zostaną wysłane tylko żądaniami zainicjowanymi przez stronę, a nie przy kolejnych odwiedzinach.

Zakres podpowiedzi i żądania z innych domen

Domyślnie wskazówki dla klienta będą wysyłane tylko w przypadku żądań z tej samej domeny. Oznacza to, jeśli prosisz o konkretne wskazówki w https://example.com, ale zasoby, chcą zoptymalizować, są w https://downloads.example.com, nie będą nie otrzymasz żadnych wskazówek.

Aby zezwolić na wskazówki dotyczące żądań z innych domen, należy określić każdą wskazówkę i źródło przez nagłówek Permissions-Policy. Aby zastosować tę metodę do klienta użytkownika, wpisz podpowiedź i usuń 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 dotyczące: cdn.provider lub img.example.com

DPR: 2

Gdzie można korzystać ze wskazówek dotyczących klienta użytkownika?

Pamiętaj, że musisz refaktoryzować wszystkie wystąpienia analizy nagłówek User-Agent lub użycie wywołań JavaScript, które mają dostęp do tych samych informacji (np. navigator.userAgent, navigator.appVersion, lub navigator.platform), aby umożliwić korzystanie z instrukcji dotyczących klienta użytkownika.

Pójdź o krok dalej, ponownie sprawdź, w jakim stopniu korzystasz z interfejsu User-Agent. i zastępować je innymi metodami, gdy tylko jest to możliwe. Można często aby osiągnąć ten sam cel, stopniowo ulepszając funkcje, wykrywaniem czy projektowaniem responsywnym. Podstawowym problemem związanym z korzystaniem z danych klienta użytkownika jest to, że zachowanie mapowania między sprawdzaną usługą a jej zachowaniem które umożliwia. To opłata za konserwację, która gwarantuje, że wykrywanie jest wyczerpująca i aktualna.

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?

Celem jest ograniczenie możliwości ukrytego śledzenia użytkowników w internecie przez zmniejszenie ilość informacji umożliwiających identyfikację ujawnianych przez istniejący ciąg znaków klienta użytkownika nie powodując nadmiernych zakłóceń w działaniu istniejących witryn. Przedstawiamy klienta użytkownika Wskazówki dla klienta dają teraz szansę na zrozumienie i eksperymentowanie z nowymi przed wprowadzeniem jakichkolwiek zmian w ciągach znaków User-Agent.

Ostatecznie informacje w ciągu znaków User-Agent zostaną zmniejszone, aby zachować starszego formatu, a jednocześnie udostępnia tylko tę samą przeglądarkę wysokiego poziomu zgodnie z domyślnymi wskazówkami. W Chromium ta zmiana odroczone co najmniej do 2022 r., aby dać ekosystemowi dodatkowy czas na ocenią nowe możliwości funkcji Wskazówki dotyczące klienta użytkownika.

Możesz przetestować jedną z wersji, włączając flaga about://flags/#reduce-user-agent z Chrome 93 (uwaga: ta flaga była o nazwie about://flags/#freeze-user-agent w wersjach Chrome 84–92). Dzięki temu zwraca ciąg z wpisami historycznymi ze względu na zgodność, ale z oczyszczone niuanse. 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: Sergey Zolkin włączono Odloty