Browser sniffing

Question

I know browsersniffing is not the correct way to design a site for multiple browsers. My question however is not related to designing a site which behaves well for each browser.

I want to offer the user the ability to install the site as a webapp if the browser is Google Chrome or Firefox 4+, as a widget if it's Opera, as an extension if it's Safari... and so on

Basically I want to slide in a div with a button offering this kind of install. There is no use showing the webapp solution if the browser is for example Safari as Safari has no support for it.

So how do I do this in a good way?

I found this based on features rather than useragent

Safe feature-based way for detecting Google Chrome with Javascript?

var is = {
  ff: window.globalStorage,
  ie: document.all && !window.opera,
  ie6: !window.XMLHttpRequest,
  ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera,
  ie8: document.documentMode==8,
  opera: Boolean(window.opera),
  chrome: Boolean(window.chrome),
  safari: window.getComputedStyle && !window.globalStorage && !window.opera
}

It seems to work for my needs and is short and not bulky and more or less spoof safe

Why do you want to be spoof-safe? Have you really thought about it? Why do people spoof? I've never needed to, but if somebody wants to download your Opera widget in Firefox, let them, they might have a legitimate reason. I don't think spoofers will complain if something doesn't work that's actually their own doing. — Lee Kowalkowski, May 26 '11 at 07:27
There are several errors in that piece of code. Could you be more explicit? Which browser versions would you like to target? — Knu, May 27 '11 at 23:09
Opera, Safari, Firefox, Chrome (the latest versions for all) — Stofke, May 31 '11 at 19:07

score 3 · Accepted Answer · answered May 26 '11 at 06:34

Take a look at jQuery.browser: http://api.jquery.com/jQuery.browser/

The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.

Available flags are:

webkit (as of jQuery 1.4) safari (deprecated) opera msie mozilla This property is available immediately. It is therefore safe to use it to determine whether or not to call $(document).ready(). The $.browser property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery.

Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The $.support property is available for detection of support for particular features rather than relying on $.browser.

Nice since I already use Jquery but it's vunerable to spoofing — Stofke, May 26 '11 at 07:12

score 1 · Answer 2 · answered May 26 '11 at 06:35

1

Don't worry about what is considered proper. Do what works; in this case perhaps browser sniffing is the best or only good option.

answered May 26 '11 at 06:35

jcomeau_ictx

37,688
6
92
107

That's what I meant with good ;-) Something that works and is futureproof. – Stofke May 26 '11 at 07:11
you are right, some features might get supported by other browsers making the feature based solution unreliable too. But it's the best I can come up with for now – Stofke May 26 '11 at 07:15

score 0 · Answer 3 · answered Jun 18 '13 at 05:35

You can try: BrowserHawk, (http://www.cyscape.com/showbrow.asp) Which does the browser checking on the server side. This will theoritically reduce the processing on browser side when determining what to show the end users. However, I dont think this is free. Their featured customers include Yahoo, AOL, Cisco, Microsoft and Sun. So this is for production use only with large expectancies of end users visiting the site.

Lee Kowalkowski · Answer 4 · 2013-03-06T13:23:18.403

0

I never understood the problem with just using properties out of the navigator object:

<script>
    for(var item in navigator)
    {
        document.write('navigator.' + item + ': ' + navigator[item] + '<br>');
    }
</script>

They say that the navigator.userAgent is unreliable, but do your research, it can be combined with navigator.appName and navigator.vendor with high reliability I reckon.

UPDATE: March 2013

You have to test directly for the thing that you want to know, if you try to infer it, you're doing it wrong.

For example. If you want to use a feature, test for it directly, don't assume that if document.all then you can use document.uniqueID. Test for document.uniqueID directly.

Everyone knows that using navigator.userAgent to determine if window.localStorage can be used is insane, but they don't realise that ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera is also doing the same thing in the opposite direction.

If you actually want to know what the user agent is, then all you can go off is the navigator object, unfortunately.

User agent string spoofing is not a problem, not yours anyway.

edited Mar 06 '13 at 13:23

answered May 26 '11 at 07:03

Lee Kowalkowski

11,591
3
40
46

Well that can be spoofed which is part of why it's unreliable – Stofke May 26 '11 at 07:10
@Stofke: *Everything* can be tampered with. You just need a decent hex editor and away you go. All your detection mechanisms can be broken. My advice is to not worry about the minority in this instance. – Lee Kowalkowski May 26 '11 at 07:14
The methods currently stated in the question itself, are they tamparable? I mean, they don't depend on user-agent or something, they depend on in-built features specific browsers support. How can they be tampered with? – SexyBeast Mar 04 '13 at 22:18
@Cupidvogel: OK, let's ignore the fact that browser built-in feature support is subject to change. Let's take `window.globalStorage` as an example. It would be possible to write a browser extension to define that for all pages in any browser, so if `window.globalStorage` is defined, that doesn't necessarily guarantee that the browser is Firefox. – Lee Kowalkowski Mar 06 '13 at 09:09
What? The user can add JS extensions to all pages for his browser? That is scary! – SexyBeast Mar 06 '13 at 10:11

Browser sniffing

4 Answers4

Linked