How to get device information from user requests

Getting each request's device information is good for analytics, it can help with understanding your business target audience. However, fingerprinting too much information may lead to violating some privacy laws.

This post will be discussing the use of User-Agent header in every network request.

Every browser and most IOT devices, even cli apps include a User-Agent header in every request. This header contains information about the device such as model, OS, browser and sometimes processor information as well.

Example user agent from iPhone 11 Pro:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

You may notice that the user agent does not include details such as which the exact model version. This is because the header is used to let the server serves different content based on the requesting device, for example, some websites serve mobile and desktop version of their site. So the exact model version is not required to perform this action.

In my last post how to make a url shortener. One feature that can be built on top of a service like this is analytics, this can be done by reading the User-Agent header in the request and parse the information.

The following tutorial will be using hono (nodejs) to get the request header, it can be done with any language, you just need be able to access the request headers.

Create a new hono app following their guide and add a new request route.

app.get("/header", (c) => {
    const userAgent = c.req.header("User-Agent");
    return c.text(userAgent || "");
});

Now you are able to get the user agent, how do you get the device information with code? This is where parser comes in. Usually the user agent follows a particular format, for example:

User-Agent: <product> / <product-version> <comment>

However, this can be easily changed from the client side, so by using a public parser we can avoid the hassle to make one ourselves. I don't recommend making one as it is a very tedious task and a waste of time that can be used to learn other stuff.

More user agent examples from firefox.

This is a example user agent regex file from a popular repository ua-parser.

The best parser I found in overall is ua-parser-js which is javascript only. The one I used for my url shortener service, which is using golang, is a combination of 2 parsers to match the result retrieved by ua-parser-js.

Start by installing the parser.

npm install ua-parser-js
npm install -D @types/ua-parser-js # for typescript

Then add the parser to the header route.

import { UAParser } from "ua-parser-js";

app.get("/header", (c) => {
    const userAgent = c.req.header("User-Agent");

    const parser = new UAParser(userAgent);
    return c.json(parser.getResult());
});

Then you should be able to get your device information.

That's all, now you are able to get the device information of your users, it can be used to serve different content based on device type, disable request logging if the request is made by a bot (very useful in my opinion), log the device to provide analytics and more.

Feel free to share ideas for me to explore, I am interested in learning web stuff and I do open source work in my free time.