Device Detection in modern browsers
This article tries to dig into collecting information about the user's current system architecture (OS), browser, window dimensions etc.
4 min read
User-Agent HTTP Header is used for quite a long time to detect the browser and device information. Besides, with the increasing demand and making it easy to use, it becomes quite a pain in itself to detect efficiently. What I mean is:
Just look at the header’s value in different machines and browser clients. Most of them look almost the same. Now you have to parse it according to your needs and extract useful pieces of information from it.
Mozilla/5.0 (compatible; Googlebot/2.1; +
)this is the User-Agent for GoogleBot.
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36this is chrome on windows.
More Modern Approach
Gives you proper headers like
Viewport-Width: 560 Width: 340 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"
This is possible from special headers
User-Agent Client Hints or
CH-UA. Unlike the User-Agent string, User-Agent Client Hints do not transmit all the data to the server by default.
First, the client (browser) sends a request to the server without any hints. This is the initial page load request or navigation.
Then, the server responds by requesting the necessary data about the client. This response includes an
Accept-CHheader and it is responsible for letting the client know what the server needs. like
Accept-CH: Viewport-Width, Widththis means that the server needs to know the client device viewport-width and width.
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.
Following are the headers introduced by Client Hints
Sec-CH-UA: You can request a 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:
Sec-CH-UA-Platform-Version: Version for the platform or OS.
Sec-CH-UA-Arch: Underlying architecture for the device. (Eg:
Sec-CH-UA-Model: The device model. (Eg:
Sec-CH-UA-Mobile: Boolean indicating if the browser is on a mobile device or not. (
Sec-CH-UA-Full-Version: The complete version for the browser. (Eg:
Out of these header hints,
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.
Step 1. The client requests the resource webpage with certain
user-agent client-hints headers. The corresponding request may look something like this
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 requests for more additional data (if, in case) Like so
HTTP/1.1 200 OK Accept-CH: Sec-CH-UA-Full-Version, Sec-CH-UA-Platform, Sec-CH-UA-Arch
Now the subsequent requests would send these headers by default and the browser essentially caches these settings sent by the server identifying headers that are to be sent.
The client hints have a certain lifespan which varies on two factors: Until your browser session expires or a different set of hints is requested by the server.
The scope of user agent client hints is limited to the same origin requests. But this can be changed/configured in cross-origin requests by specifying
For example, if you want to get hints from
https://hello.com , your response from
https://hello.com should include
Feature-Policy header in addition to the usual
Accept-CH: Sec-CH-UA-Full-Version, DPR Feature-Policy: ch-ua-full-version m3rashid.in;
User-Agent Client Hints are introduced to prevent privacy concerns and reduce the size of the User-Agent header string.
User-Agent Client Hints have achieved their primary purpose by introducing a new set of hints that we can request on demand.
There are critical cases where the User-Agent string is the most viable option. Therefore, we can’t completely remove the User-Agent string.
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.