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.
| 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:
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com) |
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!).
|