Practicing Safe Code

Forward

One of toughest problems webmasters face is writing code that uses the
best features of our visitors’ browsers, while not knowing beforehand
what software they are running. You can write branching code or
redirects, but there are no easy server-side methods to tell if a user
has turned off scripting in his browser. Have you looked at a page
that uses positioning with an older browser? Not a pretty sight….

From a code writer’s point of view, a user getting an error on their
page is the worst thing that can happen. Designers feel the same way
when their carefully positioned elements are presented to a visitor in
source code order, rather than the way they intended. It doesn’t really
matter if 99% of all users have no problems. That last one percent is
what keeps us up at night, wearing the letters off our keyboards.

There are some basics of defensive coding that make some of this a
little less work.

Part 1: Always Work from the Simple to the Complex

Rather than using a script to try to identify and redirect a visitor who
does not have the correct platform or browser to particular pages or
scripts, use your script to add more sophisticated features. Imagine the
visitor to your page has no script engine at all.

Start with a set of basic pages that can be viewed in the most
technically challenged browsers. Your page headers can redirect the
advanced browsers after reading the properties of their navigator
object. The fancy code can be in pages that can’t be clicked to
directly, but instead are served up from scripted functions that only
send the visitor on if he’s got the right stuff.

You can set up some of your links like this:

<a href="simple.htm" onclick="redirect()">Some Link</a>

A browser with no event handling ability will simply link to the URL
without even trying the redirect function. A browser a bit more clever
will run the function, which can be something like this:

function redirect(){
   if(parseInt(navigator.appVersion)<4)return false;
   else location="theGoodStuff.htm"; return true;
}

The return false allows the default link behavior to return older
browsers to the simple link, though if you want, you can have separate
pages for any number of versions and browsers.

Just return the new links as true, as this function does for the version
4 and above browsers, to void the link’s default behavior.

Part 2: Use the <NOSCRIPT> Element

Say you have a nicely defined set of pages for scriptless browsers. It’s
all carefully set up to avoid any links to the killer code you have for
advanced visitors. There is still a pitfall that will give you a
serious pain before you are through. It’s called hypertext.

There is nothing to stop anyone from simply typing an address in their
browser and crashing the party you have set up. Or clicking on a link
someone e-mailed them, or coming in from a search engine. It’s the
nature of the Web. Also, a script in the head of every page that tries
to weed out the unschooled won’t work very well if they aren’t running
with the same script engine. Most likely they’ll see a big mess with
your name on it.

It won’t do to ignore them – not if you want them to come back when
their browsers grow up, or to stay for a while in the shallow end of
your pool with the pages that play nicely with everyone.

The <noscript> element works by not being understood. Although it is
intended to work in modern browsers by identifying an installed script
engine version, the text and html between the opening and closing tags
will show up in an older browser. I have a stock <noscript> sequence I
put right after the body tag on any page that uses scripting:

<noscript>
<h1>I'm Sorry!  If you have no script engine, or have scripting turned
off, you can't use this page's advanced features! </h1>
<h2>
<a href="../shared/helpme.html">Click here for help</a></h2> <h2>
<a href="..default.htm">Click here to go someplace more fun </a></h2>
<p><img src="../art/100x1K.gif" width="100" height="1000"> </p>
</noscript>

A user with no scripting engine, or scripting turned off, will see these
links at the top of the page. I put in a 1K pixel tall transparent gif
to push the rest of the page’s content a thousand pixels down – out of
sight for most. Users with scripting enabled will see the page as
intended.

Some scripted browsers don’t recognize <noscript> and
show the content between the tags as if they had no scripting. I just
let it go. Old browsers such as Netscape Navigator 2 are best left to the history of the Internet, as they will only render the most basic of pages correctly.