Zobacz jak działa User-Agent oraz jakie czekają go zmiany!
Narazie nie jest to jeszcze "standard" :)
User-Agent to nagłówek który pozwala na pobranie metadanych na temat urządzenia - takich jak wersja przeglądarki, platforma czy model urządzenia.
Jest to ciąg znaków na którego podstawie możemy zidentyfikować daną
przeglądarkę bądź program który wykonuje zapytanie http do naszego serwera www
po dany zasób - jak obrazek, albo kod HTML / CSS.
Dla kontekstu, w momencie gdy uruchamiamy dowolna stronę
internetowa z paska przeglądarki, przeglądarka robi zapytania poprzez protokół HTTP oraz otrzymuje odpowiedzi. Są to tzw.
request oraz response. Zarówno przeglądarka jak i serwer mogą takie nagłówki ustawiać (czyli np. przeglądarka ustawia nagłówki zapytań, serwer ustawia nagłówki odpowiedzi). Jednym z takich nagłówków zapytań czyli request headers jest właśnie User-Agent. Treść
tego nagłówka jest później dostępna w przeglądarce pod window.navigator.userAgent,
bądź w narzędziach developerskich w zakładce network, i sekcji headers
dla każdego zapytania http. I tutaj
ciekawostka: możesz podejrzeć swojego agenta użytkownika poprzez zapytanie o niego
google. "What is my user agent?" - no i mamy
odpowiedź. Omówmy więc jego zawartość - z reguły wygląda
on mniej więcej tak. Mozilla/5.0 to ogólny token
który określa że przeglądarka jest kompatybilna z mozillą - na dzień dzisiejszy jest to
obecne jedynie ze względów historycznych, aby zachować kompatybilność wsteczną sieci.
Następnie, w nawiasach mamy platformę - może to być nasz system operacyjny,
jak na przykład windows bądź linux, z opcjonalnymi informacjami o jego
architekturze. Kolejne opcje to wersja produktu, silniki przeglądarki
oraz dodatkowe metadane. Ciągi znaków User-Agent różnią się
między platformami, przez co powstały różne biblioteki do ich prasowania, bazujące
na skomplikowanych wyrażeniach regularnych. I tutaj kolejna ciekawostka -
user-parser-js, jedna z najpopularniejszych bibliotek do parsowania
ciągu User-Agent miała pod koniec 2021 roku publiczne
vulnerability, czyli po prostu lukę bezpieczeństwa, przez którą hakerzy
kopali kryptowaluty na zainfekowanych maszynach, czy próbowali wykraść prywatne dane użytkowników.
Luka ta została załatana w ciągu pięciu godzin poprzez publikacje
nowych wersji biblioteki. [ a komu to potrzebne, a dlaczego ]
Do najpopularniejszych przypadków kiedy potrzebny jest
User-Agent należy między innymi szeroko pojęta analityka, diagnoza
błędów na konkretnych wersjach przeglądarek, czy cała gałąź marketingu oparta
na targetowanych reklamach. Natomiast UserAgent ma też swoje problemy:
między innymi jest to prywatność i bezpieczeństwo,
ponieważ udostępnia wrażliwe dane na temat użytkownika; idąc dalej
"fingerprinting" - czyli identyfikacja i śledzenie konkretnych użytkowników sieci
bez korzystania z rozwiązań typu ciasteczka; ze względu na różne warianty
formatów tego jak User-Agent jest reprezentowany
jego interpretacja jest problematyczna i dlatego właśnie parsery wykorzystują skomplikowane
wyrażenie regularne, aby wysnuć hipotezę - czy tak zwany "educated
guess" - na temat tego jakie jest urządzenie z którego korzysta nasz użytkownik.
No i co dalej? Na horyzoncie pojawia się User-Agent Client Hints.
To Chrome jest prekursorem tego rozwiązania zapowiadając
plan tak zwanego "zamrażania" klasycznych User-Agent i zastąpienia
ich przez User-Agent Client Hints. Zamrożenie to sytuacja
w której część treści i User-Agenta zmieni się w kolejnych release'ach Chrome,
ustawiając wersję systemu operacyjnego na stałą, tak samo jak model urządzenia,
czy nie pokazując konkretnej wersji przeglądarki - a jedynie główny release.
W tym momencie jesteśmy tutaj na roadmapie Chrome i jak widzimy w wersji 101
tej przeglądarki widnieje monit informujący o planowanych zmianach.
Po wdrożeniu Client Hints, developerzy będą mieli do czynienia z teoretycznie prostszym API -
koniec z wyrażeniami regularnymi aby dostać się do informacji na której
nam zależy. Jednak przed nami sporo wyzwań. Domyślnie
jedynie trzy nagłówki żądania będą dostępne dla każdego zapytania, czyli nagłówki
dotyczące przeglądarki i wersji informacji czy urządzenie jest urządzeniem
mobilnym oraz platformy. Jeśli aplikacja potrzebuje
więcej informacji niż nagłówki domyślne serwer będzie musiał poprosić o ich
udostępnienie poprzez nagłówek odpowiedzi Accept-CH.
Odpowiedź otrzyma jednak w kolejnych zapytaniach HTTP, nie mając gwarancji uzyskania
informacji o które prosił. Wszystkie nagłówki
powiązane z User-Agent Client Hints mają prefiks "SEC-CH",
a jest tak z powodów bezpieczeństwa - aby upewnić się, że te nagłówki
mogą być ustawione tylko i wyłącznie przez program wykonujący zapytanie - a nie, na przykład
z poziomu kodu źródłowego. Dodatkowo User-Agent Client Hints
nie zadziałają na niezabezpieczonych stronach www, to jest takich które nie operują
na protokole https. No i to rozwiązanie również
nie jest bez wad. Mianowicie, wiele potencjalnie krytycznych danych nie będzie dostępnych przy
pierwszym zapytaniu http; możliwe są potencjalne kolizje modeli urządzeń
oraz mamy dwa standardy. Stary User-Agent oraz nowy,
gdzie na rynku dalej będą miliony urządzeń wspierających tylko tą
starą składnię w związku z czym debugowanie będzie utrudnione ze względu
na więcej wariacji ekosystemu. No cóż, pozostaje
nam trzymać rękę na pulsie i obserwować dalszy rozwój wydarzeń.
Subskrybuj kanał Koduje by nie przegapić kolejnych treści!
Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.
Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.
Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.
Na wyciągnięcie ręki. Za darmo, na YouTube
W tym wideo przerobimy statyczną stronę HTML/CSS na aplikację Vue.js z podziałem na komponenty przy użyciu import map
W tym praktycznym ćwiczeniu stworzymy widok mobilny aplikacji czatu - messenger. Wykorzystamy do tego CSS Flexbox oraz ikony SVG.
W tym wideo przeprowadzę Cię przez kilka przykładów gdzie potencjalnie możemy wykorzystać CSS Counters - z zaznaczeniem, gdzie warto z nich korzystać, a gdzie lepiej ich unikać.
Zobacz czym jest progressive enhancement w warsztacie w którym stworzymy interaktywną mapę województw.
Czy warto podejmować się certyfikatów dla programistów? Czy ułatwia to znalezienie pracy? Czy dam radę zdać egzamin z NodeJS?
W tym wideo opowiadam jak według mnie może wyglądać współczesny web design
Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!
W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.
Komentarz od autora
User-Agent - niby prosta sprawa, a ile informacji! Co prawda implementacja UA Client Hints jest wymuszana przede wszystkim przez Chrome, jestem ciekawy wpływu tych decyzji na ekosystem sieciowy. Trzeba przyznać, że obecny UserAgent string jest często wykorzystywany dla miliardowych zarobków kosztem prywatności użytkownika!