[I use a Mac, so all the images in this post are of the Mac user interface. The UI for other platforms will differ slightly. Click on pictures to view other sizes. French translation of this article now available!]
Ensuring that users are safe, secure, and protected while they browse the Web is one of the greatest challenges facing browser makers. Browser security involves a delicate balance between protecting the user from the dangers that exist on the Web and overly restricting the user’s freedom to go where she wants and see what she wants while surfing.
One of my favorite new Firefox 3 security features is the Site Identification button. This button replaces and builds upon the ubiquitous “padlock” icon that has for so long been the primary security indicator used in browsers. Firefox 2, for example, indicates that the connection to a site is encrypted by changing the background color of the location bar and displaying a padlock icon.
There is a major problem with the padlock, however, in that a lot of people believe that it means more than it really does. I certainly thought so until I had a long chat with Johnathan Nightingale (Mozilla’s security UI guru and lead imagineer for this feature) who explained to me that the padlock simply means “encrypted” rather than “safe”. Where the padlock has a very specific meaning related to browser security, I had given it a deeper, broader meaning that it didn’t really deserve.
So, what’s the difference between “encrypted” and “safe”? It turns out that it’s not actually that hard to set up a site that will get your browser to display a padlock. In fact, it’s easy enough that essentially anyone can do it, including bad guys who are just out to steal your credit card info, identity, and whatever else they can get. So the padlock means “encrypted” but doesn’t say anything about the validity of the domain, nor about the identity of the people at the other end of the encrypted connection.
It’s even possible to easily spoof a padlock of sorts, as demonstrated here:
The padlock isn’t in the right place, and it isn’t even quite the right padlock, but many users wouldn’t notice, falling back on the learned-but-not-quite-correct “padlock equals safe” assumption. It’s a very simple and imperfect spoof (they just have a padlock favicon for the website), but it’s enough to confuse and trick some users. Clearly things need to be improved.
How Firefox 3 makes things better
This is where the new Firefox 3 Site Identification Button comes in. Rather than just displaying a little padlock somewhere, Firefox 3 finds out as much as it can about the site you’re browsing and makes that information easily accessible through a single click of a button at the left end of the location bar.
The button can be one of three colors — gray, blue, or green — and displays the new Site Identification dialog when clicked. The dialog includes a matching gray, blue, or green “Passport Officer” icon, and shows a summary of the information available about the site’s identity.
So, instead of having a single indicator that a connection is either encrypted or not (the padlock), Firefox 3 presents you with information that covers a range of different security levels.
Here’s what the various colors mean:
Gray – No identity information
The gray Site Identification button indicates that the site doesn’t provide any identity information at all. Also, the connection between the browser and the server is either unencrypted or only partially encrypted, and should not be considered safe against possible eavesdroppers.
Most of the Web will have the gray button, because most sites don’t involve passing sensitive information back and forth and don’t really need to have verified identities or encrypted connections. So, gray is fine for the majority of sites.
Note: If you’re sending any sort of sensitive information (bank information, credit card data, Social Security Numbers, etc.) the Site Identification button should not be gray.
The gray Site Identity button, along with the fact that the Firefox 3 location bar doesn’t display a padlock in the location bar as a security indicator, makes it obvious that this site is spoofing a padlock and isn’t really encrypted or secure:
Blue – Basic identity information
The blue Site Identification button indicates that the site’s domain has been verified, and the connection between the browser and the server is encrypted and therefore protected against eavesdroppers.
When a domain has been verified, it means that the people who are running the site have bought a certificate proving that they own the domain and it is not being spoofed. For example, my bank’s site has this sort of certificate and an encrypted connection, so it displays a blue Site Identification button. When I click on the Site Identification button, it tells me that the easyweb.tdcanadatrust.com site is verified to be part of tdcanadatrust.com, as certified by RSA Data Security Inc. It also assures me that the connection is encrypted so no one can eavesdrop on the connection and steal my bank login information that way.
What’s not verfied in this situation is who actually owns the domain in question. There is no guarantee that tdcanadatrust.com is actually owned by the Toronto Dominion Bank. All that is being guaranteed here is that the domain is a valid domain, and my connection to it is encrypted.
If I’m still leery about a site’s identity when it is displaying a blue Site Identification button, I can see more information about the site by clicking the “More information…” button on the Site Identification dialog. Here I can view the site’s identity certificate, whether I’ve visited the site before, and if I have any cookies or passwords stored for the site.
This is the “Privacy and History” section of the security information displayed by the “More information…” button. Firefox 3 is here telling me that I’ve visited the site 94 times since I last cleared my browser history, that my browser is storing at least one cookie for the site, and that I have no saved passwords for the site. All of this information fits with my expectations, so I’m confident that this site is the site I think it is, and can now go about my banking more or less worry-free.
Green – Complete identity information
The green Site Identification button indicates that the site provides fully verified identity information about its owner, and that the connection is encrypted.
If a site has a green Site Identification button it means that it is using a new “Extended Validation certificate” (EV). You can read all about EV certificates at the link above, but to make a long story a little shorter, EV certificates are a special type of site validation certificate that requires a significantly more rigorous identity verification process than other types of certificate. So, while the blue Site Identification button indicates that a site’s domain is not being spoofed but does not have any verified information about who actually owns the domain, the green Site Identification button indicates that the domain is valid and that the owners of the domain are who you would expect them to be.
With the EV certificate, the Site Identification button assures you that paypal.com is owned by Paypal Inc., for example. Not only does the Site Identification button go green on the Paypal site, it also expands and displays the name of the owner in the button itself. The Site Identification dialog presents further detailed information.
To contrast, here’s what Firefox 2 does when it is on the paypal.com site:
If I click on the padlock, it brings up this Page Info:
Compared to the Firefox 3 Site Identification information, the Firefox 2 padlock and Page Info dialog aren’t exactly enlightening.
But wait, there’s more!
In other situations the Passport Officer icon appears in two other colors, but not as part of the Site Identification button.
Yellow – Invalid identity certificate
One thing you may encounter while surfing with Firefox 3 is a page that has a yellow Passport Officer icon. While the Site Identification button doesn’t have a “yellow” state, the Passport Officer icon will appear when there is some sort of problem with a site’s identity certificate.
The page above is actually generated by Firefox 3 itself, and its purpose is to block you from going to a site that has an invalid identity certificate. Just like driver’s licenses and passports, site identifications need to be renewed or they expire. And just like only you can use your passport, each web site should present the credentials belonging to that site.
In the case pictured above, the problem being warned about is that the site has a “self signed” identity certificate. On the Web, self signed certificates are like passports you made at home — they don’t mean anything, no one’s verified them, and while maybe the information on them is real, Firefox wants you to know that the passport has not been validated.
There are many perfectly valid sites that use self signed certificates simply so they can support encrypted connections to the server, and are not doing anything untoward or nefarious at all. This is why Firefox 3 allows you to add exceptions for sites who have self signed certificates that you know are not trying to trick you. Adding an exception is a simple process that only needs to be done once for each site encountered.
At the bottom of the “Secure Connection Failed” page that is blocking access to the site (shown above), there is a link that reads, “Or you can add an exception…”. Click this, and it shows the following to verify that this is what you really want to do:
Click the “Add Exception…” button there, and you’ll see this dialog, where you complete the process:
If you want to add the exception temporarily, make sure the “Permanently store this exception” checkbox at the bottom of the dialog is unchecked. Then click “Confirm Security Exception”, and Firefox 3 will no longer block you from visiting the page.
The yellow Passport Officer icon will appear in other situations as well, all related to there being a problem with the site’s identity certificate. The warning page will clearly explain what’s wrong and what you should do about it.
Red – Reported attack site
There is also a stern red Passport Officer icon who carries a little stop sign rather than a passport. This is part of Firefox 3’s Malware and Phishing protection system that protects users against reported attack sites, but I’ll talk about that stuff in a later blog post. For now, be assured that if you encounter the red Passport Officer, he’s protecting you from potential attacks and is only here to help.
The Firefox 3 system — with its Site Identification button, Site Identification dialog, much friendlier security-related Page Information, and invalid certificate warning pages — is vastly superior to older systems that relied so heavily on the padlock. Not only have the security indicators been expanded and improved, it’s also now much easier to understand the levels of security being encountered while surfing the Web. No system is perfect, of course, but Firefox 3 makes some extremely important and valuable strides towards improving user safety and security on the Web.