User-Agent-Client Hints sind eine neue Erweiterung der Client Hints API, mit der Entwickler auf datenschutzfreundliche und ergonomische Weise auf Informationen zum Browser eines Nutzers zugreifen können.
Mit Clienthinweisen können Entwickler aktiv Informationen zum Gerät oder zu den Bedingungen des Nutzers anfordern, anstatt diese aus dem User-Agent-String (UA) zu parsen. Die Bereitstellung dieser alternativen Route ist der erste Schritt, um den Detaillierungsgrad des User-Agent-Strings letztendlich zu reduzieren.
Erfahren Sie, wie Sie vorhandene Funktionen aktualisieren, die auf dem Parsen des User-Agent-Strings basieren, um stattdessen User-Agent-Client-Hints zu verwenden.
Hintergrund
Wenn Webbrowser Anfragen senden, enthalten diese Informationen über den Browser und seine Umgebung, damit Server Analysen aktivieren und die Antwort anpassen können. Dies wurde schon 1996 definiert (RFC 1945 für HTTP/1.0). Dort finden Sie die ursprüngliche Definition für den User-Agent-String. Sie enthält ein Beispiel:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Mit diesem Header sollten in der Reihenfolge ihrer Bedeutung das Produkt (z.B. Browser oder Bibliothek) und ein Kommentar (z.B. Version) angegeben werden.
Status des User-Agent-Strings
In den Jahrzehnten wurden durch diesen String viele zusätzliche Details über den Client, der die Anfrage stellt, sowie überflüssige Informationen aufgrund der Abwärtskompatibilität angesammelt. Wenn wir uns den aktuellen User-Agent-String von Chrome ansehen,
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
Der String oben enthält Informationen zum Betriebssystem und zur Version des Nutzers, zum Gerätemodell, zur Marke und zur Vollversion des Browsers sowie genügend Hinweise darauf, dass es sich um einen mobilen Browser handelt. Ganz zu schweigen von einer Reihe von Verweisen auf andere Browser aus historischen Gründen.
Durch die Kombination dieser Parameter mit der großen Vielfalt möglicher Werte kann der User-Agent-String genügend Informationen enthalten, um einzelne Nutzer eindeutig identifizieren zu können.
Der User-Agent-String ermöglicht viele legitime Anwendungsfälle und bietet Entwicklern und Websiteinhabern einen wichtigen Zweck. Die Privatsphäre der Nutzer muss jedoch auch vor verdeckten Tracking-Methoden geschützt werden. Das Senden von UA-Informationen verstößt standardmäßig gegen dieses Ziel.
Auch die Webkompatibilität muss verbessert werden, wenn es um den User-Agent-String geht. Da die Daten unstrukturiert sind, führt das Parsen zu unnötiger Komplexität, was häufig zu Fehlern und Problemen mit der Websitekompatibilität führt, die Nutzern schaden. Diese Probleme schaden auch unverhältnismäßig vielen Nutzern von weniger gängigen Browsern, da Websites möglicherweise ihre Konfiguration nicht testen konnten.
Die neuen User-Agent-Client-Hints
User-Agent-Client-Hints ermöglichen den Zugriff auf dieselben Informationen, aber auf datenschutzfreundlichere Weise. So können Browser schließlich die Standardeinstellung des User-Agent-Strings, bei der alles übertragen wird, reduzieren. Client-Hinweise erzwingen ein Modell, bei dem der Server den Browser nach einem Satz von Daten über den Client (den Hinweisen) fragen 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 bereitzustellen. Entwickler profitieren außerdem von einer einfacheren API – keine regulären Ausdrücke mehr!
Die aktuellen Client Hints beschreiben in erster Linie die Anzeige- und Verbindungsfunktionen des Browsers. Weitere Informationen finden Sie unter Ressourcenauswahl mit Clienthinweisen automatisieren. Aber hier ist eine kurze Auffrischung zum Prozess.
Der Server fordert über einen Header bestimmte Client-Hints 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 bei nachfolgenden Anfragen die folgenden Header zurücksenden:
⬆️ Späterer Antrag
Viewport-Width: 460
Width: 230
Der Server kann seine Antworten variieren und beispielsweise Bilder mit einer geeigneten Auflösung bereitstellen.
User-Agent-Clienthinweise erweitern den Attributbereich mit dem Präfix Sec-CH-UA, das über den Accept-CH-Antwortheader des Servers angegeben werden kann. Wenn Sie alle Einzelheiten erfahren möchten, beginnen Sie mit der Erklärung und lesen Sie sich dann das vollständige Angebot durch.
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 wichtige / 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 Hauptversion. |
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 für die Plattform oder das Betriebssystem. |
Sec-CH-UA-Arch |
"arm" |
Die zugrunde liegende Architektur für das Gerät. Auch wenn dies für die Darstellung der Seite nicht relevant ist, kann es sein, dass die Website einen Download im richtigen Format anbieten möchte. |
Sec-CH-UA-Model |
"Pixel 3" |
Gerätemodell |
Sec-CH-UA-Bitness |
"64" |
Die Bitness der zugrunde liegenden Architektur (d.h. die Größe einer Ganzzahl oder Speicheradresse in Bit) |
Beispiel-Anzeigenplattform
Ein Beispiel für eine Anzeigenplattform würde so aussehen:
⬆️ Erste Anfrage vom Browser
Der Browser fordert die /downloads-Seite von der Website an und sendet den standardmäßigen grundlegenden 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 fragt zusätzlich nach der vollständigen Browserversion und der Plattform.
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 diese 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 kann der User-Agent auch in JavaScript über navigator.userAgentData aufgerufen werden. Auf die Standardheaderinformationen Sec-CH-UA, Sec-CH-UA-Mobile und Sec-CH-UA-Platform kann über die Attribute brands und mobile zugegriffen 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" ist ein Verweis auf Informationsentropie, mit anderen Worten: die Menge an Informationen, die diese Werte über den Browser des Nutzers verraten. Wie bei der Anforderung der zusätzlichen Header bestimmt der Browser, welche Werte zurückgegeben werden (falls vorhanden).
// 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.
Hinweislebensdauer und Zurücksetzen
Über den Header Accept-CH angegebene Hinweise werden für die Dauer der Browsersitzung oder so lange gesendet, bis ein anderer Satz von Hinweisen angegeben wird.
Das bedeutet, wenn der Server Folgendes sendet:
⬇️ Antwort
Accept-CH: Sec-CH-UA-Full-Version-List
Anschließend sendet der Browser den Header Sec-CH-UA-Full-Version-List bei allen Anfragen für diese Website, bis der Browser geschlossen wird.
⬆️ Nachfolgende Ersuchen
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"
Wenn jedoch ein anderer Accept-CH-Header empfangen wird, ersetzt dieser die aktuellen Hinweise, die der Browser sendet.
⬇️ Antwort
Accept-CH: Sec-CH-UA-Bitness
⬆️ Nachfolgende Ersuchen
Sec-CH-UA-Platform: "64"
Die zuvor angefragte Sec-CH-UA-Full-Version-List wird nicht gesendet.
Stellen Sie sich den Accept-CH-Header am besten als Angabe des vollständigen Satzes von Hinweisen für diese Seite vor. Dies bedeutet, dass der Browser die angegebenen Hinweise für alle Unterressourcen auf dieser Seite sendet. Auch wenn die Hinweise auch in der nächsten Navigation angezeigt werden, sollte die Website nicht davon ausgehen, dass sie bereitgestellt werden.
Damit lassen sich auch alle vom Browser gesendeten Hinweise löschen, indem in der Antwort ein leeres Accept-CH gesendet wird. Erwägen Sie, dies überall dort hinzuzufügen, wo der Nutzer seine Einstellungen zurücksetzt oder sich von Ihrer Website abmeldet.
Dieses Muster stimmt auch mit der Funktionsweise von Hinweisen über das Tag <meta http-equiv="Accept-CH" …> überein. Die angeforderten Hinweise werden nur bei Anfragen gesendet, die von der Seite initiiert wurden, und nicht bei jeder nachfolgenden Navigation.
Hinweisbereich und ursprungsübergreifende Anfragen
Client Hints werden standardmäßig nur bei Anfragen desselben Ursprungs gesendet. Wenn Sie also nach bestimmten Hinweisen für https://example.com fragen, die zu optimierenden Ressourcen sich aber in https://downloads.example.com befinden, erhalten sie keine Hinweise.
Damit Hinweise bei ursprungsübergreifenden Anfragen zulässig sind, müssen alle Hinweise und der Ursprung in einem Permissions-Policy-Header angegeben werden. Wenn Sie dies auf einen User-Agent-Client-Hint anwenden möchten, müssen Sie den Hinweis kleinschreiben 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?
Kurz gesagt: Sie sollten alle Instanzen, in denen Sie entweder den User-Agent-Header parsen oder JavaScript-Aufrufe verwenden, die auf dieselben Informationen zugreifen (navigator.userAgent, navigator.appVersion oder navigator.platform), so refaktorieren, dass stattdessen User-Agent-Client-Hints verwendet werden.
Wenn Sie noch einen Schritt weiter gehen, sollten Sie Ihre Verwendung der User-Agent-Informationen noch einmal prüfen und sie nach Möglichkeit durch andere Methoden ersetzen. Häufig können Sie dasselbe Ziel mithilfe von progressiver Verbesserung, Funktionserkennung oder responsivem Design erreichen. Das Hauptproblem bei der Verwendung der User-Agent-Daten besteht darin, dass Sie immer eine Zuordnung zwischen der zu prüfenden Property und dem dadurch ermöglichten Verhalten beibehalten. Es ist ein Wartungsaufwand, der dafür sorgt, dass die Erkennung umfassend und aktuell bleibt.
Unter Berücksichtigung dieser Vorbehalte sind im Repository für User-Agent-Client-Hints einige gültige Anwendungsfälle für Websites aufgeführt.
Was passiert mit dem User-Agent-String?
Der Plan ist, die Möglichkeit für verdecktes Tracking im Web zu minimieren, indem die Menge an personenidentifizierbaren Informationen reduziert wird, die durch den vorhandenen User-Agent-String offengelegt werden. Gleichzeitig sollen bestehende Websites nicht übermäßig gestört werden. Mit der Einführung von User-Agent-Client-Hints können Sie jetzt die neue Funktion kennen und ausprobieren, bevor Änderungen an User-Agent-Strings vorgenommen werden.
Letztendlich werden die Informationen im User-Agent-String reduziert, damit das Legacy-Format beibehalten wird und nur der gleiche übergeordnete Browser und die gleichen wichtigen Versionsinformationen wie in den Standardhinweisen angezeigt werden. In Chromium wurde diese Änderung bis mindestens 2022 verschoben, damit das System mehr Zeit hat, die neuen Funktionen der User-Agent-Client-Hints zu testen.
Sie können eine solche Version testen, indem Sie das Flag about://flags/#reduce-user-agent in Chrome 93 aktivieren. (Hinweis: Dieses Flag hieß in den Versionen Chrome 84 bis 92 about://flags/#freeze-user-agent.) Dadurch wird aus Kompatibilitätsgründen ein String mit den bisherigen Einträgen zurückgegeben, aber mit bereinigten Details. Zum Beispiel in etwa:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Thumbnail von Sergey Zolkin auf Unsplash