Safe, reliable Browser sniffing

We’ve recently built a WebExtension for our Web Application as Add-on and extra feature to sell 💰💸 (b/c why not). We decided to serve 4 different browser types: Chrome, Safari, Opera, and Firefox. So we had to figure out which browser is rendering our page to display a browser-specific instructions to the users.

You’re lying to me. Aren’t You?

Browser detection using the user agent is just sucks!! because it’s trivial to spoof this value. For example the snippet below:

navigator.userAgent.indexOf('Chrome') !== -1

returns true for both Google Chrome and Opera (since Opera replaces its engine with Blink + V8 used by Chromium) because its UA string looks like Chrome. Thats is not what am looking for. And if we’re trying to detect a specific browser, the point of feature-checking is kind of lost.

Top-level object FWT

window is the top-level object in the Browser Object Model (BOM) hierarchy. Every single browser has its own properties such as ApplePayError in Safari for instance, in addtion to the standard ones (e.g. window.location, window.console, …etc).