Strategie migracji witryny z ciągu znaków klienta użytkownika do nowych wskazówek dla klienta użytkownika.
Ciąg znaków User-Agent to istotna powierzchnia pasywnego odcisku palca, która jest również trudna do przetworzenia w przeglądarkach. Istnieje jednak wiele uzasadnionych powodów gromadzenia i przetwarzania danych klienta użytkownika, więc potrzebna jest ścieżka do lepszego rozwiązania. Wskazówki dla klienta użytkownika umożliwiają zarówno wyraźne zadeklarowanie, że potrzebujesz danych klienta użytkownika, jak i metody ich zwracania w łatwym w użyciu formacie.
Z tego artykułu dowiesz się, jak kontrolować dostęp do danych klienta użytkownika i jak przenieść użycie ciągu znaków klienta użytkownika do instrukcji klienta użytkownika.
Kontrola zbierania i wykorzystywania danych klienta użytkownika
Podobnie jak w przypadku każdej formy zbierania danych, zawsze zastanów się, dlaczego to robisz. Pierwszym krokiem, niezależnie od tego, czy podejmiesz jakieś działanie, jest zrozumienie, gdzie i dlaczego używasz danych klienta użytkownika.
Jeśli nie wiesz, czy i gdzie są używane dane klienta użytkownika, rozważ wyszukanie w kodzie frontendu użycia navigator.userAgent, a w kodzie backendu zastosowanie nagłówka HTTP User-Agent. Zalecamy też sprawdzenie kodu frontendu pod kątem korzystania z wycofanych już funkcji, takich jak navigator.platform czy navigator.appVersion.
Z praktycznego punktu widzenia zastanów się nad miejscem w kodzie, w którym rejestrujesz lub przetwarzasz:
- Nazwa lub wersja przeglądarki
- Nazwa lub wersja systemu operacyjnego
- Marka lub model urządzenia
- Typ, architektura lub szybkość transmisji bitów (np. 64-bitowa)
Możliwe też, że do przetwarzania klienta użytkownika korzystasz z biblioteki lub usługi innej firmy. W takim przypadku sprawdź, czy aktualizują się, by obsługiwać podpowiedzi klienta użytkownika.
Czy używasz tylko podstawowych danych klienta użytkownika?
Domyślny zestaw wskazówek dla klienta użytkownika zawiera:
Sec-CH-UA: nazwa przeglądarki i wersja główna/znacząca.Sec-CH-UA-Mobile: wartość logiczna wskazująca urządzenie mobilne.Sec-CH-UA-Platform: nazwa systemu operacyjnego.- Zaktualizowaliśmy to w specyfikacji i wkrótce uwzględnimy to w Chrome i innych przeglądarkach opartych na Chromium.
Proponowana skrócona wersja ciągu znaków klienta użytkownika również zachowa te podstawowe informacje w sposób zgodny wstecznie. Na przykład zamiast Chrome/90.0.4430.85 ciąg znaków zawiera ciąg Chrome/90.0.0.0.
Jeśli w ciągu klienta użytkownika sprawdzasz tylko nazwę przeglądarki, wersję główną lub system operacyjny, Twój kod będzie nadal działać, choć mogą się wyświetlać ostrzeżenia o wycofaniu.
Możesz i powinien przejść na wskazówki dla klienta użytkownika, ale możliwe, że masz do czynienia ze starszymi ograniczeniami kodu lub zasobów, które to uniemożliwiają. Zmniejszenie informacji w ciągu znaków klienta użytkownika w taki sposób wsteczny ma sprawić, że chociaż istniejący kod będzie otrzymywał mniej szczegółowe informacje, nadal zachowa podstawowe funkcje.
Strategia: interfejs API JavaScript działający po stronie klienta na żądanie
Jeśli obecnie używasz navigator.userAgent, przed powrotem do analizy ciągu znaków klienta użytkownika wybierz navigator.userAgentData.
if (navigator.userAgentData) {
// use new hints
} else {
// fall back to user-agent string parsing
}
Jeśli sprawdzasz wersję na urządzenia mobilne lub komputery, użyj wartości logicznej mobile:
const isMobile = navigator.userAgentData.mobile;
userAgentData.brands to tablica obiektów o właściwościach brand i version, w której przeglądarka może ocenić zgodność z tymi markami. Możesz uzyskać do niego dostęp bezpośrednio w postaci tablicy lub użyć wywołania some(), aby sprawdzić, czy jest w nim obecny 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 dużej entropii, musisz ją określić i sprawdzić wynik w zwracanym obiekcie Promise:
navigator.userAgentData.getHighEntropyValues(['model'])
.then(ua => {
// requested hints available as attributes
const model = ua.model
});
Może Ci się też przydać ta strategia, jeśli chcesz przejść z przetwarzania po stronie serwera na przetwarzanie po stronie klienta. Interfejs JavaScript API nie wymaga dostępu do nagłówków żądań HTTP, więc wartości klienta użytkownika można zażądać w dowolnym momencie.
Strategia: statyczny nagłówek po stronie serwera
Jeśli używasz na serwerze nagłówka żądania User-Agent i Twoje potrzeby związane z tymi danymi są względnie spójne w całej witrynie, możesz określić żądane wskazówki dotyczące klienta w postaci statycznego zbioru odpowiedzi. Jest to stosunkowo proste, ponieważ zwykle wystarczy skonfigurować je tylko w jednym miejscu. Może to być np. konfiguracja serwera WWW, jeśli już tam dodano nagłówki, konfiguracja hostingu lub konfiguracja najwyższego poziomu platformy lub platformy, z której korzystasz w witrynie.
Rozważ tę strategię, jeśli przekształcasz lub dostosowujesz odpowiedzi wyświetlane na podstawie danych klienta użytkownika.
Przeglądarki i inne klienty mogą podawać inne domyślne wskazówki, dlatego warto określić wszystkie potrzebne informacje, nawet jeśli zazwyczaj są one ustawione domyślnie.
Bieżące wartości domyślne Chrome będą na przykład widoczne w takiej postaci:
🥭️ Nagłówki odpowiedzi
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
Jeśli w odpowiedzi chcesz też otrzymać informacje o modelu urządzenia, możesz wysłać:
🥭️ Nagłówki odpowiedzi
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA
Podczas przetwarzania tego nagłówka po stronie serwera sprawdź najpierw, czy odpowiedni nagłówek Sec-CH-UA został wysłany. Jeśli to zrobisz, skorzystaj z analizy nagłówka User-Agent, jeśli ten nagłówek jest niedostępny.
Strategia: przekazywanie wskazówek do żądań z innych domen
Jeśli prosisz o podzasoby pochodzące z innych domen lub z innych witryn, które wymagają wysyłania w żądaniach podpowiedzi klienta User-Agent, musisz wyraźnie wskazać oczekiwane wskazówki za pomocą zasady uprawnień.
Załóżmy na przykład, że https://blog.site hostuje w https://cdn.site zasoby, które mogą zwracać zasoby zoptymalizowane pod kątem konkretnego urządzenia.
https://blog.site może poprosić o wskazówkę Sec-CH-UA-Model, ale musi wyraźnie przekazać ją użytkownikowi https://cdn.site za pomocą nagłówka Permissions-Policy. Lista wskazówek kontrolowanych przez zasady jest dostępna w wersji roboczej infrastruktury wskazówek dla klientów
📲 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")
⬆️ Poproś o dostęp do zasobów podrzędnych w cdn.site – dołącz wskazówkę dotyczącą delegowanego
Sec-CH-UA-Model: "Pixel 5"
Możesz podać wiele wskazówek dla wielu źródeł, a nie tylko z zakresu ch-ua:
🥭️ Odpowiedź z kanału blog.site z przekazaniem wielu wskazówek różnym źródłom
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 wskazówki, które chcesz przekazać, określasz w atrybucie allow.
🎮️ Odpowiedź od użytkownika blog.site
Accept-CH: Sec-CH-UA-Model
↪️ Kod HTML: 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 każdy nagłówek Accept-CH, który widget.site może wysłać samodzielnie, dlatego upewnij się, że podano wszystkie elementy potrzebne witrynie w elemencie iframe.
Strategia: dynamiczne wskazówki po stronie serwera
Jeśli masz określone fragmenty ścieżki użytkownika, w przypadku których potrzebujesz większego wyboru wskazówek niż w pozostałych częściach witryny, możesz prosić o ich podpowiedzi na żądanie, a nie na stałe w całej witrynie. Zarządzanie takim procesem jest bardziej skomplikowane, ale jeśli masz już ustawione różne nagłówki dla poszczególnych tras, być może uda się to zrobić.
Pamiętaj, że każde wystąpienie nagłówka Accept-CH skutecznie zastąpi istniejący zbiór. Jeśli dynamicznie ustawiasz nagłówek, każda strona musi żądać pełnego zestawu wymaganych wskazówek.
Na przykład możesz mieć w swojej witrynie sekcję, w której chcesz dodać ikony i elementy sterujące zgodne z systemem operacyjnym użytkownika. W tym celu warto dodatkowo pobrać Sec-CH-UA-Platform-Version, aby udostępnić odpowiednie zasoby podrzędne.
🎮️ Nagłówki odpowiedzi dla zapytania /blog
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
🎮️ Nagłówki odpowiedzi dla zapytania /app
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA
Strategia: wskazówki po stronie serwera wymagane przy pierwszym żądaniu
Może się zdarzyć, że będziesz potrzebować więcej niż domyślny zestaw wskazówek w pierwszym żądaniu, ale będzie to rzadko używane, dlatego zapoznaj się z uzasadnieniem.
Tak naprawdę pierwsze żądanie oznacza pierwsze żądanie najwyższego poziomu dotyczące danego źródła wysłane w ramach tej sesji przeglądania. Domyślny zestaw wskazówek zawiera nazwę przeglądarki z wersją główną, platformę oraz wskaźnik urządzenia mobilnego. Zadaj sobie pytanie, czy potrzebujesz danych rozszerzonych przy wstępnym wczytaniu strony.
Dodatkowe wskazówki dotyczące pierwszego zgłoszenia dostępne są na 2 sposoby. Po pierwsze możesz użyć nagłówka Critical-CH. Ma on taki sam format jak Accept-CH, ale informuje przeglądarkę, że powinna natychmiast ponowić żądanie, jeśli pierwsza wiadomość została wysłana bez krytycznej podpowiedzi.
⬆️ Wstępne żądanie
[With default headers]
🥭️ Nagłówki odpowiedzi
Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model
🔃 Przeglądarka ponawia początkowe żądanie z dodatkowym nagłówkiem
[With default headers + …]
Sec-CH-UA-Model: Pixel 5
Wiąże się to z narzutem na ponowienie próby przy pierwszym żądaniu, ale koszt implementacji jest stosunkowo niski. Wyślij dodatkowy nagłówek, a przeglądarka zajmie się resztą.
W sytuacjach, gdy naprawdę wymagasz dodatkowych wskazówek przy pierwszym wczytaniu strony, propozycja niezawodności wskazówek dla klienta określa trasę do określania wskazówek w ustawieniach na poziomie połączenia. Wykorzystuje rozszerzenie Application-Layer Protocol Settings(ALPS) do TLS 1.3, aby umożliwić wcześniejsze przekazywanie wskazówek dotyczących połączeń HTTP/2 i HTTP/3. Wciąż jesteśmy na bardzo wczesnym etapie, ale jeśli aktywnie zarządzasz własnymi ustawieniami TLS i połączeniami, to dobry moment, aby coś z tym zrobić.
Strategia: obsługa starszej wersji
W witrynie może znajdować się starszy lub zewnętrzny kod, który zależy od parametru navigator.userAgent. Dotyczy to m.in. fragmentów ciągu znaków klienta użytkownika, które zostaną ograniczone. W dłuższej perspektywie należy zaplanować przejście na równoważne wywołania navigator.userAgentData, ale jest dostępne rozwiązanie tymczasowe.
Uzupełnianie UA-CH to mała biblioteka, która umożliwia zastąpienie navigator.userAgent nowym ciągiem znaków utworzonym na podstawie żądanych wartości navigator.userAgentData.
Na przykład ten kod wygeneruje ciąg klienta użytkownika, który będzie dodatkowo zawierał wskazówkę „model”:
import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
.then(() => { console.log(navigator.userAgent); });
Powstały ciąg znaków będzie zawierać model Pixel 5, ale nadal będzie pokazywać zredukowaną wartość 92.0.0.0, ponieważ wskazówka uaFullVersion nie została wysłana:
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 repozytorium privacy-sandbox-dev-support, a my wspólnie zajmiemy się Twoim problemem.
Fot. Ricardo Rocha w Unsplash