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 Comments

Joe · February 24, 2009 at 11:40 am

Join the campaign: http://ie6.forteller.net/index.php?title=Main_Page#English

Jesse · February 25, 2009 at 8:10 am

Brilliant! Happily added to my delicious tag: http://delicious.com/cooke1729/ie6sucks

I kept on saying late last year that 2009 was the year I stopped supporting IE6. Will never do it on a personal project, and I’m trying like hell to get it dropped at work.

dario-g · February 26, 2009 at 5:38 am

Great, great, great…

Joe · February 26, 2009 at 11:48 am

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

Nicholas Shanks · February 26, 2009 at 1:23 pm

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.

Clarence Klopfstein · February 26, 2009 at 6:03 pm

It is now on my site, great idea!

confetti · February 28, 2009 at 12:05 pm

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.

zohner · March 4, 2009 at 4:10 pm

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

pztrick · March 27, 2009 at 12:46 am

Thanks a lot! This is great.

robert · April 7, 2009 at 5:21 am

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.

Dru · April 10, 2009 at 3:12 pm

This all very clever but my understanding is that IE 6 is still a supported browser version with Service Pack 3 (http://support.microsoft.com/gp/lifesupsps/#Inter… . With that in mind IE6 should be fine to use as long as you patch it accordingly. That being the case your warning page is misleading.

joelevi · April 13, 2009 at 5:48 pm

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

Profane · April 14, 2009 at 10:20 pm

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>

Richard Thomas · April 25, 2009 at 10:56 pm

is there a way to use this on blogger sites

Joe Levi · August 4, 2009 at 3:58 pm

Here's a related article: http://mashable.com/2009/08/04/ie6-no-more/

bhovens · August 14, 2009 at 6:58 am

The best solution I've seen so far, thanks! I'll implement this all sites from now in, in particular after yesterday's horror news (well, for developers anyway): http://news.bbc.co.uk/2/hi/technology/8196242.stm

fractalbit · September 8, 2009 at 6:47 am

Excellent! Many thanks for this. Please KILL ie6 before it kills us (web developers :D)

fractalbit · September 8, 2009 at 1:47 pm

Excellent! Many thanks for this. Please KILL ie6 before it kills us (web developers :D)

How to Scare IE Users into Upgrading with only ONE Line of Code? « Web Development Talk · October 8, 2009 at 10:36 am

[…] Check out this post here […]

Leave a Reply