A sexy, secure visualization of password field input
Chroma-Hash is a jQuery plugin that dynamically visualizes secure text-field values using ambient color bars
Password entry can be frustrating, especially with long or difficult passwords. On a webpage, secure fields obscure your input with •'s, so others can't read it. Unfortunately, neither can you—you can't tell if you got your password right until you click "Log In".
Chroma-Hash displays a series of colored bars at the end of field inputs so you can instantly see if your password is right. Chroma-Hash takes an MD5 hash of your input and uses that to compute the colors in the visualization. The resulting color pattern is non-reversible, so no one could know what your password just from the colors.
For a more detailed description of Chroma-Hash, be sure to check out this blog post about it..
Actions speak louder than words. Try it out at: http://mattt.github.com/Chroma-Hash/
$("input:password").chromaHash({bars: 3, salt:"7be82b35cb0199120eea35a4507c9acf", minimum:6});bars: number of bars displayed (1,2,3, or 4)salt: value to be appended when calculating hash functionminimum: minimum number of characters needed for grayscale bars to be displayed in color
- jQuery 1.3+
Chroma-Hash is also available in your choice of Javascript libraries and languages:
- YUI3 - foxxtrot (Jeff Craig)
- Prototype - wki (Wolfgang Kinkeldei)
- pyChroma (Python) - leegao (Lee Gao)
- ChromaHash4j (Java) - efi (Thomas Efer)
For the more acoustically-inclined, be sure to check out Sonic-Hash, which is like its older brother, but uses sounds instead of colors.
Inspired by Arc90 Lab's HashMask, by Chris Dary http://lab.arc90.com/2009/07/hashmask.php
Chroma-Hash uses Paul Johnston's Javascript MD5 implementation, and is distributed under the BSD License See http://pajhome.org.uk/crypt/md5 for more info.
Thanks to Ian Young for his suggestion to represent color components in 4-bits to increase overall security.
Mattt Thompson
Chroma-Hash is available under the MIT license. See the LICENSE file for more info.