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?
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: <!--[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…
- 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.
- We open the conditional comment, like so: <!–[if lt IE 7]>
- Then we import the external style sheet: <style type=”text/css”>@import url(http://www.joelevi.com/securityupdate/bar.css);</style>
- Next we wrap our text in a stylized div: <div id=”advBrowserWarning”>
- 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”>
- 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…
- Then we close our anchor tag and our div: </a></div>
- Finally, we close our conditional statement: <![endif]–>
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.”
I never imagined this would be such a popular topic. Several questions have been asked and suggestions made.
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:
- Add a new text widget to your blog’s appearance (or edit an already existing one),
- inside that past the single line of code mentioned above,
- add that widget to your site and save the changes,
- 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.
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:
Join the campaign: http://ie6.forteller.net/index.php?title=Main_Page#English
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.
Great, great, great…
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?
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.
It is now on my site, great idea!
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.
You should turn this into a plugin for WordPress. A lot of non-technical WordPress users would greatly benefit.
Thanks a lot! This is great.
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.
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.
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!
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>
is there a way to use this on blogger sites
Here's a related article: http://mashable.com/2009/08/04/ie6-no-more/
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
Excellent! Many thanks for this. Please KILL ie6 before it kills us (web developers :D)
Excellent! Many thanks for this. Please KILL ie6 before it kills us (web developers :D)