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 Client Hints können Entwickler aktiv Informationen zum Gerät oder zu den Bedingungen des Nutzers anfordern, anstatt sie aus dem User-Agent-String (UA) parsen zu müssen. Diese Alternative ist der erste Schritt, um die Granularität von User-Agent-Strings zu verringern.
Hier erfahren Sie, wie Sie Ihre vorhandene Funktionalität, die auf dem Parsen des User-Agent-Strings basiert, so aktualisieren, dass stattdessen User-Agent-Client-Hints verwendet werden.
Hintergrund
Wenn Webbrowser Anfragen senden, enthalten diese Informationen über den Browser und seine Umgebung, damit Server Analysen aktivieren und die Antwort anpassen können. Das wurde bereits 1996 (RFC 1945 für HTTP/1.0) definiert. Dort finden Sie die ursprüngliche Definition für den User-Agent-String, die auch ein Beispiel enthält:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Mit diesem Header sollte das Produkt (z.B. Browser oder Bibliothek) und ein Kommentar (z.B. Version) in der Reihenfolge ihrer Bedeutung angegeben werden.
Status des User-Agent-Strings
Im Laufe der Jahrzehnte sind in diesem String eine Vielzahl zusätzlicher Details zum Client, der die Anfrage stellt, sowie aufgrund der Abwärtskompatibilität auch unnötige Informationen hinzugekommen. Das lässt sich am aktuellen User-Agent-String von Chrome erkennen:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
Der oben genannte String enthält Informationen zum Betriebssystem und zur Version des Nutzers, zum Gerätemodell, zur Marke und zur vollständigen Version des Browsers sowie genügend Hinweise darauf, dass es sich um einen mobilen Browser handelt. Außerdem enthält er aus historischen Gründen eine Reihe von Verweisen auf andere Browser.
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 zu identifizieren.
Der User-Agent-String ermöglicht viele legitime Anwendungsfälle und ist für Entwickler und Websiteinhaber wichtig. Es ist jedoch auch wichtig, dass die Privatsphäre der Nutzer vor verdeckten Tracking-Methoden geschützt wird. Das standardmäßige Senden von UA-Informationen widerspricht diesem Ziel.
Außerdem muss die Webkompatibilität in Bezug auf den User-Agent-String verbessert werden. Sie ist unstrukturiert, sodass das Parsen unnötige Komplexität verursacht, was oft die Ursache für Fehler und Probleme mit der Websitekompatibilität ist, die Nutzer beeinträchtigen. Diese Probleme beeinträchtigen auch unverhältnismäßig stark Nutzer weniger häufiger Browser, da Websites möglicherweise nicht mit ihrer Konfiguration getestet wurden.
Einführung der neuen User-Agent-Client-Hints
User-Agent Client Hints ermöglichen den Zugriff auf dieselben Informationen, aber auf datenschutzfreundlichere Weise. So können Browser den User-Agent-String schließlich auf die Übertragung aller Informationen beschränken. Client-Hinweise erzwingen ein Modell, bei dem der Server den Browser nach einer Reihe von Daten über den Client (die Hinweise) fragen muss und der Browser seine eigenen Richtlinien oder die Nutzerkonfiguration anwendet, um zu bestimmen, welche Daten zurückgegeben werden. Das bedeutet, dass nicht mehr alle User-Agent-Informationen standardmäßig verfügbar sind, sondern der Zugriff explizit und nachvollziehbar verwaltet wird. Entwickler profitieren außerdem von einer einfacheren API – reguläre Ausdrücke sind nicht mehr erforderlich.
Die aktuelle Gruppe von Client-Hinweisen beschreibt in erster Linie die Anzeige- und Verbindungsfunktionen des Browsers. Weitere Informationen finden Sie unter Ressourcenauswahl mit Client-Hinweisen automatisieren. Hier ist eine kurze Zusammenfassung des Prozesses.
Der Server fordert bestimmte Client-Hinweise über einen Header 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 entscheiden, die folgenden Header in nachfolgenden Anfragen zurückzusenden:
⬆️ Nachfolgende Anfrage
Viewport-Width: 460
Width: 230
Der Server kann seine Antworten variieren, z. B. indem er Bilder mit einer angemessenen Auflösung bereitstellt.
Mit User-Agent Client Hints wird der Bereich der Eigenschaften mit dem Präfix Sec-CH-UA erweitert, die über den Serverantwortheader Accept-CH angegeben werden können. Alle Details finden Sie in der Erläuterung und im vollständigen Vorschlag.
User-Agent-Client-Hints ab Chromium 89
User-Agent-Client-Hints sind in Chrome seit Version 89 standardmäßig aktiviert.
Standardmäßig gibt der Browser die Browsermarke, die Hauptversion, die Plattform und einen Hinweis darauf zurück, ob es sich beim Client um ein Mobilgerät handelt:
⬆️ 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"
Antwort- und Anfrageheader des User-Agents
⬇️ Antwort Accept-CH⬆️ Anfrageheader |
⬆️ Anfrage Beispielwert |
Beschreibung |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Liste der Browsermarken und ihrer wichtigsten Version. |
Sec-CH-UA-Mobile |
?1 |
Boolescher Wert, der angibt, ob der Browser auf einem Mobilgerät ausgeführt wird (?1 für „true“) oder nicht (?0 für „false“). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Eingestellt]Die vollständige Version des Browsers. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Liste der Browsermarken und ihrer vollständigen Version. |
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 des Geräts. Das ist zwar möglicherweise nicht relevant für die Anzeige der Seite, aber die Website bietet vielleicht einen Download an, bei dem standardmäßig das richtige Format verwendet wird. |
Sec-CH-UA-Model |
"Pixel 3" |
Gerätemodell |
Sec-CH-UA-Bitness |
"64" |
Die Bitanzahl der zugrunde liegenden Architektur (d.h. die Größe einer Ganzzahl oder Speicheradresse in Bit) |
Beispiel für einen Austausch
Ein Beispiel für einen Austausch sieht so aus:
⬆️ Erstanfrage vom Browser
Der Browser fordert die Seite /downloads von 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 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 die zusätzlichen Hinweise in 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 über navigator.userAgentData auch in JavaScript auf den User-Agent zugegriffen werden. Auf die Standard-Headerinformationen Sec-CH-UA, Sec-CH-UA-Mobile und Sec-CH-UA-Platform kann über die Attribute brands bzw. 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 wird über den getHighEntropyValues()-Aufruf zugegriffen. Der Begriff „hohe Entropie“ bezieht sich auf die Informationsentropie, d. h. die Menge an Informationen, die diese Werte über den Browser des Nutzers preisgeben. Wie beim Anfordern der zusätzlichen Header hängt es vom Browser ab, welche Werte 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 ausprobieren.
Lebensdauer von Tipps und Zurücksetzen
Hinweise, die über den Accept-CH-Header angegeben werden, werden für die Dauer der Browsersitzung oder bis zur Angabe einer anderen Gruppe von Hinweisen gesendet.
Wenn der Server Folgendes sendet:
⬇️ Antwort
Accept-CH: Sec-CH-UA-Full-Version-List
Der Browser sendet den Sec-CH-UA-Full-Version-List-Header dann bei allen Anfragen für diese Website, bis er geschlossen wird.
⬆️ Folgeanfragen
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, werden die aktuellen Hinweise, die der Browser sendet, vollständig ersetzt.
⬇️ Antwort
Accept-CH: Sec-CH-UA-Bitness
⬆️ Folgeanfragen
Sec-CH-UA-Platform: "64"
Die zuvor angeforderte Sec-CH-UA-Full-Version-List wird nicht gesendet.
Der Accept-CH-Header gibt die vollständige Gruppe der für diese Seite gewünschten Hinweise an. Der Browser sendet die angegebenen Hinweise dann für alle untergeordneten Ressourcen auf dieser Seite. Hinweise bleiben bis zur nächsten Navigation erhalten, die Website sollte sich aber nicht darauf verlassen oder davon ausgehen, dass sie bereitgestellt werden.
Sie können damit auch alle vom Browser gesendeten Hinweise effektiv löschen, indem Sie eine leere Accept-CH in der Antwort senden. Fügen Sie diesen Code überall dort ein, wo der Nutzer Einstellungen zurücksetzt oder sich von Ihrer Website abmeldet.
Dieses Muster entspricht auch der Funktionsweise von Hinweisen über das <meta http-equiv="Accept-CH" …>-Tag. Die angeforderten Hinweise werden nur bei Anfragen gesendet, die von der Seite initiiert werden, nicht bei nachfolgenden Navigationsvorgängen.
Hinweisbereich und ursprungsübergreifende Anfragen
Standardmäßig werden Client-Hinweise nur bei Anfragen mit demselben Ursprung gesendet. Wenn Sie also beispielsweise spezifische Tipps zu https://example.com anfordern, die zu optimierenden Ressourcen sich aber auf https://downloads.example.com befinden, erhalten Sie keine Tipps.
Wenn Sie Hinweise für Cross-Origin-Anfragen zulassen möchten, müssen Sie jeden Hinweis und Ursprung mit einem Permissions-Policy-Header angeben. Wenn Sie dies auf einen User-Agent-Client-Hint anwenden möchten, müssen Sie den Hinweis in Kleinbuchstaben schreiben 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");
⬆️ Anforderung 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 den User-Agent-Header parsen oder einen der JavaScript-Aufrufe verwenden, die auf dieselben Informationen zugreifen (d.h. navigator.userAgent, navigator.appVersion oder navigator.platform), so umgestalten, dass stattdessen User-Agent Client Hints verwendet werden.
Gehen Sie noch einen Schritt weiter und überprüfen Sie die Verwendung von User-Agent-Informationen. Ersetzen Sie sie nach Möglichkeit durch andere Methoden. Oft lässt sich dasselbe Ziel durch progressive Verbesserung, die Erkennung von Funktionen oder responsives Design erreichen. Das grundlegende Problem bei der Verwendung von User-Agent-Daten besteht darin, dass Sie immer eine Zuordnung zwischen der Property, die Sie untersuchen, und dem Verhalten, das sie ermöglicht, aufrechterhalten müssen. Das ist ein Wartungsaufwand, um sicherzustellen, dass Ihre Erkennung umfassend ist und auf dem neuesten Stand bleibt.
Unter Berücksichtigung dieser Einschränkungen werden im User-Agent Client Hints-Repository einige gültige Anwendungsfälle für Websites aufgeführt.
Was passiert mit dem User-Agent-String?
Ziel ist es, die Möglichkeiten für verdecktes Tracking im Web zu minimieren, indem die Menge der personenidentifizierbaren Informationen reduziert wird, die durch den vorhandenen User-Agent-String offengelegt werden, ohne dass dies zu unnötigen Störungen auf bestehenden Websites führt. Durch die Einführung von User-Agent Client Hints haben Sie jetzt die Möglichkeit, die neue Funktion kennenzulernen und zu testen, bevor Änderungen an User-Agent-Strings vorgenommen werden.
Schließlich werden die Informationen im User-Agent-String reduziert, sodass das alte Format beibehalten wird, aber nur die gleichen allgemeinen Browser- und wichtigen Versionsinformationen wie bei den Standard-Hinweisen bereitgestellt werden. In Chromium wurde diese Änderung auf mindestens 2022 verschoben, um dem Ökosystem mehr Zeit zu geben, die neuen Funktionen von User-Agent Client Hints zu bewerten.
Sie können eine Version davon testen, indem Sie das Flag about://flags/#reduce-user-agent in Chrome 93 aktivieren. Hinweis: In den Chrome-Versionen 84 bis 92 hieß dieses Flag about://flags/#freeze-user-agent. Aus Kompatibilitätsgründen wird ein String mit den Verlaufsdaten zurückgegeben, aber 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
Thumbnail von Sergey Zolkin auf Unsplash