Decoding the Browser User Agent String: Unveiling the Mystery Behind Browser Identification

If you are familiar with browser and frontend, you probably heard the term "user agent string"

It holds clues about what web browser someone is using. I encountered this while working at Cefalo when I needed to add a feature that depended on figuring out which browser was being used. It seemed like a simple task, but things got surprisingly tricky when I tried to understand the strange text in the user agent string from my own browser, Chrome:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

Hold on a second! I was expecting to just see "Chrome," but there are all these other confusing words mixed in.

Mozilla: This word usually makes us think of "Mozilla Firefox." But Mozilla is a group of software makers who are behind Mozilla Firefox. So, why is this word here?

WebKit: This is the part that Safari uses to show web pages. Chrome used to use WebKit too, but now it uses something called Blink (which is kind of like WebKit). So, where's "Blink" in this string?

KHTML: This was the thing that made the Konqueror browser show web pages. WebKit was based on KHTML, but why is KHTML mentioned here?

Gecko: This is what Firefox uses to show web pages. But why do they say "like Gecko"? Is it a joke?

Chrome: Got it, that's what I'm using.

Safari: Wait, what?

To make sense of this, let's start with what a user agent is.

Imagine you're a website, and someone comes to visit. You'd like to know what browser they're using, what operating system they're on, and other stuff like that. The user agent string is like a note that the visitor brings with them that says, "Hey, I'm using this browser and this system!" This note is sent along when the visitor asks for a web page.

The user agent string usually looks something like this:

Mozilla/[version] ([system and browser information]) [platform] ([platform details]) [extensions]

In the old days, it was simpler. It might be something like Mosaic/0.9 for the first web browser called Mosaic. But then Netscape Navigator came along, and its note looked like Mozilla/2.02 [en] (WinNT; N). That means Netscape version 2.02 in English, using Windows NT, without any fancy encryption.

But things got messy when Internet Explorer (IE) joined the scene. They had to compete with Netscape, and some websites would only work for Netscape users. So, IE pretended to be Netscape by writing a note like this:

Mozilla/2.0 (compatible; MSIE Version; Operating System) //ExampleMozilla/2.0 (compatible; MSIE 3.03; Windows 95)

This made the websites think IE was Netscape. And that's why the word "Mozilla" is in many user agent strings today.

As new browsers came, they used similar tricks. For example, the "like Gecko" thing was a way to trick servers into giving Chrome the same content as Gecko (which Firefox uses). And Chrome mixes in the words for Safari along with its own version number to get the content meant for Safari.

Now, how can we figure out the browser programmatically?

In Angular, you can use this code:

const userAgent = window.navigator.userAgent; 
console.log(userAgent); // Prints Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

But identifying the browser from this string is a bit tricky. There's a table you can use to help with regular expressions, shown here:

But don't worry, you don't have to make this from scratch. There's a library called UAParser.js that does this work for you

Does this post cover everything about user agent strings? Nope! Just like Chrome sometimes tricks servers, I might have skipped a detail or two.

References: