A sexy, secure live visualization of password field input
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
CHANGELOG.md
LICENSE
README.md
example.html Removing box-sizing property Jun 25, 2014
jquery.chroma-hash.js
package.json

README.md

Chroma-Hash

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

Demo

Actions speak louder than words. Try it out at: http://mattt.github.com/Chroma-Hash/

Usage

$("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 function
  • minimum : minimum number of characters needed for grayscale bars to be displayed in color

Requirements

  • jQuery 1.3+

Ports, Implementations, and Adaptations

Chroma-Hash is also available in your choice of Javascript libraries and languages:

For the more acoustically-inclined, be sure to check out Sonic-Hash, which is like its older brother, but uses sounds instead of colors.

Credit

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.

Contact

Mattt Thompson

License

Chroma-Hash is available under the MIT license. See the LICENSE file for more info.