Ta strona została przetłumaczona przez Cloud Translation API.

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.

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 przesył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 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 znaków User-Agent umożliwia wiele uzasadnionych sposobów użycia i pełni ważną funkcję 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 duży 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 User-Agent, dostęp jest teraz zarządzany w wyraźny i sprawdzalny sposób. Deweloperzy zyskują też prostszy interfejs API – nie trzeba już używać 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 konkretne 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` dla prawdy) czy nie (`?0` dla fałszu).
`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"`	Architektura podstawowa 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 ciąg znaków User-Agent.

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

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 pełny zestaw podpowiedzi na danej stronie. Oznacza to, ż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 strona nie powinna 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 obiekt Accept-CH. Rozważ dodanie tego w dowolnym miejscu, aby poinformować użytkownika, że zresetował on preferencje lub wylogował 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 w żądaniach między domenami, należy określić każdy z nich i pochodzące z nich żądania za pomocą nagłówka Permissions-Policy. Aby zastosować to w sposobie wskazówki dotyczącej klienta User-Agent, musisz zmienić ją 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"

⬆️ Żądania 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ć więcej czasu ekosystemowi 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