This content originally appeared on Bits and Pieces - Medium and was authored by Chameera Dulanga
Understanding the device data transmission by modern browsers
Over the years User-Agent HTTP header is used to detect the browser and device information. Besides, with the increasing demand for new attributes, the header size has increased significantly. It also affected user’s privacy since these data are also sent to the webserver by default.
Lately, the browsers introduced User-Agent Client Hints with the promise of resolving these issues. This article will explore why we needed a new method and what we should know about User-Agent Client Hints.
Why We Needed User-Agent Client Hints
Initially, the User-Agent header-only contained users’ browser version and OS. But as the requirements increased, new browser versions supported attributes like device information and architecture.
Mozilla/5.0 (Linux; Android 10; OnePlus 6T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
If we take the above sample string, it is possible to extract some information even with bare eyes about the client. So there are reports of using User-Agent string for covert tracking purposes.
However, we can’t just remove the User-Agent string since it is responsible for numerous valid use cases like differential serving, market share analytics, content adaptation.
As a result the need arose to protect users’ privacy against covert tracking methods while keeping backward compatibility for the User-Agent header.
Introduction to User-Agent Client Hints
User-Agent Client Hints were introduced as an alternative for the User-Agent string allowing access to the same data while protecting the users’ privacy.
Unlike the User-Agent string, User-Agent Client Hints do not transmit all the data to the server by default.
User-Agent Client Hints approach introduces a 3 step process to transmit relevant information between browser and server:
Step 1
First, the client (browser) sends a request to the server without any hints. This is the initial page load request or navigation.
Step 2
Then, the server responds by requesting the necessary data about the client. This response includes an Accept-CH header, and it is responsible for letting the client know what the server needs.
Accept-CH: Viewport-Width, Width
If the response contains the above Accept-CH header, it means that the server needs to know the client device viewport-width and width.
Step 3
Once the client receives a response from the server, it will decide what needs to be transmitted, grant access to relevant data, and sends back in all subsequent requests.
Viewport-Width: 560
Width: 340
If you are familiar with the request and response header, you won’t notice anything new in the above mechanism.
It’s because, Accept-CH is not something introduces with User-Agent Client Hints, and it was already in use for requesting additional details like width, connections speeds, etc.r-Agent Client Hints?
In addition to adopting the above mechanism for communication, User-Agent Client Hints enables several new properties to work with.
Those new properties are prefixed with Sec-CH-UA, and we can use them in the Accept-CH server response header to request more details than before.
Following are the set of newly introduced Client Hints:
- Sec-CH-UA : You can request list of browser brands and their significant version with this hint. (Eg: “Google Chrome”; v=”84")
- Sec-CH-UA-Platform : Platform for the device, usually the operating system. (Eg:"Windows")
- Sec-CH-UA-Platform-Version : Version for the platform or OS.
- Sec-CH-UA-Arch : Underlying architecture for the device. (Eg: ARM64)
- Sec-CH-UA-Model : The device model. (Eg: “OnePlus 6”)
- Sec-CH-UA-Mobile : Boolean indicating if the browser is on a mobile device or not. (?1 for true, ?0 for false)
- Sec-CH-UA-Full-Version : The complete version for the browser. (Eg: “73.1.2343B.TR”)
Out of these header hints, Sec-CH-UA and Sec-CH-UA-Mobile are known as low entropy hints, and these 2 hints will be sent by default with the initial request from the client to the server.
If the server needs to know anything other than browser brand and mobile or not, it will have to request it from the client using the Accept-CH header in the response.
Since now you are aware of the latest additions, let’s see how we can use these hints using an example.
Tip: Autor, version, and share independent components with Bit (Github).
Use Bit to build modular design systems, collaborate on micro frontends or simply share components between applications.
User-Agent Client Hints in Action
For example, Let’s take a scenario where a browser requests the home page of a website.
Step 1: Initial Request
With the initial page request, the client will send the Sec-CH-UA and Sec-CH-UA-Mobile header hints to the server, informing the type of the browser, its version, and whether the user prefers a mobile user experience.
GET /home HTTP/1.1
Host: myblog.com
Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile: ?1
Step 2: Server Response
As the server sends the requested home page, it also requests additional details; it needs to know about the client. In this case, it is requesting the full browser version, platform, and architecture of the device.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version, Sec-CH-UA-Platform, Sec-CH-UA-Arch
Step 3: Subsequent Requests
The client will then provide access to the requested information, and those hints will be sent in each subsequent request.
GET /home HTTP/1.1
Host: myblog.com
Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version: "84.0.4143.2"
Sec-CH-UA-Platform: "Android"
Sec-CH-UA-Arch: "ARM64"
Additional Things to Know About Hints
Apart from understanding new hints, and how we can use them, it is also important to know the limitations of these hints as well.
Life Time of a Hint
User-Agent Client Hint has a limited life span, which varies according to 2 factors.
A User-Agent Client Hint can be valid until your browser session expires or a different set of Hints is requested.
Let’s take an example to elaborate on the second scenario. Assume that the server has requested Sec-CH-UA-Platform hint using Accept-CH header, and the client is sending the relevant information, which is Sec-CH-UA-Platform: “Android” in all subsequent requests.
After a while, the server needs another Hint and requests the Sec-CH-UA-Full-Version using the Accept-CH header. Then the client will stop sending the previous information and completely replace it with newly requested information.
So, it is recommended to specify the complete set of Hints you need and even if you need a new one, just make sure you include all the previously requested hints in the response. Also, you can clear all the Hints by sending an empty Accept-CH header.
Scope of a Hint
Usually, scope of a User-Agent Client Hint is limited to same origin requests.
But if there is a need, we can configure hints in cross-origin requests by specifying Feature-Policy header.
For example, if you want to get hints from https://yourblog.com to https://myblog.com , your response from https://myblog.com should include Feature-Policy header in addition to the usual Accept-CH header.
Accept-CH: Sec-CH-UA-Full-Version, DPR
Feature-Policy: ch-ua-full-version yourblog.com;
Then yourblog.com will grant access to full version details as I described earlier.
Conclusion
User-Agent Client Hints are introduced to prevent privacy concerns and reduce the size of the User-Agent header string. Overall, I think User-Agent Client Hints have achieved their primary purpose by introducing a new set of hints that we can request on-demand. On the other hand, User-Agent Client Hints are also at the early stage of development and are still only supported by the Chrome 84+ version.
Besides, there are numerous valid use cases that we need User-Agent string. Some of these use cases can be fulfilled using User-Agent Client Hints, but there are critical cases where the User-Agent string is the most viable option. Therefore, we can’t completely remove the User-Agent string.
For example, User-Agent Client Hints can be the best option for detecting the screen size of the device screen size to provide the best image or video resolution from the server. But, User-Agent Client Hints are still not up for situations like fraud detection, content negotiation, etc.
The main idea of introducing User-Agent Client Hints is not to replace the User-Agent string but to reduce the covert tracking activities. So, I think the best option is to use both User-Agent Client Hints and User-Agent string side by side based on the need.
Learn More
- 3 Ways to Debounce HTTP Requests in Angular
- Mocking HTTP Calls in Cypress End-to-End Tests
- HTTPS: an awesome, secure tale (pt 1)
Future of Device Detection in Modern Browsers: User-Agent Client Hints was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Chameera Dulanga
Chameera Dulanga | Sciencx (2021-03-17T22:43:21+00:00) Future of Device Detection in Modern Browsers: User-Agent Client Hints. Retrieved from https://www.scien.cx/2021/03/17/future-of-device-detection-in-modern-browsers-user-agent-client-hints/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.