Back to menu

Visual Password Feedback for jQuery

If you can see this, the examples aren't going to work properly for you because your browser does not support the HTML5 canvas element! Try using Firefox or Chrome


This plugin aims to give the user a vague idea that what they've typed into a password box is correct, by giving them visual feedback, without compromising security. I didn't come up with this idea; it was discussed somewhere else, I just implemented it out of curiosity.

It computes a SHA-1 sum of the user's password and uses this to generate an image. The user should be able to recognise the image and from it be able to tell whether or not their password is correct before they submit it, whereas an attacker should not have any reasonable way to determine a the password from the image. If you're struggling to see the point: like most jQuery plugins, it exists partly because it looks good and partly because it satisfied my interest. Unlike most jQuery plugins, it shouldn't get in the way of the normal browsing model.

Technical Details

The image is calculated directly from the SHA-1 hash. We treat the hash's output in hexadecimal encoding, which gives us 40 hex digits. The first and last 6 digits are used to define a linear colour gradient. The remaining 28 digits are evaluated individually and used to create a y-value between 0 and 16. The x-value is given by the index in the hash string. These coordinates are plotted and joined by lines and the area under the lines is filled. If you are interested, see the source code; it's not very complicated.


The image is implemented with a HTML5 canvas element. The 'graceful' degradation on old fashioned browsers is to use coloured elements instead. This is fairly ugly and you might think it's better to disable the fallback and just have nothing displayed for non HTML5 browsers, this can be passed as an option.


In theory, the difficulty of solving this (i.e. determining a password from an image) is equivalent to reversing a SHA-1 checksum, i.e. very difficult. In reality there are several considerations which affect this:
  1. SHA-1 attacks are worryingly effective or laughably terrible, depending on how you look at it. When they are effective, they always rely on programmatic automation. Here we are at an advantage. Now, maybe an attacker does have programmatic access to the raw data, but that's alright because that means they can read your password directly without having to worry about analysing the image, therefore I don't have to worry about it either.
  2. The image is 1 to 1 with a SHA-1 checksum, but to determine the checksum without programmatic help (see point 1) would require the attacker to visually see the image and then estimate its exact properties. These consist of 28 4-bit integers (the coordinates plotted) and 2 24-bit integers (the colours used), and if he gets any of those wrong, even only slightly, he has no way to home in on the correct hash, let alone then attack the password. Even worse, he wouldn't be able to tell he was wrong!
  3. Even if the attacker can reconstruct the image perfectly, he still has to reverse the hash. This is supposedly non-trivial, but the password may be present in existing lookup tables. Password stores usually use a technique called salting to subvert lookup tables, but this isn't useful here as the salt would be difficult to persist across sessions, so the hash and therefore image would change quite frequently, which somewhat undermines its point.
  4. For the reason given in the previous point, this should not be used in a high security setting. Most websites, however, do not fit such a description.
The keener minded reader will have worked out by now that there's a risk that a shoulder-surfing attacker could in fact effectively use the transition of the image to determine a 'path' through a password, by the cunning observation that the number of outputs when you've only typed one letter is severely limited, and this known first letter could then be used as the initial state in a Markov chain, perhaps to great effect. This seems unlikely to be effective in the general case, especially considering the physical impracticalities of observing the transitions in enough detail while, presumably, trying not to allow the typist to know you're interested (and if you've set up a camera, why didn't you just point it at the keyboard?). However, it is accepted as a reasonable concern and therefore the visual feedback does not appear by default until 5 characters are entered.

In short, if the password is a very common word and the attacker is extremely determined, they may well be able to guess it from the image (although in this case, they'd probably find a conventional wordlist based attack a lot less effort). If the password is 'secure', however, it should be next to impossible, but not as impossible as simply not echoing a clue.


Usage is simple:


See the source code for which objects can be passed.


Download the: full source or minified source


Simple Usage

Default call, no options set. Note that you will have to type at least 5 characters before the image will appear (this is a security feature)

Here we've overridden some options. The image is bigger and does not enforce a minimum length before it appears. We've also made it a bit wider.

Different Layout Options

It looks better a little bigger.

We can also move the canvas to a different element. We've also made it taller, just for fun.

Your password looks like this:

This one disables the legacy option, which means that Internet Explorer users should no longer see the hideously ugly coloured block elements and instead see... nothing (of course as a savvy Chrome/Firefox user, you're seeing the beautiful canvas and have no idea what I'm talking about).