DEV Community

Cover image for Safe, reliable Browser sniffing
Mahmoud Elmahdi
Mahmoud Elmahdi

Posted on • Edited on

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 
Enter fullscreen mode Exit fullscreen mode

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.

Check out MDN web docs: Browser detection using the user agent for futher details.

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).

Solution

/*
 * Browser detection
 * @return {String} 
 */
const browserDetection = () => {
  const browsers = {
    firefox: !!window.InstallTrigger,
    safari: !!window.ApplePaySession,
    opera: window.opr && !!window.opr.addons,
    chrome: window.chrome && !!window.chrome.webstore
  };

  return Object.keys(browsers).find(key => browsers[key] === true);
};

console.log(browserDetection()) // browser name expected
Enter fullscreen mode Exit fullscreen mode
  • Firefox: Theย InstallTriggerย interface is an interesting outlier in the Apps API.
  • Safari: ApplePaySessionย belongs to the Apple Pay JS API. A session object for managing the payment process on the web.
  • Opera: opr self explanatory. .opr.addons represent interface in the Add-ons API
  • Chrome: chrome.webstore API to initiate app and extension installations "inline" from web page. Notice: this will be deprecated, thanks to Madison Dickson. Any recommendations are welcome!

Tested in the following "Desktop Browsers":

โœ“ Firefox Quantum Version ~60

โœ“ Google Chrome Version ~67

โœ“ Opera Version ~53

โœ“ Safari Version ~11

Please keep in mind, that solution worked just perfectly in my case, and might not fit yours.

Demo on Codepen


Feedback are welcome. If you have any suggestions or corrections to make, please do not hesitate to drop me a note/comment.

Top comments (6)

Collapse
 
mheiduk profile image
Marc Heiduk • Edited

For Chrome detection, try:

var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

Collapse
 
offirmo profile image
Offirmo

Thanks, just what I needed.

Collapse
 
mix3d profile image
Madison Dickson

Keep in mind that the chrome.webstore check will be depreciated in about a month's time: blog.chromium.org/2018/06/improvin...

Collapse
 
mahmoudelmahdi profile image
Mahmoud Elmahdi

UPD. Thank you!

Collapse
 
thejosemiller profile image
Joseph Miller

Hello Mahmoud :) Any update? regarding detecting chrome agent?

Collapse
 
kirill_kolombet profile image
kolombet

var isChrome = !!window.chrome;
Probably you want to exclude chrome-based browsers, like opera
var isOpera = window["opr"] && !!window["opr"].addons;
var isChrome = !!window.chrome && !isOpera;