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 Client Hints 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 moeten parseren. Het aanbieden van deze alternatieve route is de eerste stap om uiteindelijk de granulariteit van de User-Agent-tekenreeks te verminderen.
Leer hoe u uw bestaande functionaliteit kunt bijwerken die afhankelijk is van het parseren van de User-Agent-tekenreeks om in plaats daarvan gebruik te maken van User-Agent Client Hints.
Achtergrond
Wanneer webbrowsers verzoeken indienen, bevatten ze informatie over de browser en zijn omgeving, zodat servers analyses kunnen inschakelen en de reactie kunnen aanpassen. Dit werd al in 1996 gedefinieerd (RFC 1945 voor HTTP/1.0), waar je de originele definitie voor de User-Agent string kunt vinden, die een voorbeeld bevat:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Deze header was bedoeld om, in volgorde van belangrijkheid, het product (bijvoorbeeld browser of bibliotheek) en een commentaar (bijvoorbeeld versie) te specificeren.
De status van de User-Agent-tekenreeks
In de tussenliggende decennia heeft deze reeks een verscheidenheid aan aanvullende details verzameld over de klant die het verzoek heeft ingediend (en ook cruft, vanwege achterwaartse compatibiliteit). We kunnen dat zien als we naar de huidige User-Agent-string van Chrome kijken:
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 apparaatmodel, het merk van de browser en de volledige versie, voldoende aanwijzingen om te concluderen dat het een mobiele browser is, en niet te vergeten 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 kunnen identificeren.
De User-Agent-reeks maakt veel legitieme gebruiksscenario's mogelijk en dient een belangrijk doel voor ontwikkelaars en site-eigenaren. Het is echter ook van cruciaal belang dat de privacy van gebruikers wordt beschermd tegen geheime trackingmethoden, en het standaard verzenden van UA-informatie druist in tegen dat doel.
Er is ook behoefte aan verbetering van de webcompatibiliteit als het gaat om de User-Agent-string. Het is ongestructureerd, dus het parseren ervan resulteert in onnodige complexiteit, wat vaak de oorzaak is van bugs en problemen met de sitecompatibiliteit die gebruikers schade berokkenen. Deze problemen treffen gebruikers van minder gebruikelijke browsers ook onevenredig veel schade, omdat sites er mogelijk niet in zijn geslaagd hun configuratie te testen.
Introductie van de nieuwe User-Agent Client Hints
User-Agent Client Hints maken toegang tot dezelfde informatie mogelijk, maar op een meer privacybehoudende manier, waardoor browsers uiteindelijk de standaardwaarde van de User-Agent-reeks om alles uit te zenden, kunnen verminderen. Client Hints dwingen een model af waarbij de server de browser om een reeks 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 standaard alle User-Agent-informatie openbaar te maken, de toegang nu op een expliciete en controleerbare manier wordt beheerd. Ontwikkelaars profiteren ook van een eenvoudigere API - geen reguliere expressies meer!
De huidige set Client Hints beschrijft voornamelijk de weergave- en verbindingsmogelijkheden van de browser. U kunt de details verkennen in Resourceselectie automatiseren met klanttips , maar hier vindt u een korte opfriscursus over het proces.
De server vraagt via een header om specifieke Client Hints:
⬇️ Reactie van server
Accept-CH: Viewport-Width, Width
Of een metatag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
De browser kan er vervolgens voor kiezen om bij volgende verzoeken de volgende headers terug te sturen:
⬆️ Vervolgaanvraag
Viewport-Width: 460
Width: 230
De server kan ervoor kiezen om zijn reacties te variëren, bijvoorbeeld door afbeeldingen met een geschikte resolutie weer te geven.
User-Agent Client Hints breiden het bereik van eigenschappen uit met het Sec-CH-UA voorvoegsel dat kan worden opgegeven via de Accept-CH serverantwoordheader. Begin voor alle details met de uitleg en duik vervolgens in het volledige voorstel .
User-Agent Client-tips van Chromium 89
User-Agent Client Hints zijn sinds versie 89 standaard ingeschakeld in Chrome.
Standaard retourneert de browser het browsermerk, de significante/hoofdversie, het platform en een indicator of de client een mobiel apparaat is:
⬆️ Alle aanvragen
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-antwoord en verzoekheaders
⬇️ Reactie Accept-CH⬆️ Vraag header aan | ⬆️ Verzoek Voorbeeld waarde | Beschrijving |
|---|---|---|
Sec-CH-UA | "Chromium";v="84","Google Chrome";v="84" | Lijst met browsermerken en hun significante 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 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 voor het apparaat. Hoewel dit misschien niet relevant is voor het weergeven van de pagina, wil de site mogelijk een download aanbieden die standaard het juiste formaat heeft. |
Sec-CH-UA-Model | "Pixel 3" | Het apparaatmodel. |
Sec-CH-UA-Bitness | "64" | De bitheid van de onderliggende architectuur (dwz de grootte in bits van een geheel getal of geheugenadres) |
Voorbeeld uitwisseling
Een voorbeelduitwisseling zou er als volgt uitzien:
⬆️ Eerste verzoek vanuit browser
De browser vraagt de /downloads pagina van de site op en verzendt de standaard basis 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 server
De server stuurt de pagina terug en vraagt bovendien naar de volledige browserversie en het platform.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Vervolgaanvragen
De browser verleent de server toegang tot de aanvullende informatie en stuurt de extra hints terug bij 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 in JavaScript via navigator.userAgentData . De standaard headerinformatie van Sec-CH-UA , Sec-CH-UA-Mobile en Sec-CH-UA-Platform is toegankelijk via respectievelijk 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 aanvullende waarden zijn toegankelijk via de aanroep getHighEntropyValues() . De term 'hoge entropie' is een verwijzing naar informatie-entropie , met andere woorden: de hoeveelheid informatie die deze waarden onthullen over de browser van de gebruiker. Net als bij het aanvragen van de extra headers, is het aan de browser welke waarden, indien aanwezig, 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"
}
Demo
Je kunt zowel de headers als de JavaScript-API op je eigen apparaat uitproberen op user-agent-client-hints.glitch.me .
Hint levensduur en resetten
Hints die zijn opgegeven via de Accept-CH header worden verzonden voor de duur van de browsersessie of totdat een andere set hints is opgegeven.
Dat betekent dat als de server het volgende verzendt:
⬇️ Reactie
Accept-CH: Sec-CH-UA-Full-Version-List
Vervolgens verzendt de browser de header Sec-CH-UA-Full-Version-List bij alle verzoeken voor die site totdat de browser wordt gesloten.
⬆️ Vervolgaanvragen
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
⬆️ Vervolgaanvragen
Sec-CH-UA-Platform: "64"
De eerder gevraagde Sec-CH-UA-Full-Version-List wordt niet verzonden .
Het is het beste om de Accept-CH header te beschouwen als een specificatie van de volledige set hints die gewenst zijn voor die pagina, wat betekent dat de browser vervolgens de gespecificeerde hints verzendt voor alle subbronnen op die pagina. Hoewel hints blijven bestaan tot de volgende navigatie, mag de site er niet op vertrouwen of ervan uitgaan dat ze zullen worden afgeleverd.
U kunt dit ook gebruiken om effectief alle hints te wissen die door de browser worden verzonden door een blanco Accept-CH in het antwoord te sturen. U kunt dit overal toevoegen waar de gebruiker de voorkeuren opnieuw instelt of zich afmeldt bij uw site.
Dit patroon komt ook overeen met hoe hints werken via de tag <meta http-equiv="Accept-CH" …> . De gevraagde hints worden alleen verzonden bij verzoeken die door de pagina worden geïnitieerd en niet bij daaropvolgende navigatie.
Hintbereik en cross-origineverzoeken
Standaard worden Client Hints alleen verzonden bij verzoeken van dezelfde oorsprong. Dat betekent dat als u om specifieke hints vraagt op https://example.com , maar de bronnen die u wilt optimaliseren zich op https://downloads.example.com bevinden, zij geen hints zullen ontvangen.
Om hints voor cross-origin-verzoeken toe te staan, moet 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 kan ik User-Agent Client Hints gebruiken?
Het snelle antwoord is dat u alle instanties waarin u de User-Agent-header parseert of gebruik maakt van een van de JavaScript-aanroepen die toegang hebben tot dezelfde informatie (dat wil zeggen navigator.userAgent , navigator.appVersion of navigator.platform ) moet herstructureren naar maak in plaats daarvan gebruik van User-Agent Client Hints.
Als u nog een stap verder gaat, moet u uw gebruik van User-Agent-informatie opnieuw onderzoeken 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 basisprobleem bij het vertrouwen op de User-Agent-gegevens is dat u altijd een overzicht bijhoudt tussen het onroerend goed dat u inspecteert en het gedrag dat dit mogelijk maakt. Het is een onderhoudsoverhead om ervoor te zorgen dat uw detectie uitgebreid is en up-to-date blijft.
Met deze kanttekeningen in het achterhoofd somt de User-Agent Client Hints-repository een aantal geldige gebruiksscenario's voor sites op.
Wat gebeurt er met de User-Agent-tekenreeks?
Het plan is om de mogelijkheid voor geheime tracking op internet te minimaliseren door de hoeveelheid identificerende informatie die wordt blootgesteld door de bestaande User-Agent-string te verminderen, zonder onnodige verstoring van bestaande sites te veroorzaken. Door de introductie van User-Agent Client Hints krijgt u nu de kans om de nieuwe mogelijkheid te begrijpen en ermee te experimenteren, voordat er wijzigingen worden aangebracht in de User-Agent-reeksen.
Uiteindelijk zal de informatie in de User-Agent-tekenreeks worden verminderd, zodat het oude formaat behouden blijft, terwijl alleen dezelfde browser op hoog niveau en belangrijke versie-informatie wordt geboden volgens de standaardhints. In Chromium is deze wijziging uitgesteld tot ten minste 2022 om het ecosysteem extra tijd te geven om de nieuwe mogelijkheden voor User Agent Client Hints te evalueren.
U kunt een versie hiervan testen door de vlag about://flags/#reduce-user-agent van Chrome 93 in te schakelen (Opmerking: deze vlag heette about://flags/#freeze-user-agent in versies Chrome 84 - 92). Dit retourneert een string met de historische vermeldingen om compatibiliteitsredenen, maar met opgeschoonde 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
Miniatuur van Sergey Zolkin op Unsplash