Przeprowadź migrację do wskazówek dotyczących klienta użytkownika

Strategie migracji witryny z używania ciągu znaków klienta użytkownika do nowe wskazówki dotyczące klienta użytkownika.

Rowan Merewood

Polecenie User-Agent jest znaczący pasywny odcisk cyfrowy w przeglądarkach, a także trudna do przetworzenia. Istnieją jednak wszystkie rodzaje prawidłowych powodów gromadzenia i przetwarzania danych klienta użytkownika, więc potrzebne jest ku lepszemu rozwiązaniu. Wskazówki dotyczące klienta użytkownika zapewniają zarówno jawny sposób, zadeklarowanie, że potrzebujesz danych klienta użytkownika i metod ich zwracania w pliku i łatwy w użyciu format.

Z tego artykułu dowiesz się, jak kontrolować dostęp do danych klienta użytkownika oraz przenoszenia danych związanych z ciągiem znaków klienta użytkownika do narzędzia User-Agent Client Hints.

Kontrola zbierania i wykorzystywania danych klienta użytkownika

Tak jak w przypadku każdej formy gromadzenia danych, należy zawsze zastanowić się, dlaczego jak je zbierać. Pierwszy krok, niezależnie od tego, czy podjąć jakiekolwiek działania, zrozumieć, gdzie i dlaczego korzystasz z danych klienta użytkownika.

Jeśli nie wiesz, czy i gdzie są wykorzystywane dane klienta użytkownika, spróbuj wyszukać dla interfejsu navigator.userAgent i kodu backendu dla użyj nagłówka HTTP User-Agent. Należy też sprawdzić kod interfejsu w przypadku korzystania z już wycofanych funkcji, takich jak navigator.platform czy navigator.appVersion

Z funkcjonalnego punktu widzenia spójrz na dowolne miejsce w kodzie, nagrywanie lub przetwarzanie:

  • Nazwa lub wersja przeglądarki
  • Nazwa lub wersja systemu operacyjnego
  • Marka lub model urządzenia
  • Typ procesora, architektura lub szybkość transmisji bitów (np. 64-bitowy)

Możliwe jest również, że używasz biblioteki lub usługi innej firmy, aby przetwarza klienta użytkownika. W takim przypadku sprawdź, czy aktualizują się do ze wskazówkami dotyczącymi klienta użytkownika.

Czy używasz tylko podstawowych danych klienta użytkownika?

Domyślny zestaw wskazówek dotyczących klienta użytkownika obejmuje:

  • Sec-CH-UA: nazwa przeglądarki i wersja główna/istotna.
  • Sec-CH-UA-Mobile: wartość logiczna wskazująca urządzenie mobilne.
  • Sec-CH-UA-Platform: nazwa systemu operacyjnego
    • Ta zmiana została zaktualizowana w specyfikacji i będzie uwzględniona w Chrome, oraz w innych przeglądarkach opartych na Chromium.

Proponowana w zmniejszonej wersji ciągu znaków klienta użytkownika tych podstawowych informacji w sposób zgodny wstecznie. Na przykład zamiast Chrome/90.0.4430.85 ciąg będzie zawierać Chrome/90.0.0.0.

Jeśli sprawdzasz ciąg znaków klienta użytkownika tylko pod kątem nazwy przeglądarki, wersji głównej lub systemu operacyjnego, kod będzie nadal działać, choć prawdopodobnie aby wyświetlić ostrzeżenia o wycofaniu.

Możesz i powinno zacząć korzystać z instrukcji dotyczących klienta użytkownika, ale możesz mieć starszą wersję kod lub ograniczenia zasobów, które to uniemożliwiają. Zmniejszenie ilości informacji ciąg znaków klienta użytkownika w taki sposób, który jest zgodny wstecznie, ma zagwarantować, że chociaż istniejący kod będzie otrzymywać mniej szczegółowe informacje, zachowują podstawowe funkcje.

Strategia: interfejs JavaScript API na żądanie po stronie klienta

Jeśli obecnie używasz wersji navigator.userAgent, przejdź na preferowana jest wartość navigator.userAgentData, zanim wrócisz do analizy składni jako ciąg znaków klienta użytkownika.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

Jeśli sprawdzasz urządzenie mobilne lub komputer, użyj wartości logicznej mobile:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands to tablica obiektów o brand i version właściwości, w których przeglądarka może podać listę swoich właściwości marek. Możesz uzyskać do niego dostęp bezpośrednio w postaci tablicy lub użyć Wywołanie funkcji some() sprawdzające, czy istnieje określony wpis:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

Jeśli potrzebujesz jednej z bardziej szczegółowych wartości klienta użytkownika o wysokiej entropii, musisz go określić i sprawdzić wynik w zwróconym Promise:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

To rozwiązanie może też być przydatne, jeśli chcesz przejść po stronie serwera do przetwarzania po stronie klienta. Interfejs JavaScript API nie wymagają dostępu do nagłówków żądań HTTP, więc wartości klienta użytkownika można żądać na stronie w dowolnym miejscu.

Strategia: statyczny nagłówek po stronie serwera

Jeśli używasz nagłówka żądania User-Agent na serwerze i potrzebujesz dane są stosunkowo spójne w całej witrynie, określ żądane wskazówki dotyczące klienta w formie statycznego zestawu odpowiedzi. To jest Jest to stosunkowo proste rozwiązanie, ponieważ zwykle wystarczy je skonfigurować lokalizacji. Na przykład może znajdować się w konfiguracji Twojego serwera WWW, jeśli masz już tam dodaj nagłówki, konfigurację hostingu lub konfigurację najwyższego poziomu czyli platformy lub platformy, której używasz w swojej witrynie.

Rozważ tę strategię, jeśli zmieniasz lub dostosowujesz odpowiedzi wyświetlane na podstawie danych klienta użytkownika.

Przeglądarki i inne klienty mogą oferować różne domyślne wskazówki, więc sprawdzoną metodą jest określenie wszystkiego, co jest potrzebne, nawet jeśli jest on zwykle udostępniany przez wartość domyślną.

Na przykład bieżące ustawienia domyślne Chrome będą wyglądać tak:

⩍️ nagłówki odpowiedzi

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

Jeśli chcesz też otrzymywać w odpowiedziach informacje o modelu urządzenia, wyślij:

⩍️ nagłówki odpowiedzi

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

Przy przetwarzaniu danych po stronie serwera należy najpierw sprawdzić, czy Nagłówek Sec-CH-UA został wysłany, a następnie zastępował nagłówek User-Agent , jeśli nie jest on dostępny.

Strategia: przekazywanie wskazówek do żądań z innych domen

Gdy żądasz zasobów podrzędnych z innych domen lub witryn, które wymagają Wskazówki dotyczące klienta użytkownika będą wysyłane w odpowiedzi na żądania klienta. bezpośrednio określ wymagane wskazówki za pomocą zasad dotyczących uprawnień.

Załóżmy na przykład, że https://blog.site hostuje zasoby na https://cdn.site, który może zwracać zasoby zoptymalizowane pod kątem konkretnego urządzenia. https://blog.site może poprosić o podpowiedź Sec-CH-UA-Model, ale musi: wyraźnie przekaż korzystanie z tej funkcji użytkownikowi https://cdn.site za pomocą funkcji Permissions-Policy nagłówek. Lista wskazówek kontrolowane przez zasady jest dostępna na stronie Wskazówki dotyczące klientów Infrastruktura wersja robocza

🏏️ Odpowiedź od użytkownika blog.site przekazująca wskazówkę

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ Żądanie do zasobów podrzędnych zasobu cdn.site zawiera podpowiedź delegowaną

Sec-CH-UA-Model: "Pixel 5"

Możesz określić wiele wskazówek dla wielu źródeł, a nie tylko do zakresu ch-ua:

☔️ Odpowiedź od użytkownika blog.site z przekazywaniem wielu wskazówek do różnych źródeł

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

Strategia: przekazywanie wskazówek do elementów iframe

Elementy iframe z innych domen działają podobnie do zasobów z innych domen, ale w atrybucie allow określ wskazówki, które chcesz przekazać.

🏏️ Odpowiedź od: blog.site

Accept-CH: Sec-CH-UA-Model

↪️ HTML dla: blog.site

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ Prośba do: widget.site

Sec-CH-UA-Model: "Pixel 5"

Atrybut allow w elemencie iframe zastępuje wszystkie nagłówki Accept-CH, które widget.site może się wysyłać, więc upewnij się, że są określone wszystkie elementy Witryna w elemencie iframe musi korzystać z tego elementu.

Strategia: dynamiczne wskazówki po stronie serwera

Jeśli na określonych etapach ścieżki użytkownika potrzebujesz większego wyboru niż w pozostałej części witryny, możesz poprosić o nie na żądanie, a nie statycznie w całej witrynie. To bardziej skomplikowane, ale jeśli masz już ustawione różne nagłówki dla poszczególnych tras, jest to wykonalne.

Warto pamiętać, że każde wystąpienie funkcji Accept-CH spowoduje zastąpienie istniejącego zestawu. Jeśli więc dynamicznie się zmieniasz ustaw nagłówek, wtedy każda strona musi żądać pełnego zestawu wymaganych wskazówek.

Na przykład możesz mieć w witrynie jedną sekcję, w której ikony i elementy sterujące pasujące do systemu operacyjnego użytkownika. Aby to zrobić, chcesz dodatkowo pobierać Sec-CH-UA-Platform-Version, aby wyświetlać odpowiednie zasobów podrzędnych.

🏏️ Nagłówki odpowiedzi dla: /blog

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

🏏️ Nagłówki odpowiedzi dla: /app

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

Strategia: przy pierwszym żądaniu wymagane są wskazówki po stronie serwera

Może się zdarzyć, że będziesz potrzebować więcej wskazówek niż domyślny zestaw wskazówek na pierwszej prośby, ale będzie to raczej rzadkie, dlatego upewnij się, przeanalizował uzasadnienie.

Pierwsze żądanie tak naprawdę oznacza pierwsze żądanie najwyższego poziomu dla danego źródła. wysłanych podczas tej sesji przeglądania. Domyślny zestaw wskazówek obejmuje przeglądarkę nazwę z wersją główną, platformą i wskaźnikiem komórki. Dlatego pytanie zapytać, czy przy wstępnym wczytaniu strony trzeba wymagać rozszerzonych danych?

Dodatkowe wskazówki dotyczące pierwszego żądania można uzyskać na 2 sposoby. Po pierwsze, za pomocą nagłówka Critical-CH. Ma taki sam format jak Accept-CH ale informuje przeglądarkę, że powinna natychmiast ponowić próbę, jeśli pierwszy wysłano bez krytycznej wskazówki.

⬆️ Wstępna prośba

[With default headers]

⩍️ nagłówki odpowiedzi

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 Przeglądarka ponawia pierwsze żądanie z dodatkowym nagłówkiem

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

Spowoduje to naliczenie dodatkowych kosztów przy ponownych próbach przy pierwszym żądaniu, ale koszty implementacji są stosunkowo niskie. Wyślij dodatkowy nagłówek i przeglądarkę zajmie się resztą.

W sytuacjach, w których naprawdę trzeba podać dodatkowe wskazówki, pierwsze ładowanie strony, Niezawodność wskazówek dla klienta oferta pakietowa określa trasę w celu określenia wskazówek w ustawieniach na poziomie połączenia. Ten korzysta z protokołu Application-Layer Protocol Ustawienia(ALPS) – rozszerzenie do TLS 1.3, aby umożliwić wczesne przekazywanie wskazówek w połączeniach HTTP/2 i HTTP/3. Ten jest wciąż na wczesnym etapie, ale jeśli aktywnie zarządzasz własnym protokołem TLS ustawień połączenia, to dobry moment, aby coś udostępnić.

Strategia: obsługa starszych wersji usług

W Twojej witrynie może znajdować się starszy kod lub kod innej firmy, który zależy od navigator.userAgent łącznie z fragmentami ciągu znaków klienta użytkownika, które zostaną zredukowane. W dłuższej perspektywie warto zaplanować przejście na odpowiednik navigator.userAgentData wykonuje połączenia, ale jest to rozwiązanie tymczasowe.

Zastąpienie UA-CH ma małą biblioteka, która pozwala zastąpić navigator.userAgent nowym ciągiem znaków utworzona na podstawie żądanych wartości navigator.userAgentData.

Na przykład ten kod wygeneruje ciąg klienta użytkownika, który dodatkowo zawiera słowo „model”, podpowiedź:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

Powstały ciąg znaków wyświetli model Pixel 5, ale nadal będzie widoczny zmniejszony 92.0.0.0 ze względu na brak prośby o podpowiedź uaFullVersion:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

Dalsza pomoc

Jeśli te strategie nie dotyczą Twojego przypadku użycia, rozpocznij dyskusję w privacy-sandbox-dev-support repozytorium Wspólnie omówimy Twój problem.

Fot. Ricardo Rocha w Unsplash