Mattt Thompson recently released this really cool jQuery script called Chroma-Hash, which visualizes a user's password as they type it as a series of colored bars. The idea is that this will allow a user to see when their password is wrong, rather than simply submitting the form, and hoping for the best.

In light of recent discussions on the internet, which Bruce Schneier covers very well on his blog. Keeping track of passwords is hard, and typing in strong password, and knowing you've done it correctly, is difficult when masking in enabled. But, there are good security reasons.

Read Schneier's posts, and the source material. The basics of the issue is that, if password masking does nothing else, it reminds the user that, "Hey! This is secure information!!!" But, also, typing is passwords is hard, and it's really frustrating when you get it wrong. Chroma-Hash is an interesting experiment at solving this problem, by keeping the password hidden, while still providing visual feedback about what it is.

Mattt posted an example on his github page, and shared the source, but his blog post above talks the most about the current implementations limitations. That it uses MD5 (known to be weak to certain classes of crypto-attacks), and theoretically, someone watching someone put in their password could try to reverse engineer a password based on the characters that are being entered. These attacks are, in my opinion, extremely unlikely, but it is something to keep in mind.

Thompson mentions some potential improvements to the method, such as using SHA-1 instead of MD5 (given that the MD5 code is about 7k of the 9k of JavaScript, I don't think it's worth it, at least not without being able to include the hashing algorithm externally), or salting the input, or a few other things. My plan, as it stands, is to keep pace with Mattt's repository, so that the YUI3 version will be functionally identical to the jQuery version.

The YUI3 version is up on github now, and I put up a YUI3 example page as well.

As an aside, while my YUI3 implementation is a tiny bit tighter than Mattt's jQuery one, the difference in library size is really impressive. It looks like YUI3's loader is able to load about 25k less worth of library script than jQuery. I've really got to commend the YUI team on how well they've been able to keep file weight down, as well how great the loader does at loading no more than is strictly needed.