Chroma-Hash: a sexy, non-reversible, live visualization of password field input

http://mattt.github.com/Chroma-Hash/

by bkudria • 17 years ago

83 66 17 years ago

mattt.github.com

dbz2• 17 years ago

I really like that- it would be nice to see that become popular for inputting passwords. It's a nice way to check to see if your confirmed password is the actual password; Furthermore, it might even help one generate more complex passwords because he or she might want a certain set of colors.

calambrac13• 17 years ago

Think on that statement for a moment. If you wanted a particular set of colors for your password, and then you could turn around and actually come up with that password... see the problem? Hint: 'non-reversible'.

This idea, in its current form, sucks. It's not as bad as what you're suggesting, but it comes close - as has been pointed out by many others, if you can watch the colors change with each keystroke, you can pretty much trivially recover the password.

And it's just unnecessary. Password typos are not some huge problem begging for a solution. If you need quick confirmation of matching passwords, just compare the two fields directly, raise a warning icon if they don't match and a checkmark if they do, and be done with it. You'll even save your users a few brain cycles comparing colors.

dbz2• 17 years ago

Second thought- this is an awful idea. I didn't think of it in that way, and it does indeed seem like a security risk. Your password might as well be the three colors.

upinsmoke• 17 years ago

Looks nice, but what about people who are colorblind?

zzzmarcus• 17 years ago

What about them? Things continue to work as normal for the colorblind. This is just a visual aid, not a new method.

calambrac13• 17 years ago

Um, what? The old method is a warning symbol or a checkmark to ensure the password fields match. Replacing that nice, intuitive, more accessible feature with this would be, excuse me, retarded. And it's not just colorblind people who would suffer. Do you really want to spend brain cycles trying to figure out if you're looking at the same shade of blue?

jhdevos• 17 years ago

What an incredibly good idea! It would probably not be too difficult to build this as a firefox plugin, so that all password fields (or all blanked out input fields) on the web will automatically get this feature... Anyone? :-)

Pistos23• 17 years ago

It seems to rely on jQuery, so a Firefox plugin, greasemonkey script, or Opera userjs would need to bundle or src jQuery. Whether or not that is okay I will leave on the table for debate and discussion. :)

mahmud• 17 years ago

if your script doesn't need to be platform-gotcha aware, you can always rewrite it in pure js.

catch23• 17 years ago

you can always use firefox javascript code modules to completely sandbox your javascript code, that way your jquery version won't conflict with whatever happens to be on the page. Highly useful especially if you're modifying String.prototype or Array.prototype.

DTrejo• 17 years ago

Now for some fun Douglas Hofstadter self-reference.

Challenge:

Can someone find a password that describes the colors it makes?

e.g. "redgreenblue" shows red, green, and blue

Pistos23• 17 years ago

Some close ones: "same", "differentgreens".

paulgb3• 17 years ago

"multicoloured" :-)

Not to just be a smart-ass, I tried a few others, but couldn't find any that worked well.

Jeremysr• 17 years ago

startpinkendgreen

Still trying to find one for all three colours. (This is fun! :P)

ubernostrum• 17 years ago

"wildblueyonder" produces a blue bar on the far right.

"wild blue yonder" produces two blue bars on the left.

madcaptenor• 17 years ago

"blueorangepink" works.

I found it by typing in a random password, then using as a password the colors from that password, and repeating until I got the self-referential password. I can't think of a good reason why this should work, though. And you might argue that the third color there is really purple, not pink.

New question: lots of countries have flags which consist of three stripes. Is there a country whose chromahash is its flag?

illicium• 17 years ago

"orangegreen"

paulgb3• 17 years ago

Cool, but still vulnerable to attack by someone who can record video (or with really good memory). Even though the visualization is taken from a relatively small set of three-colour triplets, an attacker who has seen the visualization for every prefix of the password has enough information to figure out the password in linear time.

Pistos23• 17 years ago

If someone is already shoulder surfing, wouldn't it be easier to look at the hands and keyboard than at the colour bars and asterisks?

paulgb3• 17 years ago

I was thinking more of the case where someone thinks "how much information about my password could three patches of colour reveal?" and logs into their account during a recorded presentation.

MaMa• 17 years ago

There could be a little animation or delay before showing the final "hash". Only the colors for the complete password are important.

And if somebody can take video of the screen they could take video of the keyboard too, no?

calambrac13• 17 years ago

Um, what? It's not like you have to be an attacker to want to film someone using a computer screen. You've never seen a Google Tech Talk? You've never been to a conference?

nailer• 17 years ago

I don't see the utility of this compared to simply showing 'passwords are identical / not yet identical' live. Perhaps I'm missing something.

OK, so a user makes a mistake, and they notice their n characters in the first field and their n characters in the second field generate different colors.

How does this help them determine which of the two fields has what they intended to enter?

Also since the user types each field at a separate time, how does the character-by-character hashing help? What utility to the user is there from, having typed 'password' into the first field which shows brown and blue, knowing that typing 'p' in the second field made the second field green?

codyrobbins• 17 years ago

Agreed — I don't understand how this is much help. Furthermore, it was confusing to me until I understood what it was doing, and — when I did — I similarly thought, 'Why isn't it just telling me when the passwords match?'

Your average user is going to be completely perplexed by this and have no idea what it's even for. I would argue that this is far less usable for the average user than the old-fashioned implementation of clicking 'Submit', doing a non-AJAX round-trip, and then displaying a message that the passwords don't match.

Huppie• 17 years ago

The idea behind this program is probably not to show you when your passwords 'match' but to show you whether your password is correct.

E.g. If you see the colors of your password everytime you log in, you will probably learn that your password is correctly typed if you see the colours purple-green-olive.

Whenever you spell your password incorrect (and thus see 'blue-pink-black' for instance) you will notice it immediately, without pressing the 'login' button and being presented with a (not so nice) "Invalid username/password" screen.

jballanc• 17 years ago

I don't think the point is to see the two fields' colors match. Based on the run of similar posts to HN, this appears to be an attempt to solve the "you shouldn't mask password fields" problem. That is, once you've set your password, you'll have a three color combination that is memorable. That way, the next time you go to log in, you would (hopefully) notice if you had typed your password in wrong because the colors wouldn't be the familiar set of three. (i.e. You wouldn't be attempting to edit the password field, just clear it and re-enter.)

extension2• 17 years ago

I presume that the intended purpose of this is to give better feedback for a password challenge. I'm not sure why there is a confirm field in the demo. Perhaps to show that the color is consistent.

It helps in that it lets the user know that the password is wrong the instant they've finished typing it, which might be a nice touch if it takes a long time to verify a password. They still don't know where the mistake is though, so they have to retype the entire password.

calambrac13• 17 years ago

So the big win of this feature is that users might get their color combo burned into their head, and submit fewer bad passwords to the server when they bother to manually enter their password and take the time to look at and process the given colors.

Wow.

Is there a Nobel Prize for web design yet?

chaosmachine2• 17 years ago

This is pretty, but non-reversible it isn't. The colors update with every keystroke, making it easy to determine letter by letter, which keys are being pressed. This is a significant hole in many situations (screencasts, recorded presentations, or anywhere someone can point a camera at your screen).

Simple fix: Wait for 300ms of keyboard inactivity before computing the colors. This way you only get the colors when the person is done typing, eliminating the possibility of key by key color analysis.

Torn2• 17 years ago

I don't see how this follows -- the colours are changing with each keypress (just as an md5 digest would change if you added a letter to the message) but surely you cannot know the key pressed without brute-forcing / breaking the hash, which is computationally impractical?

He's also scraping the hash for a run of 6 hex characters, so surely there's quite a few colour collisions for different hashes, making it even harder to guess which keys have been pressed?

extension2• 17 years ago

If you know the digest after each keypress, the search space for a brute force attack is roughly alphabet size * password length, which is trivial.

chaosmachine2• 17 years ago

Because you can see the color code at each step, it's easy to compare results very quickly, even by hand. Did I get letter 1 right? Ok, move on to letter two, try each key until the colors match the recording. Do this for each step. At most, you have to try about 64 key presses to crack each letter.

Also, because each step is only 1 character different, it's very unlikely that you will get collisions, even with a truncated md5 hash.

varenc• 17 years ago

It completely doable.

Its unlikely there will be a collision in the first 6 characters of the md5 hash of 'AAAx' where x is [a-zA-Z0-9] and AAA is known. That's only 62 hopes for collision out of a space of 2176782336 (36^6 ... right?)

Think of it this way, if you capture the length of password, and the corresponding 6 hex characters, for every step of the password, that's quite a bit of information!

(a quick check confirms no first 6 character collisions in a-z)

ja27• 17 years ago

This is similar to the attack on Lotus Notes' hieroglyphics:

http://www.securityfocus.com/bid/4324/discuss

rawr• 17 years ago

The difference is that Lotus Notes doesn't give you the result halfway through typing your password.

This color scheme would work fine if they waited until the password was entered and then showed you the colors, but to do it at each keystroke is insecure.

jonshea• 17 years ago

It seems risky even if an attacker only had access to the final password hash, and not to the hash for every intermediate substring. In this ca the hacker could dictionary attack the hash while bypassing server side limits on failed password attempts.

Meatshoes2• 17 years ago

The keyboard delay would be a little annoying in my opinion. The password is usually the last thing you type into a login form and as such immediately hit enter after typing. Having to wait 300ms for it to update would likely result in me not using the colour-hash.

Perhaps a timer that decreases as more characters are entered, so that once 8+ characters have already been typed the hash is updated almost instantly?

heroin• 17 years ago

I do not have time to read the code. But if the colors are generated using one way hash, this would be great to have on every site. Using of colors can be replaced by showing the hash in plain text. Everybody would remember their password colors, and typos in password would be history.

calambrac13• 17 years ago

Thanks gods we finally have a security-compromising solution to the world-stopping problem of typos in passwords.

zackattack2• 17 years ago

This has been a big deal around the net as well as HN recently. Your sarcasm is both inappropriate as well as indicative of ignorance. Parent should be upvoted despite the superfluous comment of "didn't have time to read the source", because at first, I didn't perceive why this was useful.

NyxWulf• 17 years ago

As others have noted, this is not "non-reversible", at least in the current incarnation. Part of the problem is that if you type an 'a' you always get the same three color triplet.

It seems to me that the simplest fix would be to add something like a seed value to the input or the triplet colors and then randomly generate the seed each time the page is loaded. At that point someone replaying or recording the colors would have no idea what seed would have been generated, but as long as both fields use the same seed the color triplet would be identical for both.

calambrac13• 17 years ago

The two "benefits", both of which I think are bullshit, are supposed to be: you know when masked passwords match, and you recognize that you've correctly typed your password in the future. The former case usually only happens for signup or password change, and is more easily, intuitively, and accessibly handled with explicit 'matches/doesn't match' symbols. The latter case (again, which I think is bullshit) would be completely obviated by your proposal.

This is just A Bad Idea.

Robin_Message• 17 years ago

You could use a nonce when you have two password boxes, so that the two boxes match, but the hash cannot be reversed by someone who just sees the sequence.

However, this would mean the hash is different each time, so it would be no good for confirming your password is correct before you login. For the registration case, just show a tick when the fields are equal. Or just wait for the round-trip, it's not that bad.

Frankly, the last month's talk about improving password fields is boring: it doesn't need doing. I type passwords without thinking, about twice the speed I type normally, and I don't make mistakes.

Something I'd like to see a password plugin/script that hashes my password with the site URL, so if they lose my password, its not my password they lose, its a site specific hash - anyone know of one?

amanfredi2• 17 years ago

Someone at my company looked at password requests last week, and it looks like about 50% of login attempts fail.

amanfredi2• 17 years ago

This could be due to a lot of trash submissions. I just checked and our web analytics put the number closer to 10%.

lsb• 17 years ago

Not to be pedantic, but mattt: your h2 font family is "Palantino". Otherwise, this looks pretty nifty.

diiq• 17 years ago

It's certainly a shiny way of dealing with hiding password from over-the-shoulder leaks while still allowing for verification; I agree with chaosmachine, it is very worth only showing the final result, and not the intermediary steps, even though that wouldn't be as pretty.

I'd love it if my keyring showed me the color combo for my password at each site --- then if my computer is stolen my passwords don't go with it; but when I get to a site I haven't logged in to for a few months, I don't have to try ten different passwords to remember which one I used.

slmbrhrt• 17 years ago

Why not try hashing on the result of some operation (xor would be bad because, well, you know) on the password and the challenge together, and not displaying the hash until the password and challenge are the same length?

apinstein• 17 years ago

I'm a developer and I can't even guess what the visualization "means" in under 10 seconds. I don't get the point of it much less see any practical utility for this...

Neat css trick, though!

matttthompson• 17 years ago

Thanks for all of your feedback so far! I just posted a bit of explanation and a response on my blog: http://mattt.me/2009/07/chroma-hash-a-belated-introduction/

calambrac13• 17 years ago

Another consideration, however, is how exactly someone would be able to tell what the colors are, at least in common use-cases.

You seem to be bringing this up as an argument that the security concern isn't really that important, that because a snooper wouldn't be able make fine-grained distinctions between colors, the attack is more difficult.

First, that's not true, it just means you have to be a little more robust to fuzziness. In your current 3 bar configuration, the subtle differences between the possible exact values of a given single color bar are usually dwarfed by the not subtle differences between the 3. Further, you get an even bigger shift when the next letter gets typed.

Second, even if we did grant that point, doesn't it simultaneously undermine the very purpose the tool is trying to serve? If it's hard for an attacker to verify the colors, isn't it equally difficult for the user who is supposed to be using this to check that they've typed their password correctly?

It looks cool, I will definitely grant that. But it's just not a good idea, and I really hope I never see it used by any sites I frequent.

michaelfairley• 17 years ago

What if this only displayed one color instead? It would be much more secure against snooping, but will still provide a large portion of the benefit. Sure, the number of false collisions would go up a ton, but the odds of trying to type the same thing and accidentally typing do different things that collide would be relatively small.

calambrac13• 17 years ago

The attack is based on being able to watch how the badge changes with each keystroke. Changing the number of colors displayed doesn't really help.

Chroma-Hash: a sexy, non-reversible, live visualization of password field input

Related Stories