

Chroma-Hash: a sexy, non-reversible, live visualization of password field input - bkudria
http://mattt.github.com/Chroma-Hash/

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

~~~
Torn
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?

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

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

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

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

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

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

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

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

~~~
MaMa
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?

~~~
calambrac
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?

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

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

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

------
upinsmoke
Looks nice, but what about people who are colorblind?

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

~~~
calambrac
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?

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

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

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

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

------
matttthompson
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/>

~~~
calambrac
_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.

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

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

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

------
apinstein
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!

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

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

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

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

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

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

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

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

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

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

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

~~~
zackattack
I'm sorry. Thanks for clarifying.

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

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

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

