Make Firefox flag secure web pages as green

I love Firefox, but it's far from perfect. As someone interested in Defensive Computing one of the biggest drawbacks to version three is that the address bar does not change color when viewing a secure web page (HTTPS as opposed to HTTP). Version 2 used to change to yellow, but version 3 doesn't change colors at all.  

Reports from the Black Hat security conference about new software that attacks secure web pages make this all the more important.

The new software, called "SSLstrip" by its developer Moxie Marlinspike, does a man-in-the-middle attack. It can go so far as to forge secure web pages. However, in a demonstration of the software, the developer didn't even bother with that, he simply changed secure HTTPS pages into insecure HTTP pages and many users didn't notice.

Non-techies can't be expected to train themselves to look for HTTPS rather than HTTP in the browser address bar. And while a lock icon is also used to indicate a secure page, the location of the lock varies with different browsers and the lock icon can be forged.

Web browsers need to indicate secure pages in a more intuitive way and do it where the user is already paying attention, the address bar. To that end, we can force Firefox 3 to show all HTTPS based pages with a green address bar.

Doing so, in Windows versions of Firefox, requires a file called userChrome.css that contains the two lines of code below.

The hard part is putting the file in the right place.

In Windows XP and 2000 go to:

C:\Documents and Settings\[User Name]\Application Data\
Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\

In Windows Vista go to:

C:\Users\<[User Name]>\AppData\Roaming\
Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome

The Xs represent randomly generated characters. You may have first configure Windows to show hidden and/or system files.

Portable Firefox users should go to

X:\somefolder\Data\profile\chrome

Where X:\somefolder is the folder where the portable version of Firefox resides.

A sample userChrome.css file is provided at the bottom of this blog posting. Download this file to the correct folder, rename it (remove the .txt at the end) and you're done.

Alternatively, there may be a file in the target folder called userChrome-example.css that can be used as a model. Either rename it userChrome.css or, better yet, make a copy of it and rename the copy to userChrome.css. Then edit this new userChrome.css file with a text editor and add the two lines above.

This is the same green (#D0F2C4) that Internet Explorer 7 uses. However, IE7 frequently does not turn green on secure pages (I don't know the exact rules for this and as a devoted Firefox user, I don't care) whereas this zap makes the Firefox address bar green on all secure pages.

I'm going to try this is in a couple Linux distributions and will report back. If any Mac users read this, please leave a comment as to how well it works under OS X and what the target folder is.