Visual Hashing
Features
Visual hashing modifies the password input widgets on every page across the web by causing the background of the input to change as the user types to a four color image hash. This hash is calculated from the unsalted SHA1 hash of what has been typed, and is the same (for a given password) across different sites and even browsers. This consistency will help the user realize if they have entered their password correctly without displaying their password on the screen.
The visual hash background disappears after the password widget loses focus.
Screenshot
Implementation
Visual hashing is implemented by including a single JS file[1] into every webpage's runtime environment. This script looks for every input in the page's DOM, selects the ones that are password inputs, and then attaches event handlers to onkeydown, onfocus, and onblur.
When the user types inside the input widget (fires onkeydown events), an offscreen <canvas> element is created, on which the visual hash is drawn. The widget's CSS background is set to the canvas' dataURL, until the user types again (in which case the hash is updated) or changes focus from the password input (in which case the widget's original style is restored).