What are Client Hint Headers?

What are Client Hint Headers?

Client Hints are a set of HTTP request headers that provide granular and explicit information about the client's device, network conditions, and user preferences. They are designed to be a more structured and privacy-preserving alternative to the monolithic and often inaccurate User-Agent string.

Instead of a single string containing a jumble of information, Client Hints break down this information into separate, well-defined headers. This allows a server to perform more effective content negotiation—tailoring the content it serves to the specific capabilities of the client.

How Do Client Hints Work?

The mechanism is designed to be explicit, meaning the server must first ask for the information it needs. This prevents the passive leakage of information on every request.

1. Initial Request: A browser makes an initial request to a server. It might send a few default, low-entropy hints like Sec-CH-UA (brand and version), Sec-CH-UA-Mobile, and Sec-CH-UA-Platform.

2. Server Opt-in: The server responds with the requested resource and includes an Accept-CH header. This header tells the browser which additional Client Hints the server would like to receive on subsequent requests. http HTTP/1.1 200 OK Accept-CH: DPR, Viewport-Width, Save-Data

3. Subsequent Requests: For all subsequent requests to that origin, the browser will now include the requested headers (DPR, Viewport-Width, Save-Data) in addition to the defaults.

For hints that are critical to the initial rendering of the page (like Viewport-Width), the server can also use the Critical-CH header. This tells the browser that the hint is so important that it should retry the request with the hint included if the first request didn't have it.

Key Client Hint Headers

Client Hints are categorized into User-Agent Client Hints and device/network-specific hints.

User-Agent (UA) Client Hints

These are intended to gradually replace the User-Agent string.

• Sec-CH-UA: The browser's brand and significant version (e.g., "Chromium";v="104", "Google Chrome";v="104").
• Sec-CH-UA-Mobile: A boolean indicating if the browser is on a mobile device (e.g., ?1 for true).
• Sec-CH-UA-Platform: The operating system platform (e.g., "Windows").
• Sec-CH-UA-Arch: The underlying CPU architecture (e.g., "x86").
• Sec-CH-UA-Model: The device model (e.g., "Pixel 6").

Device and Network Hints

These are primarily used for performance optimization.

• Viewport-Width: The width of the layout viewport in CSS pixels.
• DPR (Device Pixel Ratio): The ratio of physical pixels to CSS pixels for the screen.
• Save-Data: A boolean indicating the user's preference for reduced data usage.
• Downlink: The effective bandwidth of the user's connection in Mbps.
• ECT (Effective Connection Type): The effective connection type (e.g., '4g', '3g', 'slow-2g').

Use Cases for Client Hints

1. Smarter Responsive Images: This is a primary use case. Instead of relying on complex srcset attributes in HTML, a server can use the Viewport-Width and DPR hints to automatically select and serve the perfectly optimized image for the user's screen, reducing bandwidth and improving LCP.

2. Content Adaptation: A server can adapt the CSS, JavaScript, or even the HTML it serves based on the client's capabilities. For example, it could serve a simplified version of a site to a user with Save-Data: 1 enabled.

3. Improved Analytics: Client Hints provide more structured and reliable data for analytics than parsing the notoriously messy User-Agent string.

4. Enhanced Security and Bot Detection: While not their primary purpose, the presence, absence, or combination of certain Client Hints can be used as another signal in device fingerprinting to help distinguish between legitimate browsers and automated bots.

Client Hints and Privacy

Client Hints were designed with privacy as a key consideration. By requiring the server to explicitly request information via Accept-CH, they prevent the passive fingerprinting that was possible with the User-Agent string. This opt-in model ensures that only the necessary information is shared, giving more control to the user and browser.