User-Agent-Client-Hinweise 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 Informationen zum Gerät oder zu den Bedingungen des Nutzers aktiv anfordern, anstatt sie aus dem User-Agent-String (UA) zu extrahieren. Die Bereitstellung dieser alternativen Route ist der erste Schritt zur Reduzierung der Detailgenauigkeit von User-Agent-Strings.
Hier erfahren Sie, wie Sie vorhandene Funktionen, die auf dem Parsen des User-Agent-Strings basieren, aktualisieren, um stattdessen Client-Hinweise in User-Agent-Headern zu verwenden.
Hintergrund
Wenn Webbrowser Anfragen senden, enthalten diese Informationen zum Browser und seiner Umgebung, damit Server Analysen aktivieren und die Antwort anpassen können. Dieser wurde bereits 1996 (RFC 1945 für HTTP/1.0) definiert. Dort finden Sie die ursprüngliche Definition für den User-Agent-String mit einem Beispiel:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Diese Überschrift sollte in absteigender Reihenfolge das Produkt (z.B. Browser oder Bibliothek) und einen Kommentar (z.B. Version) angeben.
Der Status des User-Agent-Strings
In den Jahrzehnten, die vergangen sind, wurden diesem String eine Vielzahl zusätzlicher Details über den Client hinzugefügt, der die Anfrage stellt. Außerdem wurde er aufgrund der Abwärtskompatibilität mit unnötigen Informationen überladen. Das sehen wir, 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 obige 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, um daraus zu schließen, dass es sich um einen mobilen Browser handelt. Außerdem enthält er aus historischen Gründen Verweise auf andere Browser.
Die Kombination dieser Parameter mit der schieren Vielfalt der möglichen Werte bedeutet, dass der User-Agent-String genügend Informationen enthalten kann, um einzelne Nutzer eindeutig zu identifizieren.
Der User-Agent-String ermöglicht viele legitime Anwendungsfälle und erfüllt einen wichtigen Zweck für Entwickler und Websiteinhaber. Es ist jedoch auch wichtig, dass die Daten der Nutzer vor verdeckten Tracking-Methoden geschützt sind. Das Senden von UA-Informationen standardmäßig widerspricht diesem Ziel.
Außerdem muss die Webkompatibilität im Hinblick auf den User-Agent-String verbessert werden. Da sie unstrukturiert ist, ist das Parsen unnötig kompliziert. Das ist oft die Ursache für Fehler und Probleme mit der Websitekompatibilität, die Nutzern schaden. Diese Probleme beeinträchtigen auch Nutzer weniger gängiger Browser überproportional, da Websites möglicherweise nicht auf ihre Konfiguration getestet wurden.
Neue User-Agent-Client-Hints
User-Agent-Client-Hinweise ermöglichen den Zugriff auf dieselben Informationen, aber auf eine datenschutzfreundlichere Weise. So können Browser die Standardeinstellung des User-Agent-Strings, bei der alle Informationen gesendet werden, nach und nach reduzieren. Clienthinweise erzwingen ein Modell, bei dem der Server den Browser um eine Reihe von Daten zum Client (die Hinweise) bitten muss. Der Browser wendet dann seine eigenen Richtlinien oder die Nutzerkonfiguration an, um zu bestimmen, welche Daten zurückgegeben werden. Das bedeutet, dass nicht mehr standardmäßig alle User-Agent-Informationen offengelegt werden, sondern der Zugriff jetzt explizit und überprüfbar verwaltet wird. Entwickler profitieren auch von einer einfacheren API – keine regulären Ausdrücke mehr!
Die aktuellen Client-Hinweise beschreiben hauptsächlich die Anzeige- und Verbindungsfunktionen des Browsers. Weitere Informationen finden Sie unter Ressourcenauswahl mit Clienthinweisen automatisieren. Im Folgenden wird der Vorgang kurz zusammengefasst.
Der Server fragt über einen Header nach bestimmten Clienthinweisen:
⬇️ 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 in nachfolgenden Anfragen die folgenden Header zurücksenden:
⬆️ Folgeanfrage
Viewport-Width: 460
Width: 230
Der Server kann seine Antworten variieren, z. B. indem er Bilder mit einer geeigneten Auflösung bereitstellt.
Mit User-Agent-Clienthinweisen wird der Bereich der Properties mit dem Präfix Sec-CH-UA erweitert, das über den Serverantwortheader Accept-CH angegeben werden kann. Alle Details finden Sie im Erläuterungsvideo 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 Indikator zurück, ob es sich 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"
User-Agent-Antwort- und -Anfrageheader
⬇️ AntwortAccept-CH⬆️ Anfrageheader |
⬆️ Anfrage Beispielwert |
Beschreibung |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Liste der Browsermarken und ihrer wichtigen Version. |
Sec-CH-UA-Mobile |
?1 |
Boolescher Wert, der angibt, ob der Browser auf einem Mobilgerät ausgeführt wird (?1 für „wahr“) oder nicht (?0 für „falsch“). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Eingestellt]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 ihrer vollständigen Version. |
Sec-CH-UA-Platform |
"Android" |
Die Plattform des Geräts, 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 des Geräts. Das ist zwar für die Darstellung der Seite möglicherweise nicht relevant, aber die Website sollte einen Download anbieten, der standardmäßig im richtigen Format vorliegt. |
Sec-CH-UA-Model |
"Pixel 3" |
Gerätemodell |
Sec-CH-UA-Bitness |
"64" |
Die Bitanzahl der zugrunde liegenden Architektur (d.h. die Größe in Bits einer Ganzzahl oder Speicheradresse) |
Beispiel für einen Austausch
Ein Beispiel für einen Austausch könnte so aussehen:
⬆️ Erste Anfrage vom Browser
Der Browser fordert die Seite /downloads von der Website an und sendet seinen standardmäßigen einfachen 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
⬆️ Folgeanfragen
: 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 auch in JavaScript über navigator.userAgentData auf den User-Agent zugegriffen werden. Auf die Standardheaderinformationen für Sec-CH-UA, Sec-CH-UA-Mobile und Sec-CH-UA-Platform kann jeweils über die Eigenschaften 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 wird über den getHighEntropyValues()-Aufruf zugegriffen. Der Begriff „hohe Entropie“ bezieht sich auf die Informationsentropie, also die Menge an Informationen, die diese Werte über den Browser des Nutzers verraten. 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 Hinweisen und Zurücksetzen
Über den Accept-CH-Header angegebene Hinweise werden während der gesamten Browsersitzung oder bis zur Angabe einer anderen Reihe von Hinweisen gesendet.
Das bedeutet, dass der Server Folgendes sendet:
⬇️ Antwort
Accept-CH: Sec-CH-UA-Full-Version-List
Der Browser sendet dann den Sec-CH-UA-Full-Version-List-Header bei allen Anfragen für diese Website, bis der Browser 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 vom Browser gesendeten Hinweise 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ändigen Hinweise an, die für diese Seite erforderlich sind. Der Browser sendet dann die angegebenen Hinweise für alle untergeordneten Ressourcen auf dieser Seite. Hinweise bleiben zwar bis zur nächsten Navigation erhalten, die Website sollte jedoch nicht davon ausgehen, dass sie ausgeliefert werden.
Du kannst damit auch alle vom Browser gesendeten Hinweise löschen, indem du in der Antwort eine leere Accept-CH sendest. Sie können diesen Hinweis überall hinzufügen, wo der Nutzer die 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, und nicht bei nachfolgender Navigation.
Bereich von Hinweisen und ursprungsübergreifende Anfragen
Standardmäßig werden Client-Hinweise nur bei Anfragen vom selben Ursprung gesendet. Wenn Sie also bestimmte Hinweise zu https://example.com anfordern, die zu optimierenden Ressourcen sich aber auf https://downloads.example.com befinden, erhalten Sie keine Hinweise.
Damit Hinweise für Cross-Origin-Anfragen zulässig sind, müssen für jeden Hinweis und jeden Ursprung ein Permissions-Policy-Header angegeben werden. Wenn Sie dies auf einen User-Agent-Client-Hint anwenden möchten, müssen Sie den Hint 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");
⬆️ 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 umstrukturieren, in denen Sie entweder 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), um stattdessen User-Agent-Client-Hints zu verwenden.
Gehen Sie noch einen Schritt weiter und überprüfen Sie Ihre Verwendung von User-Agent-Informationen. Ersetzen Sie sie nach Möglichkeit durch andere Methoden. Oft lässt sich das gleiche Ziel mithilfe von progressiver Verbesserung, Funktionserkennung oder responsivem Design erreichen. Das Hauptproblem bei der Verwendung von User-Agent-Daten besteht darin, dass Sie immer eine Zuordnung zwischen der Property, die Sie prüfen, und dem durch sie aktivierten Verhalten vornehmen müssen. Dies ist ein Wartungsaufwand, der dafür sorgt, dass Ihre Erkennung umfassend ist und auf dem neuesten Stand bleibt.
Unter Berücksichtigung dieser Einschränkungen sind im Repository für User-Agent-Client-Hinweise 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, die über den vorhandenen User-Agent-String offengelegt werden, reduziert wird, ohne bestehende Websites unnötig zu beeinträchtigen. Mit User-Agent-Client-Hints haben Sie jetzt die Möglichkeit, die neue Funktion zu verstehen und auszuprobieren, bevor Änderungen an User-Agent-Strings vorgenommen werden.
Mit der Zeit werden die Informationen im User-Agent-String reduziert, sodass das alte Format beibehalten wird, aber nur dieselben allgemeinen Browser- und wichtigen Versionsinformationen wie in den Standardhinweisen bereitgestellt werden. In Chromium wurde diese Änderung bis mindestens 2022 verschoben, um dem Ökosystem mehr Zeit für die Bewertung der neuen Funktionen für User-Agent-Client-Hinweise zu geben.
Sie können eine Version davon testen, indem Sie in Chrome 93 das Flag about://flags/#reduce-user-agent aktivieren. Hinweis: In den Versionen Chrome 84 bis 92 hieß dieses Flag about://flags/#freeze-user-agent. Dies gibt aus Kompatibilitätsgründen einen String mit den Verlaufseinträgen zurück, aber mit entfernten Details. Sie könnten z. B. so etwas sagen:
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