[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.]

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.