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

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ść.

Rowan Merewood

Yoav Weiss

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.

Uwaga: jeśli korzystasz już z wskazówek klienta User-Agent, pamiętaj, że od wersji Chrome 90 format nagłówka zmienił się, więc tokeny Accept-CH muszą dokładnie pasować do zwróconych nagłówków.

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.

Uwaga: trwają dyskusje na temat włączania wskazówek klienta w pierwszej prośbie, ale zanim zdecydujesz się na to rozwiązanie, rozważ zastosowanie projektu responsywnego lub ulepszania stopniowego.

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.

Uwaga: wskazówki klienta są wysyłane tylko przez bezpieczne połączenia, więc upewnij się, że Twoja witryna została przeniesiona na protokół 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ę 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"

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

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).

Ważne: ze względu na ochronę prywatności i uwzględniając kompatybilność, wartość może być pusta, nie zwracana lub wypełniona zmienną wartością. Nazywamy to GREASE.

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.

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

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.

Sukces: zawsze upewnij się, że bez tych informacji nadal możesz zapewnić użytkownikom satysfakcjonujące wrażenia. Ma ona na celu zwiększenie wygody użytkowników, a nie jej definiowanie. Dlatego nazywamy je „podpowiedziami”, a nie „odpowiedziami” czy „wymaganiami”!

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