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 zum Browser eines Nutzers zugreifen können.

Rowan Merewood

Yoav Weiss

Mit Client-Hints können Entwickler aktiv Informationen über die Gerät oder Bedingungen anstatt im User-Agent (UA) zu parsen. . Die Bereitstellung dieser alternativen Route ist der erste Schritt, reduziert den Detaillierungsgrad von User-Agent-Strings.

Erfahren Sie, wie Sie Ihre vorhandene Funktionalität aktualisieren, die auf dem Parsen des User-Agent-String, um stattdessen User-Agent-Client-Hints zu verwenden.

Achtung:Wenn Sie bereits User-Agent-Client-Hints verwenden, beachten Sie, dass seit Chrome 90 Das Format des Headers hat sich geändert, sodass die Accept-CH-Tokens genau mit dem zurückgegebene Header.

Hintergrund

Wenn Webbrowser Anfragen stellen, enthalten diese Informationen über den Browser und damit Server Analysen ermöglichen und die Antwort anpassen können. Dies wurde schon 1996 definiert (RFC 1945 für HTTP/1.0). Hier können Sie die ursprüngliche Definition für den User-Agent-String zu finden, die ein Beispiel:

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

Mit dieser Überschrift sollte das Produkt (z.B. Browser oder Bibliothek) und einen Kommentar (z.B. die Version) enthält.

Status des User-Agent-Strings

In den Jahrzehnten sind durch diesen String zahlreiche zusätzliche Details über den Kunden, der die Anfrage stellt (sowie überflüssige Informationen, Kompatibilität). Im aktuellen User-Agent von Chrome String:

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 Gerätemodell, die Marke des Browsers und die Vollversion – genug Anhaltspunkte, um daraus abzuleiten, dass es sich um einen mobilen Browser handelt, und ganz zu schweigen von einer Reihe von Verweisen 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 könnte, um individuelle eindeutig identifiziert werden können.

Der User-Agent-String ermöglicht viele legitime Anwendungsfälle, und erfüllt sowohl Entwickler als auch Websiteinhaber. Es ist jedoch ist es außerdem wichtig, dass die Nutzenden wird die Privatsphäre vor verdeckten Verfolgungsmethoden, Das Senden von UA-Informationen gilt standardmäßig für dieses Zielvorhaben.

Auch die Webkompatibilität muss verbessert werden, wenn es um den User-Agent geht. . Es ist unstrukturiert, sodass das Parsen zu unnötiger Komplexität führt. was häufig die Ursache für Programmfehler und Probleme mit der Websitekompatibilität ist, die Nutzern schaden. Diese Probleme schaden auch unverhältnismäßig vielen Nutzern von weniger gängigen Browsern, da Websites möglicherweise beim Testen ihrer Konfiguration fehlgeschlagen.

Die neuen User-Agent-Client-Hints

User-Agent-Client-Hints Zugang zu denselben Informationen ermöglichen, aber auf datenschutzfreundlichere Art und Weise, Browser aktivieren, um die Standardeinstellung des User-Agent-Strings zu reduzieren alles verbreitet. Client Hints erzwingen eine Modell, bei dem der Server den Browser nach einem Satz von Daten zum Client fragen muss, und der Browser seine eigenen Richtlinien oder Nutzerkonfigurationen auf bestimmen, welche Daten zurückgegeben werden. Anstatt alle standardmäßig die User-Agent-Informationen verwenden, wird der Zugriff jetzt in einer expliziten prüfbar sein. Entwickler profitieren außerdem von einer einfacheren API, Ausdrücke!

Die aktuellen Client Hints beschreiben vor allem die Anzeige und Verbindungsmöglichkeiten. 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 die folgenden Header in nachfolgenden Anfragen:

⬆️ Späterer Antrag

Viewport-Width: 460
Width: 230

Der Server kann seine Antworten variieren und beispielsweise Bilder an einer angemessene Lösung zu finden.

Hinweis:Derzeit wird darüber gesprochen, wie Client-Hints bei einer ersten Anfrage aktiviert werden können. aber Sie sollten responsives Design oder Progressive Enhancement an, bevor wir diesen Weg einschlagen.

User-Agent-Client-Hints erweitern die Reihe von Properties mit der Sec-CH-UA Präfix, das über den Antwortheader des Accept-CH-Servers angegeben werden kann. Für alle beginnen Sie mit der Erklärung und Sehen Sie sich dann das vollständige Angebot an.

Hinweis: Client Hints werden nur über sichere Verbindungen gesendet. Achten Sie daher darauf, dass Sie Ihre Website zu HTTPS migriert haben.

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 Browsermarke, wichtige / Hauptversion, Plattform und ein Indikator, 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"

Achtung:Diese Eigenschaften sind komplexer als nur ein einzelner Wert. Daher ist Structured Data Überschriften werden zur Darstellung von Listen und booleschen Werten verwendet.

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)

Wichtiger Hinweis:Aufgrund von Datenschutz- und Kompatibilitätsaspekten kann der Wert leer sein, nicht zurückgegeben oder mit einem anderen Wert ausgefüllt. Dies wird als GREASE (GREASE).

Beispiel-Anzeigenplattform

Ein Beispiel für eine Anzeigenplattform würde so aussehen:

⬆️ Erste Anfrage vom Browser
Der Browser fordert die /downloads an von der Website und sendet ihren 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 nach der Vollversion des Browsers 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ätzliche Informationen und sendet die zusätzlichen Hinweise an alle nachfolgenden -Anfragen.

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 auf den User-Agent auch in JavaScript über navigator.userAgentData Die Standardeinstellungen Sec-CH-UA, Sec-CH-UA-Mobile und Der Sec-CH-UA-Platform-Header kann über brands und mobile-Properties:

// 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. Die „hohe Entropie“ ist eine Referenz auf Informationsentropie, in anderen Wörter – die Menge an Informationen, die diese Werte über die Browser. Wie bei der Anforderung der zusätzlichen Header hängt der 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.

Hinweis:Sie benötigen Chrome 89 oder höher.

Hinweislebensdauer und Zurücksetzen

Im Accept-CH-Header angegebene Hinweise werden für die Dauer des oder bis ein anderer Satz Hinweise angegeben ist.

Das bedeutet, wenn der Server Folgendes sendet:

⬇️ Antwort

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

Der Browser sendet dann bei allen Anfragen den Header Sec-CH-UA-Full-Version-List 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, wird die vollständig ersetzen Sie 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 Gewünschte Hinweise für diese Seite, d. h. der Browser sendet die angegebenen Hinweise für alle untergeordneten Ressourcen auf dieser Seite. Während Hinweise bis zur nächsten sollte sich die Website nicht verlassen und nicht davon ausgehen, dass sie bereitgestellt werden.

Erfolg:Achten Sie immer darauf, dass Sie auch ohne diese nutzerfreundliche Website eine sinnvolle Nutzererfahrung bieten können. Informationen. Dies dient der Verbesserung der Nutzererfahrung, nicht der Definition. Deshalb werden sie als „Hinweise“ bezeichnet. und nicht „Antworten“ oder „Anforderungen“.

Sie können diese Option auch verwenden, um alle vom Browser gesendeten Hinweise zu löschen. indem Sie in der Antwort ein leeres Accept-CH-Objekt senden. Sie sollten dies irgendwo hinzufügen dass der Nutzer seine Einstellungen zurücksetzt oder sich von Ihrer Website abmeldet.

Dieses Muster stimmt auch mit der Funktionsweise von Hinweisen über die <meta http-equiv="Accept-CH" …>-Tag. Die angeforderten Hinweise werden nur gesendet am Anfragen, die von der Seite und nicht bei einer nachfolgenden Navigation initiiert wurden.

Hinweisbereich und ursprungsübergreifende Anfragen

Client Hints werden standardmäßig nur bei Anfragen desselben Ursprungs gesendet. Das bedeutet, wenn Sie nach bestimmten Tipps für https://example.com fragen, aber die Ressourcen, optimieren möchten, befinden sich auf https://downloads.example.com, nicht Hinweise erhalten.

Damit Hinweise bei ursprungsübergreifenden Anfragen zulässig sind, müssen alle Hinweise und der Ursprung angegeben werden durch einen Permissions-Policy-Header. Um dies auf einen User-Agent-Client-Hint anzuwenden, muss der Hinweis kleingeschrieben und das Präfix sec- entfernt werden. 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 ist, dass Sie alle Instanzen refaktorieren sollten, entweder im User-Agent-Header oder mithilfe von JavaScript-Aufrufen, dieselben Informationen abrufen (z.B. navigator.userAgent, navigator.appVersion, oder navigator.platform), um stattdessen User-Agent-Client-Hints zu verwenden.

Wenn Sie noch einen Schritt weiter gehen, sollten Sie die Verwendung des User-Agents und ersetzen Sie diese nach Möglichkeit durch andere Methoden. Häufig können Sie erreichen Sie das gleiche Ziel, indem Sie Progressive Enhancement, Funktion oder responsivem Design. Das Hauptproblem bei der Verlässlichkeit der User-Agent-Daten ist, dass Sie Pflegen einer Zuordnung zwischen der untersuchten Eigenschaft und dem Verhalten, ermöglicht. Es ist ein Wartungsaufwand, der dafür sorgt, dass Ihre Erkennung umfassend und aktuell bleibt.

Unter Berücksichtigung dieser Vorbehalte sind im User-Agent-Client-Hint-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 an Informationen zur Identifizierung, die durch den vorhandenen User-Agent-String offengelegt werden während bestehende Websites nicht zu stark beeinträchtigt werden. Der neue User-Agent Mit Client Hints können Sie jetzt die neuen Funktionen bevor Änderungen an User-Agent-Strings vorgenommen werden.

Letztendlich werden die Informationen im User-Agent-String reduziert, und gleichzeitig den gleichen High-Level-Browser und Versionsinformationen gemäß den Standardhinweisen. In Chromium wurde diese Änderung mindestens 2022 aufgeschoben werden, um dem Ökosystem mehr Zeit zu geben, die neuen Funktionen von User-Agent-Client-Hints testen.

Sie können eine Version testen, indem Sie den Flag about://flags/#reduce-user-agent von Chrome 93 (Hinweis: Dieses Flag war mit dem Namen about://flags/#freeze-user-agent in den Versionen Chrome 84 bis 92). Dadurch wird aus Kompatibilitätsgründen einen String mit den bisherigen Einträgen zurückgeben, aber mit bereinigten Besonderheiten. 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 am Unsplash