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 o urządzeniu lub warunkach użytkownika, bez konieczności analizowania tych informacji z ciągu znaków klienta użytkownika (UA). Zapewnienie tej alternatywnej trasy jest pierwszym krokiem do ostatecznego zmniejszenia szczegółowości ciągu znaków klienta użytkownika.

Dowiedz się, jak zaktualizować obecne funkcje, które wymagają analizy ciągu znaków User-Agent, aby korzystać ze wskazówek dotyczących klienta użytkownika.

Wprowadzenie

Gdy przeglądarki wysyłają żądania, podają informacje o przeglądarce i jej środowisku, dzięki czemu serwery mogą włączyć statystyki i dostosować odpowiedź. 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 miarę upływu dekad ten ciąg znaków zgromadził wiele dodatkowych informacji o kliencie przesyłającym żądanie (a także nieuzasadnionym z powodu kompatybilności wstecznej). Jak widać, patrząc na aktualny ciąg znaków klienta użytkownika 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, jego wersji, modelu urządzenia, marce i pełnej wersji przeglądarki, a także wystarczającą liczbę wskazówek, które wskazują, że przeglądarka mobilna jest używana. Nie wspomina także o liczbie 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 znaków User-Agent może zawierać wystarczającą ilość informacji, aby umożliwić jednoznaczną identyfikację poszczególnych użytkowników.

Ciąg znaków klienta użytkownika umożliwia korzystanie z wielu uzasadnionych przypadków użycia oraz służy deweloperom i właścicielom witryn. Ważne jest jednak również, aby prywatność użytkowników była 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 ciąg znaków klienta użytkownika. Jest ona nieustrukturyzowana, więc jej analiza powoduje zbędną złożoność, która często jest przyczyną błędów i problemów ze zgodnością witryny, które szkodzą użytkownikom. Te problemy w znacznym stopniu szkodzą też użytkownikom rzadziej korzystających z przeglądarek, ponieważ witryny mogły nie przetestować swojej konfiguracji.

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

Wskazówki dotyczące klienta użytkownika dają dostęp do tych samych informacji, ale w sposób bardziej chroniący prywatność. W rezultacie przeglądarki mogą w końcu zmniejszyć domyślną wartość przesyłania wszystkiego przez ciąg znaków User-Agent. 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 udostępniać domyślnie wszystkie informacje o kliencie użytkownika, można teraz zarządzać dostępem w sposób jawny i możliwy do skontrolowania. Prostsze interfejsy API mogą też przynieść korzyści deweloperom – koniec z wyrażeniami regularnymi.

Obecny zestaw wskazówek dotyczących klienta opisuje przede wszystkim możliwości przeglądarki i możliwości łączenia. 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 wysyłanie tych nagłówków z powrotem w kolejnych żądaniach:

⬆️ Następna prośba

Viewport-Width: 460
Width: 230

Serwer może zróżnicować swoje odpowiedzi, np. wyświetlać obrazy w odpowiedniej rozdzielczości.

Wskazówki dotyczące klienta użytkownika rozszerzają zakres właściwości za pomocą prefiksu Sec-CH-UA, który można określić w nagłówku odpowiedzi serwera Accept-CH. Aby poznać wszystkie szczegóły, zacznij od wyjaśniania, a potem przejdź do pełnej 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ę istotną / główną, platformę i wskaźnik, czy klient jest urządzeniem mobilnym:

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

Przykładowa giełda

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

⬆️ Wstępne żądanie z przeglądarki
Przeglądarka wysyła do witryny żądanie strony /downloads i wysyła swój 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 dodatkowych informacji i wysyła je z powrotem 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 klienta użytkownika można uzyskać dostęp w języku JavaScript za pomocą narzędzia navigator.userAgentData. Domyślne informacje o nagłówkach Sec-CH-UA, Sec-CH-UA-Mobile i Sec-CH-UA-Platform są dostępne 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 uzyskuje się poprzez wywołanie getHighEntropyValues(). Termin „wysoka entropia” odnosi się do entropii informacji, tzn. do 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 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"
}

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.

Cykl życia podpowiedzi i resetowanie

Wskazówki określone w nagłówku Accept-CH będą wysyłane na czas 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 otrzymasz inny nagłówek Accept-CH, spowoduje to całkowite zastąpienie bieżących wskazówek wysyłanych 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ówek wymaganych w przypadku danej strony – oznacza to, że przeglądarka wysyła określone wskazówki do wszystkich zasobów podrzędnych tej strony. Chociaż wskazówki zostaną zachowane przy następnej nawigacji, witryna nie powinna polegać na tym, że zostaną wyświetlone.

Możesz też użyć tej opcji, aby skutecznie wyczyścić wszystkie wskazówki wysyłane przez przeglądarkę przez wysłanie pustego pola Accept-CH w odpowiedzi. Możesz go dodać wszędzie tam, gdzie użytkownik resetuje ustawienia lub wylogowuje się z Twojej witryny.

Ten wzorzec pasuje również do sposobu działania wskazówek z wykorzystaniem 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 dla klienta będą wysyłane tylko w przypadku żądań z tej samej domeny. Oznacza to, że jeśli poprosisz o konkretne wskazówki dotyczące usługi https://example.com, ale zasoby, które chcesz zoptymalizować, znajdują się w https://downloads.example.com, nie otrzymają żadnych wskazówek.

Aby zezwolić na wskazówki dotyczące żądań z innych domen, każda wskazówka i źródło muszą być określone w nagłówku Permissions-Policy. Aby zastosować tę podpowiedź do 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 dotyczące: cdn.provider lub img.example.com

DPR: 2

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

Aby w takich przypadkach używać wskazówek klienta użytkownika, musisz przeprowadzić refaktoryzację wszystkich przypadków, w których analizujesz nagłówek User-Agent lub używasz wywołań JavaScript, które uzyskują dostęp do tych samych informacji (np. navigator.userAgent, navigator.appVersion lub navigator.platform).

Ponownie przejrzyj informacje o kliencie użytkownika i w miarę możliwości zastąp je innymi metodami. Ten sam cel często można osiągnąć, stosując progresywne ulepszenia, wykrywanie funkcji lub elastyczne projektowanie stron. 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 kwestia związana z konserwacją, która zapewnia kompleksowe i aktualne funkcje wykrywania.

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 tego planu jest zminimalizowanie możliwości ukrytego śledzenia w internecie przez ograniczenie ilości informacji umożliwiających identyfikację ujawnianych przez istniejący ciąg znaków klienta użytkownika, bez zakłócania działania istniejących witryn. Przedstawiamy wskazówki dla klienta dotyczące klienta użytkownika, dzięki którym możesz teraz zapoznać się z nowymi funkcjami i przetestować je, zanim w ciągu znaków klienta użytkownika zostaną wprowadzone jakiekolwiek zmiany.

W końcu ilość informacji w ciągu znaków User-Agent zostanie ograniczona. Dzięki temu zachowa się starszy format, a jednocześnie zachowany jest ten sam ogólny format przeglądarki i istotnych informacji o wersji zgodnie ze wskazówkami domyślnymi. W Chromium wprowadzenie tej zmiany zostało opóźnione do co najmniej 2022 roku, aby dać ekosystemowi dodatkowy czas na ocenę nowych funkcji wskazówek dotyczących klienta użytkownika.

Możesz przetestować jedną z wersji, włączając flagę about://flags/#reduce-user-agent z Chrome 93 (uwaga: w wersjach Chrome 84–92 ta flaga nosił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. 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 na filmie Unsplash