User-Agent-Client Hints sind eine neue Erweiterung der Client Hints API, mit der Entwickler auf datenschutzfreundliche und ergonomische Weise auf Informationen über den Browser eines Nutzers zugreifen können.
Mit Clienthinweisen können Entwickler aktiv Informationen zum Gerät oder zu den Bedingungen des Nutzers anfordern, statt diese aus dem User-Agent-String (UA) parsen zu müssen. Die Bereitstellung dieser alternativen Route ist der erste Schritt, um den Detaillierungsgrad des User-Agent-Strings zu reduzieren.
Hier erfahren Sie, wie Sie Ihre vorhandene Funktion aktualisieren, für die das Parsen des User-Agent-Strings erforderlich ist, um stattdessen User-Agent-Client-Hinweise zu verwenden.
Hintergrund
Wenn Webbrowser Anfragen stellen, enthalten sie Informationen über den Browser und seine Umgebung, sodass Server Analysen ermöglichen und die Antwort anpassen können. Sie wurde bereits 1996 definiert (RFC 1945 für HTTP/1.0), wo Sie die ursprüngliche Definition für den User-Agent-String finden, die ein Beispiel enthält:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Mit dieser Überschrift sollten in der Reihenfolge ihrer Bedeutung das Produkt (z.B. Browser oder Bibliothek) und ein Kommentar (z.B. die Version) angegeben werden.
Status des User-Agent-Strings
In den dazwischen liegenden Jahrzehnten sind für diesen String verschiedene zusätzliche Details zu dem Client, der die Anfrage stellt, sowie aufgrund der Abwärtskompatibilität überflüssige Informationen angesammelt worden. Wenn wir uns den aktuellen User-Agent-String von Chrome ansehen, sehen wir Folgendes:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
Der obige String enthält Informationen über das Betriebssystem und die Version des Nutzers, das Gerätemodell, die Marke des Browsers und die Vollversion, genügend Hinweise, um zu schlussfolgern, dass es sich um einen mobilen Browser handelt. Ganz zu schweigen von einer Reihe von Verweisen auf andere Browser aus historischen Gründen.
Die Kombination dieser Parameter mit der großen Vielfalt möglicher Werte bedeutet, dass der User-Agent-String genügend Informationen enthalten kann, um einzelne Nutzer eindeutig zu identifizieren. Wenn Sie Ihren eigenen Browser auf AmIUnique testen, können Sie feststellen, wie genau Ihr User-Agent-String Sie identifiziert. Je niedriger das resultierende Ähnlichkeitsverhältnis ist, desto eindeutiger sind Ihre Anfragen, desto einfacher können Server Sie erfassen.
Der User-Agent-String ermöglicht viele legitime Anwendungsfälle und dient Entwicklern und Websiteinhabern als wichtige Funktion. Allerdings muss die Privatsphäre der Nutzer vor verdeckten Tracking-Methoden geschützt werden. Das Senden von UA-Informationen wird standardmäßig nicht gegen dieses Zielvorhaben verstoßen.
Außerdem muss die Webkompatibilität im Hinblick auf den User-Agent-String verbessert werden. Da es unstrukturiert ist, führt das Parsen zu unnötiger Komplexität, was oft die Ursache für Programmfehler und Probleme mit der Websitekompatibilität ist, die den Nutzern schaden. Außerdem beeinträchtigen diese Probleme unverhältnismäßig viele Nutzer weniger gängiger Browser, da Websites möglicherweise beim Testen der Konfiguration nicht erfolgreich waren.
Die neuen User-Agent-Client-Hints
User-Agent-Client-Hints ermöglichen den Zugriff auf dieselben Informationen, jedoch auf datenschutzfreundlichere Weise. Dadurch können Browser wiederum die Standardeinstellung für die Übertragung aller Daten im User-Agent-String reduzieren. Client-Hinweise erzwingen ein Modell, bei dem der Server den Browser um einen Satz von Daten zum Client (die Hinweise) bitten muss und der Browser seine eigenen Richtlinien oder Nutzerkonfigurationen anwendet, um zu bestimmen, welche Daten zurückgegeben werden. Das bedeutet, dass der Zugriff jetzt explizit und prüfbar verwaltet wird, anstatt standardmäßig alle User-Agent-Informationen offenzulegen. Entwickler profitieren außerdem von einer einfacheren API – keine regulären Ausdrücke mehr.
Die aktuellen Client-Hinweise beschreiben hauptsächlich die Anzeige- und Verbindungsfunktionen des Browsers. Ausführliche Informationen finden Sie unter Ressourcenauswahl mit Clienthinweisen automatisieren. Im Folgenden finden Sie eine kurze Auffrischung zum Prozess.
Der Server fordert über einen Header bestimmte Client-Hinweise an:
⬇️ Antwort vom Server
Accept-CH: Viewport-Width, Width
Oder ein Meta-Tag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Der Browser kann dann die folgenden Header in nachfolgenden Anfragen zurücksenden:
⬆️ Nachfolgender Antrag
Viewport-Width: 460
Width: 230
Der Server kann seine Antworten variieren und beispielsweise Bilder mit einer geeigneten Auflösung bereitstellen.
Mit User-Agent-Client-Hinweisen wird der Eigenschaftenbereich um das Präfix Sec-CH-UA erweitert, das über den Serverantwortheader Accept-CH angegeben werden kann. Um alle Details zu erhalten, beginnen Sie mit der Erklärung und sehen Sie sich dann das vollständige Angebot an.
User-Agent-Client-Hints von Chromium 89
User-Agent-Client-Hints sind in Chrome seit Version 89 standardmäßig aktiviert.
Standardmäßig gibt der Browser die Marke des Browsers, die Hauptversion, die Plattform und einen Hinweis zurück, ob der Client ein Mobilgerät ist:
⬆️ Alle Anfragen
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-Antwort- und -Anfrageheader
⬇️ Antwort Accept-CH⬆️ Anfrageheader |
⬆️ Anfrage Beispielwert |
Beschreibung |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Liste der Browsermarken und deren wichtige Version. |
Sec-CH-UA-Mobile |
?1 |
Boolescher Wert, der angibt, ob der Browser ein Mobilgerät verwendet (?1 für wahr) oder nicht (?0 für falsch). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Verworfen]Die vollständige Version für den Browser. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Liste der Browsermarken und deren Vollversion. |
Sec-CH-UA-Platform |
"Android" |
Die Plattform für das Gerät, in der Regel das Betriebssystem. |
Sec-CH-UA-Platform-Version |
"10" |
Die Version der Plattform oder des Betriebssystems. |
Sec-CH-UA-Arch |
"arm" |
Die zugrunde liegende Architektur für das Gerät. Dies ist zwar für die Anzeige der Seite möglicherweise nicht relevant, aber die Website möchte einen Download anbieten, der standardmäßig das richtige Format aufweist. |
Sec-CH-UA-Model |
"Pixel 3" |
Gerätemodell |
Sec-CH-UA-Bitness |
"64" |
Die Bitität der zugrunde liegenden Architektur (d.h. die Größe einer Ganzzahl oder Speicheradresse in Bits) |
Beispiel für eine Anzeigenplattform
Hier ein Beispiel für eine Anzeigenplattform:
⬆️ Erste Anfrage vom Browser
Der Browser fordert die Seite /downloads der Website an und sendet seinen standardmäßigen 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"
⬇️ Antwort vom Server
Der Server sendet die Seite zurück und fordert zusätzlich die vollständige Browserversion und die Plattform an.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Nachfolgende Anfragen
Der Browser gewährt dem Server Zugriff auf die zusätzlichen Informationen und sendet die zusätzlichen Hinweise bei allen nachfolgenden Anfragen zurück.
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
Neben den Headern ist der User-Agent auch in JavaScript über navigator.userAgentData zugänglich. Die standardmäßigen Headerinformationen Sec-CH-UA, Sec-CH-UA-Mobile und Sec-CH-UA-Platform können jeweils über die Attribute brands und mobile aufgerufen werden:
// 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";
Auf die zusätzlichen Werte kann über den getHighEntropyValues()-Aufruf zugegriffen werden. Der Begriff "hohe Entropie" bezieht sich auf die Informationsentropie, also die Menge an Informationen, die diese Werte über den Browser des Nutzers aussagen. Wie bei der Anforderung der zusätzlichen Header hängt es vom Browser ab, welche Werte gegebenenfalls zurückgegeben werden.
// 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
Sie können sowohl die Header als auch die JavaScript API auf Ihrem eigenen Gerät unter user-agent-client-hints.glitch.me testen.
Hinweis auf Lebensdauer und Zurücksetzen
Hinweise, die über den Accept-CH-Header angegeben werden, werden für die Dauer der Browsersitzung gesendet oder so lange, bis ein anderer Satz von Hinweisen angegeben wird.
Wenn der Server Folgendes sendet:
⬇️ Antwort
Accept-CH: Sec-CH-UA-Full-Version-List
Dann sendet der Browser den Sec-CH-UA-Full-Version-List-Header bei allen Anfragen für diese Website, bis er geschlossen wird.
⬆️ Nachfolgende Anfragen
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"
Wird jedoch ein weiterer Accept-CH-Header empfangen, werden die aktuellen Hinweise, die der Browser sendet, vollständig ersetzt.
⬇️ Antwort
Accept-CH: Sec-CH-UA-Bitness
⬆️ Nachfolgende Anfragen
Sec-CH-UA-Platform: "64"
Die zuvor angeforderte Sec-CH-UA-Full-Version-List wird nicht gesendet.
Sie können sich den Accept-CH-Header am besten so vorstellen, dass er den gesamten Satz von Hinweisen angibt, die für diese Seite gewünscht sind. Das bedeutet, dass der Browser dann die angegebenen Hinweise für alle Unterressourcen auf dieser Seite sendet. Die Hinweise bleiben zwar bei der nächsten Navigation bestehen, die Website sollte sich jedoch nicht darauf verlassen oder davon ausgehen, dass sie geliefert werden.
Damit kannst du auch alle vom Browser gesendeten Hinweise löschen, indem du in der Antwort ein leeres Accept-CH sendest. Du kannst dies überall dort hinzufügen, wo Nutzer Einstellungen zurücksetzen oder sich von deiner Website abmelden.
Dieses Muster entspricht auch der Funktionsweise von Hinweisen über das Tag <meta http-equiv="Accept-CH" …>. Die angeforderten Hinweise werden nur bei Anfragen gesendet, die von der Seite initiiert wurden, und nicht bei nachfolgenden Navigationen.
Hinweisbereich und ursprungsübergreifende Anfragen
Standardmäßig werden Clienthinweise nur bei Anfragen mit demselben Ursprung gesendet. Wenn Sie also nach bestimmten Hinweisen für https://example.com fragen, die Ressourcen, die Sie optimieren möchten, sich aber auf https://downloads.example.com befinden, erhalten sie keine Hinweise.
Damit Hinweise bei ursprungsübergreifenden Anfragen zulässig sind, muss jeder Hinweis und Ursprung durch einen Permissions-Policy-Header angegeben werden. Wenn Sie dies auf einen User-Agent-Client-Hinweis anwenden möchten, müssen Sie den Hinweis in Kleinbuchstaben umwandeln und das Präfix sec- entfernen. Beispiel:
⬇️ Antwort von 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");
⬆️ Anfrage an downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Anfragen an cdn.provider oder img.example.com
DPR: 2
Wo werden User-Agent-Client-Hints verwendet?
Die schnelle Antwort lautet: Alle Instanzen, in denen du entweder den User-Agent-Header parst oder einen der JavaScript-Aufrufe verwendest, die auf dieselben Informationen zugreifen (z.B. navigator.userAgent, navigator.appVersion oder navigator.platform), um stattdessen User-Agent-Client-Hinweise zu nutzen, solltest du refaktorieren.
Wenn Sie noch einen Schritt weiter gehen, sollten Sie Ihre Verwendung der User-Agent-Informationen noch einmal überprüfen und sie nach Möglichkeit durch andere Methoden ersetzen. Häufig erreichen Sie dasselbe Ziel mit progressiver Verbesserung, Featureerkennung oder responsivem Design. Das Grundproblem bei der Nutzung der User-Agent-Daten besteht darin, dass immer eine Zuordnung zwischen dem Attribut, das Sie untersuchen, und dem Verhalten, das sie ermöglicht, beibehalten wird. Dies ist ein Wartungsaufwand, der dafür sorgt, dass die Erkennung umfassend und aktuell ist.
Vor diesem Hintergrund sind im Repository „User-Agent-Client-Hints“ einige gültige Anwendungsfälle für Websites aufgeführt.
Was passiert mit dem User-Agent-String?
Der Plan besteht darin, verdecktes Tracking im Web so weit wie möglich zu minimieren. Dazu wird die Menge an personenidentifizierbaren Informationen reduziert, die im vorhandenen User-Agent-String offengelegt werden, ohne dass es zu Störungen auf bestehenden Websites kommt. Mit der Einführung von User-Agent-Client-Hinweisen haben Sie jetzt die Möglichkeit, sich mit der neuen Funktion vertraut zu machen und damit zu experimentieren, bevor Änderungen an User-Agent-Strings vorgenommen werden.
Letztendlich werden die Informationen im User-Agent-String reduziert, sodass das alte Format beibehält und nur dieselben allgemeinen Browser- und Versionsinformationen wie in den Standardhinweisen zur Verfügung gestellt werden. In Chromium wurde diese Änderung bis mindestens 2022 verschoben, damit dem System mehr Zeit bleibt, die neuen Funktionen von User-Agent-Client-Hinweisen zu bewerten.
Sie können eine Version davon testen, indem Sie das Flag about://flags/#reduce-user-agent in Chrome 93 aktivieren. Hinweis: Dieses Flag hieß in den Chrome-Versionen 84–92 about://flags/#freeze-user-agent. Dadurch wird aus Kompatibilitätsgründen ein String mit den bisherigen Einträgen zurückgegeben, jedoch mit bereinigten Details. Beispiel:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniaturansicht von Sergey Zolkin auf Unsplash