Unmask your passwords with this JavaScript trick

In Masking passwords: Why it's not a good idea, Michael Kassner discussed what Dr. Jakob Nielsen had to say about it from a usability perspective.

I get Nielsen's newsletters, and the man knows more about usability testing than any two other people I've encountered put together. Considering that in many ways interface design is security design, applying the principles Dr. Nielsen discusses to making the secure way to use a piece of software the easy way could be a great boon to many software developers.

In June this year, however, Dr. Nielsen published an article in his Alertbox newsletter titled Stop Password Masking. The summary at the top of the article reads:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures.

I was (predictably) concerned with how people would take the advice he offered. The truth of the matter is that masking passwords is an essential security feature in many circumstances, such as any time I use my laptop to log into a Web site at a coffee shop where random strangers might shoulder-surf to see my passwords, or any time I do so where there may be cameras overhead that can record what appears on the screen, such as an airport waiting area or library.

Even sitting in your cubicle at work, where you might type passwords more times per day than you do anywhere else in the course of a week, can be an important place for password masking.

On the other hand, there are times it can be nice to see your password, and where you can be reasonably certain nobody else is going to see it on your screen. For those times, it would be nice to have a way to unmask a password.

A snippet of JavaScript is here to save the day:

  var els = document.getElementsByTagName('input');
  for(var x = 0; x < els.length; x++) {
    if(els[x].type.toLowerCase() == 'password' ) {
      var test = els[x].type = 'text';
    }
  }

If you put javascript: at the beginning of that, and delete all the newlines so that it becomes a one-liner, you can delete the text in your browser's address bar and paste the JavaScript snippet in the address bar instead, then hit the Enter key. This will cause masked passwords to be revealed.

If you expect to need to use this often, you can create a bookmark button in your Firefox Bookmarks Toolbar easily enough. Start by creating a new bookmark--any bookmark will do, though you may want to choose one for a page without a favicon. Then:

1. Right-click on the new bookmark button and select Properties. The title bar for the bookmark's Properties dialog will still show the name of the bookmark's original Webpage while you make edits, but don't worry about that.
2. Change the text in the Name field to Unmask (or whatever else you want it to say).
3. Change the text in the Location field the same way you would for the browser address bar, as described above.
4. Clear the Keyword and Description fields, and fill them with whatever you like (or nothing at all).
5. Click the Save Changes button.

Voila. Any time you want to see the password text you type into a masked password field, now, you can just click the Unmask bookmark button in your Bookmark Toolbar.

In Firefox, you can also just drag and drop this link to your Bookmark Toolbar to get the same effect, if you like:

Unmask

You are, unfortunately, on your own for figuring out how to do any of this in other browsers.

Finally, if you are a Web developer and you think it is a good idea to give your site's visitors the ability to unmask passwords when they try to log in, you can always create an Unmask Password link using the above JavaScript snippet. I recommend thinking long and hard about that before making the option available, however.

In an article like this, I can make people aware that there is a danger to security that is addressed by masked password fields, thus leaving it up to the user to make an informed decision. Many visitors to your site on the Internet may not be aware of the risks of unmasking passwords, however, and dumping a lot of text on users explaining the dangers so they can make an informed decision can more than counteract any usability gains from making it possible to unmask passwords with a simple mouse click. Whatever you do, just don't force your users to live with unmasked passwords.

As a final warning, keep in mind that when you walk away from your computer with your password on the screen, the fact that it is masked may not stop someone else from getting your password using something like this JavaScript trick. Most software security techniques, no matter how useful in a networked world, are not proof against physical access to the machine.

Chad Perrin is an IT consultant, developer, and freelance professional writer. He holds both Microsoft and CompTIA certifications and is a graduate of two IT industry trade schools.