User-Agent Client Hints zijn een nieuwe uitbreiding op de Client Hints API, waarmee ontwikkelaars op een privacyvriendelijke en gebruiksvriendelijke manier toegang krijgen tot informatie over de browser van een gebruiker.
Client Hints stellen ontwikkelaars in staat om actief informatie over het apparaat of de omstandigheden van de gebruiker op te vragen, in plaats van deze uit de User-Agent (UA)-string te hoeven halen. Het aanbieden van deze alternatieve route is de eerste stap om de granulariteit van de User-Agent-string uiteindelijk te verminderen.
Leer hoe u uw bestaande functionaliteit, die afhankelijk is van het parsen van de User-Agent-string, kunt bijwerken om in plaats daarvan gebruik te maken van User-Agent Client Hints.
Achtergrond
Wanneer webbrowsers verzoeken indienen, voegen ze informatie over de browser en de omgeving toe, zodat servers analyses kunnen uitvoeren en het antwoord kunnen aanpassen. Dit werd al in 1996 vastgelegd (RFC 1945 voor HTTP/1.0), waar u de oorspronkelijke definitie van de User-Agent-string kunt vinden, inclusief een voorbeeld:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Deze koptekst was bedoeld om, in volgorde van belangrijkheid, het product (bijv. browser of bibliotheek) en een opmerking (bijv. versie) te specificeren.
De status van de User-Agent-string
In de decennia die volgden, heeft deze string een verscheidenheid aan extra details over de client die het verzoek indient verzameld (evenals overbodige informatie, vanwege achterwaartse compatibiliteit). Dat kunnen we zien als we kijken naar de huidige User-Agent-string van Chrome:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
De bovenstaande tekst bevat informatie over het besturingssysteem en de versie van de gebruiker, het apparaatmodel, het merk en de volledige versie van de browser, voldoende aanwijzingen om te concluderen dat het een mobiele browser betreft, en bovendien een aantal verwijzingen naar andere browsers om historische redenen.
De combinatie van deze parameters met de enorme diversiteit aan mogelijke waarden betekent dat de User-Agent-string voldoende informatie kan bevatten om individuele gebruikers uniek te identificeren.
De User-Agent-string maakt veel legitieme toepassingen mogelijk en vervult een belangrijke functie voor ontwikkelaars en website-eigenaren. Het is echter ook cruciaal dat de privacy van gebruikers wordt beschermd tegen verborgen trackingmethoden, en het standaard verzenden van UA-informatie druist in tegen dat doel.
Er is ook behoefte aan verbeterde webcompatibiliteit als het gaat om de User-Agent-string. Deze is ongestructureerd, waardoor het parsen ervan onnodig complex wordt. Dit is vaak de oorzaak van bugs en compatibiliteitsproblemen met websites die gebruikers hinderen. Deze problemen treffen gebruikers van minder gangbare browsers onevenredig hard, omdat websites mogelijk niet getest zijn op hun configuratie.
Introductie van de nieuwe User-Agent Client Hints
Clienthints op basis van de User-Agent maken toegang tot dezelfde informatie mogelijk, maar op een manier die de privacy beter beschermt. Hierdoor kunnen browsers uiteindelijk de standaardinstelling van het uitzenden van alle User-Agent-informatie verminderen. Clienthints hanteren een model waarbij de server de browser om een set gegevens over de client (de hints) moet vragen. De browser past vervolgens zijn eigen beleid of gebruikersconfiguratie toe om te bepalen welke gegevens worden teruggestuurd. Dit betekent dat in plaats van standaard alle User-Agent-informatie te tonen, de toegang nu expliciet en traceerbaar wordt beheerd. Ontwikkelaars profiteren bovendien van een eenvoudigere API – geen reguliere expressies meer!
De huidige set clienthints beschrijft voornamelijk de weergave- en verbindingsmogelijkheden van de browser. U kunt de details bekijken in ' Het selecteren van resources automatisch met clienthints' , maar hier volgt een korte samenvatting van het proces.
De server vraagt om specifieke clienthints via een header:
⬇️ Reactie van de server
Accept-CH: Viewport-Width, Width
Of een meta-tag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
De browser kan er vervolgens voor kiezen om de volgende headers in volgende verzoeken terug te sturen:
⬆️ Vervolgverzoek
Viewport-Width: 460
Width: 230
De server kan ervoor kiezen om zijn reacties te variëren, bijvoorbeeld door afbeeldingen in een geschikte resolutie aan te bieden.
Clienthints voor gebruikersagenten breiden het scala aan eigenschappen uit met het voorvoegsel Sec-CH-UA dat kan worden gespecificeerd via de Accept-CH serverantwoordheader. Voor alle details kunt u beginnen met de uitleg en vervolgens het volledige voorstel bekijken.
Clienthints voor gebruikersagenten van Chromium 89
Clienthints voor gebruikersagenten zijn standaard ingeschakeld in Chrome sinds versie 89.
Standaard geeft de browser het merk, de belangrijkste versie, het platform en een indicator of de client een mobiel apparaat is weer:
⬆️ Alle verzoeken
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"
User-Agent-respons en verzoekheaders
⬇️ Reactie Accept-CH⬆️ Verzoekheader | ⬆️ Verzoek Voorbeeldwaarde | Beschrijving |
|---|---|---|
Sec-CH-UA | "Chromium";v="84","Google Chrome";v="84" | Lijst met browsermerken en hun belangrijkste versies. |
Sec-CH-UA-Mobile | ?1 | Een booleaanse waarde die aangeeft of de browser zich op een mobiel apparaat bevindt ( ?1 voor waar) of niet ( ?0 voor onwaar). |
Sec-CH-UA-Full-Version | "84.0.4143.2" | [ Verouderd ] De volledige versie voor de browser. |
Sec-CH-UA-Full-Version-List | "Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" | Lijst met browsermerken en hun volledige versie. |
Sec-CH-UA-Platform | "Android" | Het platform voor het apparaat, meestal het besturingssysteem (OS). |
Sec-CH-UA-Platform-Version | "10" | De versie voor het platform of besturingssysteem. |
Sec-CH-UA-Arch | "arm" | De onderliggende architectuur van het apparaat. Hoewel dit mogelijk niet relevant is voor de weergave van de pagina, kan de website een download aanbieden die standaard in het juiste formaat is opgeslagen. |
Sec-CH-UA-Model | "Pixel 3" | Het apparaatmodel. |
Sec-CH-UA-Bitness | "64" | De bitgrootte van de onderliggende architectuur (d.w.z. de grootte in bits van een geheel getal of geheugenadres) |
Voorbeeld van een uitwisseling
Een voorbeeld van een uitwisseling zou er als volgt uitzien:
⬆️ Eerste verzoek vanuit de browser
De browser vraagt de /downloads pagina van de site op en stuurt zijn standaard User-Agent mee.
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"
⬇️ Reactie van de server
De server stuurt de pagina terug en vraagt daarnaast om de volledige browserversie en het platform.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Vervolgverzoeken
De browser geeft de server toegang tot de aanvullende informatie en stuurt deze extra aanwijzingen mee in alle volgende verzoeken.
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
Naast de headers is de User-Agent ook toegankelijk via JavaScript met behulp van navigator.userAgentData . De standaard headerinformatie Sec-CH-UA , Sec-CH-UA-Mobile en Sec-CH-UA-Platform is respectievelijk toegankelijk via de brands en mobile eigenschappen.
// 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";
De extra waarden worden opgevraagd via de getHighEntropyValues() aanroep. De term "hoge entropie" verwijst naar informatie-entropie , oftewel de hoeveelheid informatie die deze waarden onthullen over de browser van de gebruiker. Net als bij het opvragen van de extra headers, bepaalt de browser welke waarden, indien aanwezig, worden teruggestuurd.
// 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"
}
Demo
Je kunt zowel de headers als de JavaScript API op je eigen apparaat uitproberen via user-agent-client-hints.glitch.me .
Tip voor de levensduur en het resetten
De hints die via de Accept-CH header worden opgegeven, worden verzonden gedurende de browsersessie of totdat er een andere set hints wordt opgegeven.
Dat betekent dat als de server het volgende verzendt:
⬇️ Reactie
Accept-CH: Sec-CH-UA-Full-Version-List
Vervolgens zal de browser de header Sec-CH-UA-Full-Version-List meesturen met alle verzoeken voor die site totdat de browser wordt gesloten.
⬆️ Vervolgverzoeken
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"
Als er echter een andere Accept-CH header wordt ontvangen, vervangt deze volledig de huidige hints die de browser verzendt.
⬇️ Reactie
Accept-CH: Sec-CH-UA-Bitness
⬆️ Vervolgverzoeken
Sec-CH-UA-Platform: "64"
De eerder aangevraagde Sec-CH-UA-Full-Version-List wordt niet verzonden .
Je kunt de Accept-CH header het beste beschouwen als een specificatie van de volledige set hints die voor die pagina gewenst zijn. Dit betekent dat de browser vervolgens de opgegeven hints verzendt voor alle subbronnen op die pagina. Hoewel de hints behouden blijven bij de volgende navigatie, mag de website er niet op vertrouwen of ervan uitgaan dat ze ook daadwerkelijk worden afgeleverd.
Je kunt dit ook gebruiken om alle hints die door de browser worden verzonden effectief te wissen door een lege Accept-CH in het antwoord te verzenden. Overweeg dit toe te voegen op elke plek waar de gebruiker voorkeuren opnieuw instelt of zich afmeldt van je site.
Dit patroon komt ook overeen met de werking van hints via de <meta http-equiv="Accept-CH" …> tag. De gevraagde hints worden alleen verzonden bij verzoeken die door de pagina zelf worden geïnitieerd en niet bij latere navigatie.
Hint scope en cross-origin verzoeken
Standaard worden clienthints alleen verzonden bij verzoeken van dezelfde oorsprong. Dat betekent dat als u specifieke hints aanvraagt op https://example.com , maar de bronnen die u wilt optimaliseren zich op https://downloads.example.com bevinden, deze geen hints zullen ontvangen.
Om hints toe te staan bij cross-origin-verzoeken, moeten elke hint en oorsprong worden gespecificeerd door een Permissions-Policy header. Om dit toe te passen op een User-Agent Client Hint, moet u de hint in kleine letters zetten en het voorvoegsel sec- verwijderen. Bijvoorbeeld:
⬇️ Reactie van 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");
⬆️ Verzoek aan downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Verzoeken aan cdn.provider of img.example.com
DPR: 2
Waar kun je User-Agent Client Hints gebruiken?
Het korte antwoord is dat je alle gevallen waarin je de User-Agent-header parseert of gebruikmaakt van JavaScript-aanroepen die dezelfde informatie opvragen (bijv. navigator.userAgent , navigator.appVersion of navigator.platform ) moet herstructureren om in plaats daarvan User-Agent Client Hints te gebruiken.
Om dit nog een stap verder te brengen, zou u uw gebruik van User-Agent-informatie opnieuw moeten bekijken en deze waar mogelijk vervangen door andere methoden. Vaak kunt u hetzelfde doel bereiken door gebruik te maken van progressieve verbetering, functiedetectie of responsief ontwerp . Het fundamentele probleem met het vertrouwen op User-Agent-gegevens is dat u altijd een koppeling moet onderhouden tussen de eigenschap die u inspecteert en het gedrag dat deze mogelijk maakt. Het kost veel onderhoud om ervoor te zorgen dat uw detectie volledig en actueel blijft.
Met deze kanttekeningen in gedachten, geeft de User-Agent Client Hints-repository een aantal geldige gebruiksscenario's voor websites weer.
Wat gebeurt er met de User-Agent-string?
Het plan is om de mogelijkheden voor heimelijke tracking op het web te minimaliseren door de hoeveelheid identificerende informatie die via de bestaande User-Agent-string wordt vrijgegeven te verminderen, zonder onnodige verstoring op bestaande websites te veroorzaken. Door nu User-Agent Client Hints te introduceren, krijgt u de kans om de nieuwe functionaliteit te leren kennen en ermee te experimenteren, voordat er wijzigingen in de User-Agent-strings worden aangebracht.
Uiteindelijk zal de informatie in de User-Agent-string worden ingekort, zodat het oude formaat behouden blijft, maar alleen dezelfde algemene browser- en belangrijke versie-informatie wordt weergegeven als bij de standaard hints. In Chromium is deze wijziging uitgesteld tot ten minste 2022 om het ecosysteem extra tijd te geven de mogelijkheden van de nieuwe User Agent Client Hints te evalueren.
Je kunt een versie hiervan testen door de vlag about://flags/#reduce-user-agent in te schakelen vanaf Chrome 93 (let op: deze vlag heette about://flags/#freeze-user-agent in Chrome-versies 84 t/m 92). Dit retourneert een tekenreeks met de historische gegevens, om compatibiliteitsredenen, maar met geanonimiseerde details. Bijvoorbeeld zoiets als:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniatuurafbeelding door Sergey Zolkin op Unsplash