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

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

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

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

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