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

...
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:

image

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):

image

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:  <!--[if lt IE 7]><style type="text/css">@import url(http://www.joelevi.com/securityupdate/bar.css);</style><div id="advBrowserWarning"><a href="http://www.joelevi.com/securityupdate/securityAlert.html"><b>WARNING!!!</b> Your version of Internet Explorer has known security issues! To protect your computer please correct this now. Click here for options...</a></div><![endif]-->
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: <!–[if lt IE 7]>
  3. Then we import the external style sheet: <style type=”text/css”>@import url(http://www.joelevi.com/securityupdate/bar.css);</style>
  4. Next we wrap our text in a stylized div: <div id=”advBrowserWarning”>
  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”: <a href=”http://www.joelevi.com/securityupdate/securityAlert.html”>
  6. Followed by our “made to scare them” text: <b>WARNING!!!</b> 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: </a></div>
  8. Finally, we close our conditional statement: <![endif]–>
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 <body> 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:

33 thoughts on “How to Scare IE Users into Upgrading with only ONE Line of Code

  1. Hey guys,

    I’ve revised the “error page” (http://www.joelevi.com/securityupdate/sample.html then click on the bar) to downplay MSIE7 as being an option (even though right now MSIE8 is not out of beta/RC yet, it should be out within a few weeks).

    I’ve also added Chrome, Opera, and Safari.

    Additionally, I removed the “critical” warning unless you’re using MSIE6 or lower (in which case it shows up).

    What do ya think?

    http://www.JoeLevi.com

  2. You have an error on your error page:
    lt!–[if lt IE 7]>critically lt![endif]-–>out-of-date

    The hyphen before “out” should be a hyphen minus.
    (I’ve replaced the less than signs with “lt” to prevent the code from getting removed)

    Secondly, could you provide all the resources in a zip file for people wishing to host it themselves. I have had to dig through your HTML getting all the inline images and CSS files, then go through the CSS files getting all the background images.

    Also, your reference to background_gradient_red.jpg seems broken. The file isn’t next to the css that references it.

  3. I love it! That is just great, great, great
    Why did not we do this years ago?
    I remember people telling me they do not care that I cannot view their page because I was using a mac…
    get rid of apps that do not follow the standards of code.

  4. You should turn this into a plugin for WordPress. A lot of non-technical WordPress users would greatly benefit.

  5. Very cool idea, I second the request to provide a zip file. It wasn't hard to copy your code and set it up on my site. But I can see with the ads why you might not provide the code for users to add to their sites. Thanks for the example regardless.

  6. I've updated the post to include some of the issues that you all have brought up including how to deploy in WordPress, whether or not it's "necessary", a single-file .zip for you to have fun and play with, some clarification over if IE6 with the latest patches is a viable alternative, and some cleanup inside the code itself. All this is detailed at the bottom of the post. Take a look and let me know if I got it all.

    Thank you everybody for your input! Keep it up!

    http://www.JoeLevi.com

  7. for wordpress, my friend helping found putting the line of code in a text widget made it show up just in a box in the corner instead of across the top like regular IE alerts.

    to fix this he put the line of code in the header right after <body>

Leave a Reply