Mit User-Agent-Client-Hints den Datenschutz und die Nutzerfreundlichkeit für Entwickler verbessern

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.

Rowan Merewood
Rowan Merewood
Yoav Weiss
Yoav Weiss

Mit Clienthinweisen 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. Die Bereitstellung dieser alternativen Route ist der erste Schritt, um den Detaillierungsgrad des User-Agent-Strings zu reduzieren.

Hier erfahren Sie, wie Sie vorhandene Funktionen aktualisieren, die auf das Parsen des User-Agent-Strings angewiesen sind, um stattdessen User-Agent-Client-Hints 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 schon 1996 definiert (RFC 1945 für HTTP/1.0). Die ursprüngliche Definition für den User-Agent-String enthält ein Beispiel:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Dieser Header sollte in der Reihenfolge der Bedeutung das Produkt (z.B. Browser oder Bibliothek) und einen Kommentar (z.B. Version) angeben.

Status des User-Agent-Strings

In den Jahrzehnten sind für diesen String verschiedene zusätzliche Details zu dem Client, der die Anfrage gestellt hat, angesammelt. Aufgrund der Abwärtskompatibilität ist dieser String außerdem überflüssige Informationen. 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 und die Vollversion des Browsers sowie genügend Hinweise, um darauf hinzuweisen, dass es sich um einen mobilen Browser handelt. Außerdem enthält er aus historischen Gründen einige Verweise auf andere Browser.

Die Kombination dieser Parameter mit der enormen 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 einem wichtigen Zweck für Entwickler und Websiteinhaber. Es ist jedoch auch wichtig, dass die Privatsphäre der Nutzer vor verdeckten Tracking-Methoden geschützt wird. Das Senden von UA-Informationen verstößt standardmäßig gegen dieses Ziel.

Außerdem muss die Webkompatibilität im Hinblick auf den User-Agent-String verbessert werden. Da es unstrukturiert ist, wird das Parsen unnötig komplex. Dies ist oft die Ursache für Programmfehler und Probleme mit der Websitekompatibilität, die Nutzer schädigen. Außerdem beeinträchtigen diese Probleme unverhältnismäßig viele Nutzer weniger verbreiteter Browser, 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 auf datenschutzfreundlichere Weise. Browser können dadurch die Standardeinstellung für das Übertragen aller Daten im User-Agent-String reduzieren. Mit Clienthinweisen wird ein Modell erzwungen, bei dem der Server den Browser um einen Satz von Daten über den Client (die Hinweise) bitten muss. Der Browser wendet dann seine eigenen Richtlinien oder eine Nutzerkonfiguration an, um zu bestimmen, welche Daten zurückgegeben werden. Das bedeutet, dass nicht standardmäßig alle User-Agent-Informationen offengelegt werden, sondern der Zugriff jetzt explizit und prüfbar verwaltet wird. 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. Weitere Informationen finden Sie unter Ressourcenauswahl mit Clienthinweisen automatisieren. Im Folgenden finden Sie eine kurze Auffrischung zu diesem Vorgang.

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 die folgenden Header in nachfolgenden Anfragen zurücksenden:

⬆️ Nachfolgender Antrag

Viewport-Width: 460
Width: 230

Der Server kann seine Antworten variieren und beispielsweise Bilder in einer geeigneten Auflösung bereitstellen.

User-Agent-Client-Hints erweitern den Eigenschaftenbereich mit dem Präfix Sec-CH-UA, das über den Serverantwortheader Accept-CH angegeben werden kann. Weitere Informationen erhalten Sie in der Erklärung und lesen Sie sich dann den vollständigen Vorschlag durch.

User-Agent-Client-Hints aus Chromium 89

User-Agent-Client-Hints sind seit Version 89 standardmäßig in Chrome aktiviert.

Standardmäßig gibt der Browser die Marke des Browsers, die signifikante Version / 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"

Antwort- und Anfrageheader des User-Agents

🎥️ Antwort Accept-CH
⬆️ Kopfzeile der Anfrage
⬆️ Anfrage
Beispielwert
Beschreibung
Sec-CH-UA "Chromium";v="84",
"Google Chrome";v="84"
Liste der Browsermarken und deren wichtigste Version
Sec-CH-UA-Mobile ?1 Boolescher Wert, der angibt, ob der Browser ein Mobilgerät verwendet (?1 für „true“) oder nicht (?0 für „false“).
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 dem Gerät zugrunde liegende Architektur. Auch wenn dies für die Darstellung der Seite möglicherweise nicht relevant ist, bietet die Website vielleicht einen Download an, in dem standardmäßig das richtige Format verwendet wird.
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 einen Austausch

Hier ein Beispiel für einen Austausch:

⬆️ Erste Anfrage vom Browser
Der Browser fordert die /downloads-Seite der Website an und sendet den 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 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 kann über navigator.userAgentData auch in JavaScript auf den User-Agent zugegriffen werden. Die standardmäßigen Headerinformationen Sec-CH-UA, Sec-CH-UA-Mobile und Sec-CH-UA-Platform können über die Attribute brands bzw. 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 kommt es auch hier darauf an, welche Werte gegebenenfalls vom Browser 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 unter user-agent-client-hints.glitch.me auf Ihrem eigenen Gerät testen.

Hinweis zu Lebensdauer und Zurücksetzen

Hinweise, die über den Header Accept-CH angegeben werden, werden für die Dauer der Browsersitzung oder so lange gesendet, bis ein anderer Satz von Hinweisen angegeben wird.

Wenn der Server Folgendes sendet:

🎬️ Antwort

Accept-CH: Sec-CH-UA-Full-Version-List

Der Browser sendet dann den Header Sec-CH-UA-Full-Version-List 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 angefragte Sec-CH-UA-Full-Version-List wird nicht gesendet.

Stellen Sie sich den Accept-CH-Header am besten so vor, dass er den gesamten Satz von Hinweisen angibt, die für diese Seite gewünscht sind, d. h., der Browser sendet die angegebenen Hinweise für alle Unterressourcen auf dieser Seite. Die Hinweise bleiben zwar in der nächsten Navigation bestehen, die Website sollte aber nicht davon ausgehen, dass sie geliefert werden.

Damit können Sie auch alle vom Browser gesendeten Hinweise löschen, indem Sie ein leeres Accept-CH in der Antwort senden. Du kannst dies überall dort hinzufügen, wo der Nutzer Einstellungen zurücksetzt oder sich von deiner Website abmeldet.

Dieses Muster passt auch über das <meta http-equiv="Accept-CH" …>-Tag an die Funktionsweise von Hinweisen. Die angeforderten Hinweise werden nur bei Anfragen gesendet, die von der Seite initiiert werden, und nicht bei nachfolgenden Aufrufen.

Hinweisbereich und ursprungsübergreifende Anfragen

Standardmäßig werden Client-Hinweise nur bei Anfragen desselben Ursprungs 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 bei ursprungsübergreifenden Anfragen Hinweise zulässig sind, muss jeder Hinweis und Ursprung durch einen Permissions-Policy-Header angegeben werden. Um dies auf einen User-Agent-Client-Hinweis anzuwenden, 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?

Die schnelle Antwort lautet: Du solltest alle Instanzen refaktorieren, 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-Hints zu verwenden.

Sie sollten nun Ihre Verwendung der User-Agent-Informationen noch einmal überprüfen und diese nach Möglichkeit durch andere Methoden ersetzen. Oft erreichen Sie das gleiche Ziel mit progressiver Optimierung, Merkmalserkennung oder responsivem Design. Das grundlegende Problem bei der Nutzung der User-Agent-Daten besteht darin, dass immer eine Zuordnung zwischen der Property, die Sie untersuchen, und dem Verhalten, das sie ermöglicht, beibehalten wird. Es ist ein Wartungsaufwand, der dafür sorgt, dass die Erkennung umfassend und aktuell ist.

Vor diesem Hintergrund enthält das Repository mit den User-Agent-Client-Hinweisen einige gültige Anwendungsfälle für Websites.

Was passiert mit dem User-Agent-String?

Ziel ist es, die Möglichkeiten von verdecktem Tracking im Web zu minimieren, indem die Menge der personenidentifizierbaren Informationen, die im vorhandenen User-Agent-String offengelegt werden, reduziert wird, ohne dass es zu unerwünschten Störungen auf bestehenden Websites kommt. Jetzt neu: User-Agent-Client-Hints geben Ihnen die Möglichkeit, die neue Funktion kennenzulernen und auszuprobieren, bevor Änderungen an User-Agent-Strings vorgenommen werden.

Letztendlich werden die Informationen im User-Agent-String reduziert, sodass das alte Format erhalten bleibt, aber nur dieselben allgemeinen Browser- und Versionsinformationen wie in den Standardhinweisen angezeigt werden. In Chromium wurde diese Änderung bis mindestens 2022 verschoben, damit das System die neuen Funktionen für User-Agent-Client-Hints noch besser bewerten kann.

Sie können eine Version davon testen, indem Sie das Flag about://flags/#reduce-user-agent in Chrome 93 aktivieren. Hinweis: Dieses Flag wurde in den Chrome-Versionen 84–92 als about://flags/#freeze-user-agent bezeichnet. Dadurch wird aus Kompatibilitätsgründen ein String mit den bisherigen Einträgen zurückgegeben, jedoch mit bereinigten Details. Zum 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