1-by-1 black pixel for creating lines
1-by-1 black pixel for creating lines
EricGiguere.com > Articles > How to Detect Firefox
Printer-friendly version Set your preferences
Read my blogs on AdSense and affiliate marketing
 
 
 
  
Learn about these ads

How to Detect Firefox

An example of serving different content to different browsers
 
By Eric Giguere
November 2, 2004
Updated November 9, 2004
 
NOTE: In response to feedback, I've re-written this article as How to Detect Internet Explorer and encourage you to read it instead. I leave this here for posterity. Or for a couple of weeks, whichever comes first....

Whether or not you've formally joined the Spread Firefox campaign, a dynamically generated site like this one can easily check to see what kind of browser is requesting its pages and tailor its content appropriately. Look at the image immediately following this paragraph. If you're using Firefox right now, you'll see a button for joining the Firefox campaign, otherwise you'll see a button for getting the Firefox browser.

Get Firefox! You don't seem to be using Firefox!

The rest of this article shows you how this is done for JSP pages. (The techniques are similar for other kinds of server-side scripting languages like ASP.)

Detecting the browser type

The code is very simple. All you do is check the User-Agent header that most browsers send along with each request. The header usually describes the specific type and version of the browser. I say usually because advanced browsers like Firefox can change or even suppress their User-Agent header, as described in my article Masquerading Your Browser. For example, a Firefox or Opera user may choose to emulate an Internet Explorer (IE) browser in order to access certain sites that claim to "only" support IE.

Here's what you do. Somewhere at the top of your JSP file add the following code:

<%
String userAgent = request.getHeader( "User-Agent" );
boolean isFirefox = ( userAgent != null && userAgent.indexOf( "Firefox/" ) != -1 );
response.setHeader( "Vary", "User-Agent" );
%>

This is straight Java code, I'm keeping it really simple so you don't need to use JSTL or any other tag library. (Note that you can do this with JSTL tags as well for a cleaner approach — in general I try to avoid inserting Java code directly into a JSP page.)

In case you're curious, this is the User-Agent header your browser is sending:

claudebot

The value of isFirefox is therefore false.

Selecting the Right Content

To display content on your page that is only visible to Firefox users, simply wrap the content with an if statement:

<% if( isFirefox ){ %>
<p>This is only visible to Firefox users.</p>
<% } %>

If you want to show content to non-Firefox users, just negate the condition:

<% if( !isFirefox ){ %>
<p>This is NOT visible to Firefox users.</p>
<% } %>

And yes, you can do a standard if/else sequence if you're careful with your braces:

<% if( isFirefox ){ %>
<p>This is only visible to Firefox users.</p>
<% } else { %>
<p>This is NOT visible to Firefox users.</p>
<% } %>

That's it!

How It Works

What you've just done is define a Java variable called isFirefox that is going to be true if the user agent header contains the string "Firefox/" and false otherwise. (Note the check for a non-null header — remember that the User-Agent header may be missing entirely.) You then surround the HTML you want to send with a standard Java if statement.

You can do this at the server with any scripting language, you just need to lookup the right syntax for accessing the User-Agent header. You can even do this at the client with JavaScript, but that won't work if the user has disabled JavaScript execution, so it's better to do it at the server.

Note that in our response we also need to set the Vary response header to User-Agent to indicate that the page content varies depending on which user agent (browser) is being used. See the HTTP specification for the Vary response header for the details. (Thanks to Jim Dabell for pointing this out.)

For more information, please check out these related pages on my site:

Don't forget to check out the rest of my site, especially my Vioxx recall reduces spam parody and my Google AdSense tips (including info about my upcoming book!).

Google Web www.ericgiguere.com   
1-by-1 black pixel for creating lines
 
Copyright ©2003-2012 Eric Giguere | Send mail about this page | About this site | Privacy policy
Site design and programming by Eric Giguere | Hosting by KGB Internet Solutions
This site is Java-powered
Other sites: The Unofficial AdSense Blog | Google Suggest Explorer | Invisible Fence Guide | Synclastic
This page was last modified on Last modified on November 9, 2004
1-by-1 black pixel for creating lines
1-by-1 black pixel for creating lines