User-Agent Client Hints zijn een nieuwe uitbreiding van de Client Hints API, waarmee ontwikkelaars op een privacybeschermende en ergonomische manier toegang kunnen krijgen tot informatie over de browser van een gebruiker.
Met clienthints kunnen ontwikkelaars actief informatie opvragen over het apparaat of de omstandigheden van de gebruiker, in plaats van deze uit de User-Agent (UA)-string te hoeven halen. Het aanbieden van deze alternatieve route is de eerste stap om uiteindelijk de granulariteit van de User-Agent-string te verminderen.
Leer hoe u de bestaande functionaliteit die afhankelijk is van het parseren van de User-Agent-tekenreeks, kunt bijwerken om in plaats daarvan User-Agent Client Hints te gebruiken.
Achtergrond
Wanneer webbrowsers verzoeken doen, voegen ze informatie toe over de browser en diens omgeving, zodat servers analyses kunnen uitvoeren en de respons kunnen aanpassen. Dit werd al in 1996 gedefinieerd (RFC 1945 voor HTTP/1.0), waar u de oorspronkelijke definitie voor de User-Agent string kunt vinden, inclusief een voorbeeld:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
In deze header werd beoogd 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 afgelopen decennia heeft deze string allerlei extra details verzameld over de client die de aanvraag indient (en ook overbodige informatie, dankzij achterwaartse compatibiliteit). We zien dit 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 string bevat informatie over het besturingssysteem en de versie van de gebruiker, het model van het apparaat, het merk en de volledige versie van de browser. Dat zijn voldoende aanwijzingen om af te leiden dat het om een mobiele browser gaat. Daarnaast wordt er om historische redenen verwezen naar andere browsers.
De combinatie van deze parameters en de enorme diversiteit aan mogelijke waarden betekent dat de User-Agent-tekenreeks voldoende informatie kan bevatten om individuele gebruikers eenduidig te identificeren.
De User-Agent-string maakt veel legitieme use cases mogelijk en dient een belangrijk doel 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 staat haaks op dat doel.
Er is ook behoefte aan verbetering van de webcompatibiliteit met de User-Agent-string. Deze is ongestructureerd, waardoor het parseren ervan onnodig complex is. Dit leidt vaak tot bugs en problemen met sitecompatibiliteit, wat nadelig is voor gebruikers. Deze problemen treffen ook onevenredig veel gebruikers van minder gangbare browsers, omdat sites mogelijk niet aan hun configuratie voldoen.
Introductie van de nieuwe User-Agent Client Hints
User-Agent Client Hints bieden toegang tot dezelfde informatie, maar dan op een manier die de privacy beschermt. Hierdoor kunnen browsers uiteindelijk de standaardinstelling van de User-Agent string om alles te publiceren, verminderen. Client Hints dwingen een model af waarbij de server de browser om een set gegevens over de client (de hints) moet vragen en de browser zijn eigen beleid of gebruikersconfiguratie toepast om te bepalen welke gegevens worden geretourneerd. Dit betekent dat in plaats van alle User-Agent informatie standaard openbaar te maken, de toegang nu expliciet en controleerbaar wordt beheerd. Ontwikkelaars profiteren ook 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 'Automatiseren van resourceselectie met clienthints' , maar hier is een korte opfriscursus.
De server vraagt om specifieke Client Hints via een header:
⬇️ Reactie van de server
Accept-CH: Viewport-Width, Width
Of een metatag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
De browser kan er dan voor kiezen om de volgende headers in volgende aanvragen terug te sturen:
⬆️ Vervolgverzoek
Viewport-Width: 460
Width: 230
De server kan ervoor kiezen om de reacties te variëren, bijvoorbeeld door afbeeldingen met een passende resolutie te serveren.
User-Agent Client Hints breiden het bereik van eigenschappen uit met het Sec-CH-UA -prefix, dat kan worden opgegeven via de Accept-CH serverresponsheader. Voor alle details begint u met de uitleg en duikt u vervolgens in het volledige voorstel .
Tips voor gebruikersagentclients van Chromium 89
Sinds versie 89 zijn User-Agent Client Hints standaard ingeschakeld in Chrome.
Standaard retourneert de browser het browsermerk, de belangrijkste/belangrijkste versie, het platform en een indicator als de client een mobiel apparaat is:
⬆️ 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 aanvraagheaders
⬇️ Reactie Accept-CH⬆️ Verzoekheader | ⬆️ Verzoek Voorbeeldwaarde | Beschrijving |
|---|---|---|
Sec-CH-UA | "Chromium";v="84","Google Chrome";v="84" | Lijst met browsermerken en hun belangrijkste versie. |
Sec-CH-UA-Mobile | ?1 | 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 versies. |
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, wil de site mogelijk een download aanbieden die standaard de juiste indeling gebruikt. |
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 uitwisseling
Een voorbeeld van een uitwisseling zou er als volgt uitzien:
⬆️ Eerste verzoek van browser
De browser vraagt de /downloads pagina van de site op en verstuurt zijn standaard 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"
⬇️ Reactie van de server
De server stuurt de pagina terug en vraagt daarbij 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 de extra hints terug in alle volgende aanvragen.
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 in JavaScript via navigator.userAgentData . De standaard headerinformatie van 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 zijn toegankelijk via de aanroep getHighEntropyValues() . De term "hoge entropie" verwijst naar informatie-entropie , met andere woorden: de hoeveelheid informatie die deze waarden over de browser van de gebruiker onthullen. Net als bij het opvragen van de extra headers, is het aan de browser om te bepalen welke waarden er eventueel worden geretourneerd.
// 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"
}
Demonstratie
U kunt zowel de headers als de JavaScript API op uw eigen apparaat uitproberen via user-agent-client-hints.glitch.me .
Hint levensduur en resetten
Hints die via de Accept-CH header worden opgegeven, worden verzonden voor de duur van de browsersessie of totdat 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 verstuurt de browser de header Sec-CH-UA-Full-Version-List bij alle aanvragen 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, worden de huidige hints die de browser verzendt, volledig vervangen .
⬇️ Reactie
Accept-CH: Sec-CH-UA-Bitness
⬆️ Vervolgverzoeken
Sec-CH-UA-Platform: "64"
De eerder gevraagde Sec-CH-UA-Full-Version-List wordt niet verzonden .
De Accept-CH -header is het beste te beschouwen als een specificatie van de volledige set gewenste hints voor die pagina. Dit betekent dat de browser vervolgens de opgegeven hints verzendt voor alle subresources op die pagina. Hoewel hints behouden blijven tot de volgende navigatie, mag de site er niet op vertrouwen of ervan uitgaan dat ze worden geleverd.
U 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 sturen. Overweeg dit toe te voegen op elke plek waar de gebruiker zijn voorkeuren opnieuw instelt of zich afmeldt bij uw site.
Dit patroon komt ook overeen met hoe hints werken 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 een volgende navigatie.
Hint scope en cross-origin verzoeken
Standaard worden clienthints alleen verzonden voor verzoeken met dezelfde oorsprong. Dit betekent dat als u specifieke hints opvraagt op https://example.com , maar de bronnen die u wilt optimaliseren zich op https://downloads.example.com bevinden, deze geen hints ontvangen.
Om hints toe te staan bij cross-origin-verzoeken, moeten elke hint en oorsprong worden gespecificeerd in 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 naar cdn.provider of img.example.com
DPR: 2
Waar kan ik User-Agent Client Hints gebruiken?
Het korte antwoord is dat u alle instanties waarin u de User-Agent-header parseert of gebruikmaakt van JavaScript-aanroepen die toegang hebben tot dezelfde informatie (bijvoorbeeld navigator.userAgent , navigator.appVersion of navigator.platform ), moet refactoren om in plaats daarvan User-Agent Client Hints te gebruiken.
Om nog een stap verder te gaan, moet u uw gebruik van user-agent-informatie opnieuw bekijken en 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 onderhoudt tussen de property die u inspecteert en het gedrag dat hierdoor mogelijk wordt gemaakt. Het is een onderhoudsinspanning om ervoor te zorgen dat uw detectie volledig en up-to-date is.
Met deze kanttekeningen in gedachten, worden in de User-Agent Client Hints-repository een aantal geldige use cases voor sites opgesomd .
Wat gebeurt er met de User-Agent-tekenreeks?
Het plan is om de mogelijkheid tot verborgen tracking op het web te minimaliseren door de hoeveelheid identificerende informatie die door de bestaande User-Agent-string wordt vrijgegeven te verminderen, zonder onnodige verstoring op bestaande websites te veroorzaken. De introductie van User-Agent Client Hints geeft u nu de kans om de nieuwe functionaliteit te begrijpen en ermee te experimenteren, voordat er wijzigingen in de User-Agent-strings worden aangebracht.
Uiteindelijk zal de informatie in de User-Agent-string worden teruggebracht tot het oude formaat, terwijl alleen de algemene browser- en versie-informatie wordt verstrekt die overeenkomt met de standaardhints. In Chromium is deze wijziging uitgesteld tot ten minste 2022 om het ecosysteem extra tijd te geven om de nieuwe mogelijkheden van User Agent Client Hints te evalueren.
You can test a version of this by enabling the about://flags/#reduce-user-agent flag from Chrome 93 (Note: this flag was named about://flags/#freeze-user-agent in versions Chrome 84 - 92). This will return a string with the historical entries for compatibility reasons, but with sanitized specifics. For example, something like:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniatuur door Sergey Zolkin op Unsplash