Hacker News new | past | comments | ask | show | jobs | submit login
Chroma-Hash: a sexy, non-reversible, live visualization of password field input (mattt.github.com)
83 points by bkudria on July 29, 2009 | hide | past | favorite | 66 comments



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.


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.


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

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


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.


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?


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.


This sounds like it would be easily fixed using a this-page-only salt for your hashing function. I.e., when someone else visits the login page, they get a different salt and thus can't use that attack. This could be done on the server (if you use a dynamically generated page) or on the client (with some javascript).


How do you know it's "someone else"? It's the login page, you don't know who you're displaying the page to yet.

And if you mean a different salt every time the page gets loaded: doesn't that completely skip the supposed point, which is to give the user a recognizable visual cue that they typed the right password?


The demo seems to highlight its use as a visual cue that your confirmed password is the same as the original. Not that useful in my opinion, as one attempt at creating an account with non-matching passwords will tell you they don't match anyway, and you (usually) only create an account once.

Still, pretty cool demo and very nice colour schemes.


It strikes me that this reduces password cracking to a game of Mastermind.

Amusement aside, it also allows a cracking attempt to be done without running up against server authentication. Even if the same series of color patterns can occur for multiple passwords, the quantity of attempted server authentications is greatly reduced.


It's actually easier than Mastermind, you only have to guess one character at a time.


Thank-you for the clear explanation.


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)


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.


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?


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?


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.


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.


Yeah, but its such an insignificant problem, why add the complexity of this solution.


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.


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?


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


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


"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?


"multicoloured" :-)

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


startpinkendgreen

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


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


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

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


"orangegreen"


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.


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?


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?


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?


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.


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?


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


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


Looks nice, but what about people who are colorblind?


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


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?


It's not very well presented in the demo (there's no need for the Confirm inputbox), but the point is not for password creation, but for login. From the author's github page (http://github.com/mattt/Chroma-Hash/tree/master): Chroma-Hash displays a series of colored bars at the end of field inputs so you can instantly see if your password is right... Your password will display the same sequence each time, so you can learn to expect "blue, red, pink", for instance; if you instead see "green, purple, yellow", you'll know you typed it wrong.

So the chromatically-impaired will not lose anything over current functionality, they just won't get the benefit.


Wow, that changes everything. So now I have a security-compromising solution to the problem I currently solve by using a keychain or knowing how to type, and all I have to do is remember my 3 magic colors and figure out if that shade of blue is the right one.


You still have to remember your password. The colors alone will not get you in. Rather, they merely help you know whether you mistyped it before you submit.

I'm not arguing the merits of this concept; I'm just clarifying its intent. There has been a recent wave of design fury over the HTML password input field (the one that obscures keystrokes with dots) Sites with a bajillion users have become concerned about the small percentage of users who get frustrated by failed login attempts and leave. Wanting to avoid turning users away, they have started to experiment with ways to make the field more usable.

Perhaps user disengagement resulting from input type="password", for some, translates to a measurable amount of money. Or maybe it's just a matter of trying to reduce support costs from the volume of "I can't log in" calls.

Either way, it's an interesting problem for UI design specialists.


There's been a recent wave of design fury because Jakob Nielsen wrote his article on unmasking the password field and the bike-shedders of the world decided they had to weigh in with their 'improvements', not because this is any kind of newly urgent problem.


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/


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.


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.


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.


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.


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!


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.


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.


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.


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.


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.


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?


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


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.


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


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.


Yeah, ignorance. I read the Jakob Nielsen article and all the responses, don't worry. At least with his proposal, you got a checkbox to enable the feature, and you knew explicitly without having to understand how hashes work that you were giving away your password if you typed it in view of other people.


I'm sorry. Thanks for clarifying.


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? :-)


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


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.


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




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: