How to Scare IE Users into Upgrading with only ONE Line of Code

· Articles

UPDATED: WordPress instructions, new files, answers to questions, etc. addressed at the end of the article.
We all know about the security risks of running old versions of web browsers — old versions of Internet Explorer in particular.

These older browsers are a swiss-cheese of security holes, allowing black-hats out there to take over computers, construct bot-nets, and even steal their victim’s identity, most of the time without their knowledge.

We can tell them they need to upgrade until we’re blue in the face, but how can we “convince” them to actually do it? Let’s face it, if they haven’t upgraded already, the usual tactics haven’t work and chances are they won’t work regardless of how much we “gently ask” them to upgrade.

Maybe we can use some “black hat tactics” to scare them into upgrading! It sounds worse that it really is, and no hacking/exploiting is involved.

Where do we begin?

First we need to sort out the IE<7 users when they hit our web pages, this could be done with a server-side script (PHP, ASP.NET, etc.) or with a client-side script (javascript or vb script), but, lucky for us, Microsoft provided us a much easier way with their IE proprietary conditional statements. With two modified “comment tags” we can comment out the code from all non-IE browsers, and we apply the contents of the “comment” to IE less than 7 (unfortunately these comments only work with IE5.x and up, but that should catch the bulk of the offenders).

Next we need to cook up a commonly seen bit of user interface that LOOKS like a legitimate browser message, but one that we can put our own message into, something like this:

The user (hopefully) will click on the bar (we didn’t give them an “X” to click on to get rid of our fake bar, so the only way to get rid of it is to actually upgrade their browser). Once they click the bar they’re take to another page. This page, too, needs to look official, but sound scary. Here’s what mine looks like (which you’re welcome to link to):

Can I see an example?

Sure thing! But to do so I’ve turned off the MSIE checking, so everyone can see it, regardless of browser make, model, or version. Here you go!

How do we do it?

Okay, so there are really more lines of code “behind the scenes,” but with one line of code in your HTML, you can implement the bar, styled and all. Here is that line:

   1:
Let’s break that down…
  1. Find a common control or Server Side Include (I’m using footer.php) to render the code on every page, way down at the bottom, then start plugging in the code.

  2. We open the conditional comment, like so:

  3. Then we import the external style sheet:

  4. Next we wrap our text in a stylized div:

  5. And we need an anchor tag (again, stylized; this time to look like the MSIE “Warning bar”), with an href to our “action page”:

  6. Followed by our “made to scare them” text: WARNING!!! Your version of Internet Explorer has known security issues! To protect your computer please correct this now. Click here for options…

  7. Then we close our anchor tag and our div:

  • Finally, we close our conditional statement:

    • Be Nice

    Just like anything in life, this could be used for evil purposes. Don’t to that.

    If you decide to use this on your pages, please comment below with your address. If you have some “stronger and more scary” sounding words to use on the “scary page” I’m game for adding some extra “motivation.”

    Enjoy!

    Updates:

    I never imagined this would be such a popular topic. Several questions have been asked and suggestions made.

    WordPress

    I've been asked to make a WordPress plugin out of this technique so people with WordPress blogs can add this functionality quickly. Rather than making (and supporting) a plugin here's a simpler and faster way to do it:

    1. Add a new text widget to your blog's appearance (or edit an already existing one),

    2. inside that past the single line of code mentioned above,

    3. add that widget to your site and save the changes,

    4. you're done! Since the single line of code uses absolute positioning it doesn't matter where in the the code appears.

    Of course this doesn't apply just to WordPress, you can drop this single line of code into any blogging/CMS engine, the steps may vary but the result will be the same.

    Cleaned up the code

    Nicholas Shanks and others have pointed out some broken html on the "security alert" page. I've gone back in and updated all that, so it should look and function properly now.

    Is it really necessary?

    Dru makes the case that a user running MSIE6 with the latest security patches should be safe from known exploits and that the "security alert" page may be misleading. That's very true. Unfortunately I don't think that there is a way to check MSIE major and minor builds using this technique. If there is we could re-write the rules on the alert page to exclude the "insecure" verbiage if the visitor is at or above MSIE 6.something.something (where the "somethings" would be a build number that we'd need to identify). If you know what build numbers those are, and know that this technique will work with build numbers in addition to version numbers, please let me know and we can discuss modifying the alert page accordingly.

    The fact that MSIE 6 is still such a poor beast at rendering CSS standard web pages still remains, and the recommendation for replacing it with Firefox, Safari, Opera, Chrome, or even MSIE 8 is still the recommended solution.

    Downloadable?

    First off, you've always been free to use my code exactly as it exists and let my server take the traffic hit. I'm cool with that (in this instance).

    Robert and Nicholas Shanks both requested a .zip file to download the whole package presumably to host it on their own web server.

    Here ya go:

    ← All articles