How to make a password strength meter for your register form

2007-11-02

A small tutorial on how to build a password strength meter like the one on Google's new account form.

I will start by telling you what makes a password strong.

My approach was to give one point for each of the conditions above.

And I give a point for each of the conditions, the voting scale is the following

Before showing you the code you can check the password strength live example

The html code

<form method="post" action="" id="user_registration" name="user_registration">

		<p><h1>Password strength metter</h1></p>

		<p>	

		<label for="user">Username</label><input type="text" name="user" id="user"/>

		</p>

		<p>	

		<label for="name">Name</label><input type="text" name="name" id="name"/>

		</p>

		<p>	

		<label for="surname">Surname</label><input type="text" name="surname" id="surname"/>

		</p>

		<p>	

		<label for="email">E-mail</label><input type="text" name="email" id="email"/>

		</p>

		<p>	

			<label for="pass">Password</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />

			 

		</p>

		<p>	

		<label for="pass2">Confirm Password</label><input type="password" name="pass2" id="pass2"/>

		</p>

		<p>

			<label for="passwordStrength">Password strength</label>

			<div id="passwordDescription">Password not entered</div>

			<div id="passwordStrength" class="strength0"></div>

		</p>

		<p>	

		<input type="submit" name="submit" id="submit" value="Register">

		</p>

</form>

The csss code


#passwordStrength

{

	height:10px;

	display:block;

	float:left;

}



.strength0

{

	width:250px;

	background:#cccccc;

}



.strength1

{

	width:50px;

	background:#ff0000;

}



.strength2

{

	width:100px;	

	background:#ff5f5f;

}



.strength3

{

	width:150px;

	background:#56e500;

}



.strength4

{

	background:#4dcd00;

	width:200px;

}



.strength5

{

	background:#399800;

	width:250px;

}

And finally the javascript code


function passwordStrength(password)

{

	var desc = new Array();

	desc[0] = "Very Weak";

	desc[1] = "Weak";

	desc[2] = "Better";

	desc[3] = "Medium";

	desc[4] = "Strong";

	desc[5] = "Strongest";



	var score   = 0;



	//if password bigger than 6 give 1 point

	if (password.length > 6) score++;



	//if password has both lower and uppercase characters give 1 point	

	if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;



	//if password has at least one number give 1 point

	if (password.match(/\d+/)) score++;



	//if password has at least one special caracther give 1 point

	if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )	score++;



	//if password bigger than 12 give another 1 point

	if (password.length > 12) score++;



	 document.getElementById("passwordDescription").innerHTML = desc[score];

	 document.getElementById("passwordStrength").className = "strength" + score;

}

One small tip that I use when I choose my passwords is that I choose a normal phrase that I easily remember and then I replace all "i" with "1" all "g" with "6" all "r" with "5" all "a" with "@", in this way I don't forget my passwords and they are safer against brute force attacks.

Download the Password strength example files

Share this with the world

Related

Comments

Tane Piper

I've released a jQuery plugin that makes this very easy:

http://dev.digitalspaghetti.me.uk/password/

It makes it easy to create a password field, and attach the effect to it showing the strength of the password, and it's very customizable.

Posted on 2007-11-02 14:15:15
gigi

very usefull tutorial

Posted on 2007-11-19 15:50:54
Big

Cute, but not particularly accurate, "P@ssw0rd" isn't really a "strong" password.

Anything that http://www.openwall.com/john/ can crack in under 10 seconds counts as "very weak". Modern tools are quite quick at anticipating simple number/letter substitution and other "leet speak" tactics.

Neat Javascript demo though - to do better you'd need to jump up the complexity significantly and use ajax running serverside dictionary attacks against the suggested password...

cheers,

big

Posted on 2007-11-05 08:50:20
David Bradley

Nice idea that might be easily mashed up with my <a href="http://www.sciencetext.com/passwords-for-scientists.html">passwords for scientists</a> tip ;-)

db

Posted on 2007-11-05 11:42:12
Rafael Cortes

Be carefull with the letter substituion alone, since most brute-force dictionaries already include words with the most common substitutions.
i.e. P@ssw0rd will show as a strong password, but it exists in most dictionaries, so does $tr0ngP4$$w0rd (StrongPassword) and Sys@dm1n... While P@ssw0rd and Sys@dm1n shows in this script as Strong, $tr0ngP4$$w0rd shows as strongest, they will not sustain a dictionary attack which usually gets done before or during the brute force attack.
Try to use word combinations such as W0rd1ng-4-G33k$ (Wording-for-Geeks), or backward words like ys@3t0N$I$ihT (ThisIsNotEasy).

Posted on 2007-11-05 16:25:17
Ryan

Excellent tutorial. Explained well, highly detailed, very practical. Thanks for writing this.

Posted on 2007-11-05 20:58:58
John Waddell

I encountered a mailcious cracker on one of our servers, apparently it originated in Germany. How it got into our server is still a mystery. The cracker had a complete english dictionary list and tried to break into MS-SQL Server trying root, sa and admin and every word with numeric preamble and postamble. Brute force isn't hard to employ. We use a Dr. Seuss book and take 2 words from different pages and sprinkle numbers but no scheme is "uncrackable", or that's what we should assume.

Posted on 2007-11-19 15:50:36
e

Hi,

Good article, but I have some suggestions.

6 letters is not a strong password. 6 letter passwords can be cracked almost instantly. I would suggest at least 8 characters.

Also, your math is wrong. Using both cases is better than doubling. Consider a 6 character password only using lowercase. That's 26^6 = 308 915 776 possabilities. Using both cases however, is 52^6 = 19 770 609 664. The difference between these is a factor of 64. So for an n character password, using both cases increases cracking time by 2^n, not 2.

Cheers

Posted on 2007-11-15 00:04:29
Dave

There are two ways to avoid rainbow table cracking:

1. Don't allow your encrypted passwords to fall into the hands of your attackers.
2. Use really long passwords.

If you are adding salt to passwords to increase their length, don't forget to make sure it's different salt for each password or an attacker will be able to crack all of your passwords as easily as cracking one of them. Salt is also a good idea in general so that any two people with the same password won't have the same encrypted version.

Posted on 2008-03-21 20:02:43
Matt

Interesting article & example. I'd like to add a couple of thoughts, with respect to both the "password security" discussion, and the code shown in the example.

As e's comment demonstrates, length is very important, and longer the better. Also, the randomness of a password (entropy) is also very important. The "words with sprinkled numbers" approach seems strong because of the length. However, where brute-force may be infeasible against them, a dictionary and/or rainbow table attack would likely make short work of such a password. http://grc.com/passwords is a good resource on generating long high-entropy passwords.

You should also take a look at your markup. The example page is missing a doctype, and H tags can't be nested within a P. Besides, having a header inside a paragraph just doesn't make sense. It would also have been nice to see this implemented as unobtrusive javascript, without the inline onkeyup call and and empty div tag.

I hope you don't take this as harsh. It is meant to be constructive criticism. A UI feature like this is a good way to help users use stronger passwords, and this demo is pretty slick. With just a bit more work, it'll be worthy of the attention it seems to be getting on del.icio.us.

You also might want to check your spelling of "meter" in the example code ;-)

Posted on 2007-11-26 14:31:25
Bryan Price

The problem is there is a DVD with all the hash codes for NT, 2000 and maybe even XP for all the 14 character alphanumeric passwords. Can't find it now. :( Ah!

http://www.codinghorror.com/blog/archives/000949.html

Of course, throwing in on special character (+, -, #) you defeat that rainbow password cracking.

At least until somebody decides to take that 8.5 gigs and starting adding more to it fill a 320GB laptop drive or a 1TB desktop drive.

Since I'm now rethinking my password strategy, I have yet to settle on something that I really like.

I'm thinking about using md5 hashes generated on my old passwords with a salt. At least for my web passwords. I've already found out how much my current low priority password shows up in Google with the md5 hash AND base64 encoding. Login passwords are another issue. md5 hashes aren't so great when you can't cut and paste.

Posted on 2008-03-21 20:02:43
bob

Great way to snag passwords - post a password strength meter with an email form.

Posted on 2007-11-30 07:19:22
codeassembly

Bob, I can assure you that no email or password is collected from that example.
I even disabled the submit button so people will not post the form data.

Posted on 2007-11-30 08:40:15
Dave

The best way to determine password strength is to calculate the number of possible passwords based on the known parameters of the current password.

For example, in order of increasing strength:
5 characters, all lower case = 26 ^ 5 = 11881376.
5 characters, mixed case = 52 ^ 5 = 130691232.
5 characters, mixed case, numbers and symbols = 110 ^ 5 = 16105100000
10 characters, all lower case = 26 ^ 10 = 141167095653376
15 characters, all lower case = 26 ^ 15 = 1677259342285725925376

As you can see, a 10 character password has many, many more possible permutations than a 5 character password, even if there are much fewer possible characters for each letter of the password. This is because the exponent of the equation has much more impact than the operand on the final result.

The trouble is, if the attacker knows that you strictly enforce your password policy then all the policy does is to reduce the number of allowable permutations.

For instance, in the 5 character password above, one character must be upper case, one must be lower case, one must be a symbol and one must be a number... the fifth can be any of them. This leaves the possible combinations at 26 x 26 x 10 x 48 x 110 = 35692800. To find the number of permutations we need to multiply that number by 5! which leaves us with 4283136000 which is around a quarter of 16105100000, the original number of possible passwords if the password policy is not enforced.

With all of this in mind, a password strength tester should assume that if you only have lower case characters then the operand is 26. If you have upper case as well then the operand is 52. Numbers add 10 to the operand and symbols add 48. The length of the password becomes the exponent of the equation. If your company enforces a password policy, simply divide the resultant password strength by 4.

Then all you have to do is hard-code some arbitrary values for "very weak" through "medium" to "very strong" as raw numbers of possible permutations.

P.S.
This algorithm is still a little naive in that it doesn't take dictionary words into account. Dictionary words and variations on dictionary words such as letter-number substitutions, letter-symbol substitutions and prepending and appending numbers to the word are still extremely common. All good password cracking tools will run through dictionary words and their variations before trying the more random permutations and hence these choices of password are inherently weak.

Posted on 2008-05-01 21:22:23
example

Your meter still allows submitting by pressing enter. Even if you don't capture passwords, your ISP is likely monitoring your traffic and will capture them. You might want to block that.

Posted on 2008-03-21 20:02:43
Neon John

This meter is quite flawed. For example, I closed my eyes while hovering my hands over the keyboard. I randomly typed a 30 character password into your test program. I made sure I drifted up to the number row a few times to ensure a good mix of letters and numbers. Your algorithm rated this random string as "medium". Yet when I added ONE upper case letter, it suddenly became "strong".

In another test I MD5 hashed a short sentence. Your algorithm only reported "medium" security.

Major flaws include giving only one point credit for >12 characters while giving the same credit for a single upper case letter. Not giving proportional credit for longer passwords. Surely a 30 character mixed numeric/text password is many times more secure than a 13 character mixed case password. Your algorithm rates both the same.

Seems to me major improvements would include giving proportional credit to length. Perhaps a simple randomness test or a letter frequency test?

John

Posted on 2008-03-21 20:02:43
angel wortham

what is the most popualr way to make a password stronger

Posted on 2008-04-11 17:10:48
Trung

Thanks for this useful script.

I found there is a security hole.
The first policy password length above 6 characters must be a mandatory policy. So the script may be changed as following:

//if password bigger than 6 give 1 point
if (password.length > 6) {
score++;
// another policies...
if ... score++;
if ... score++;
...
}

If not changed as above script then the passwords "1","Do","!","@" are evaluated as "Weak" and "1!", "Do!" are evaluated as "Better",...
So I suggest the policy password length above 6 characters must be a mandatory policy.
Thanks & regards,
TrungTN

Posted on 2008-06-09 10:26:29
söve

Thank you for sharing...

Posted on 2008-08-07 13:09:04
A

Think most people are missing the point of this.

Thanks for the article / code - it's a nice way of letting users know their passwords are potentially unsafe.

Posted on 2008-08-23 11:48:21
Sam

Very nice tutorial. In fact I was looking for one like this to implement in my project. Good Work. Keep it up.

Posted on 2008-09-19 12:34:52
yeah

big up yourself and keep it real. R.E.S.T.E.C.P. only i would use high quality images designed with photoshop instead of the background color. booyakasha

Posted on 2008-10-31 14:05:03
paul

The NIST has Special Publication 800-63, Electronic Authentication Guideline, which goes into quite a lot of detail re: password strength. Google it and read Appendix A for some good guidelines. It should be fairly straight forward to implement some or all of their recommendations in this framework. Good job!

Posted on 2008-11-05 23:47:30
Alan Charles

By your script "aaaaaaaaaaaa" is a 'better' password. Better than what? Assigning points for length is great and all, but you need to be more dynamic when assigning points. Also, "Aaaaaaaaaaaa" should not be considered a 'medium' password. A descent brute force would have this one in a couple of hours tops. You should place a regex check in there that will deduct a point for repetition such as this.

Last one is "123456789012" is also considered a 'medium' password. Numeric stringing (numbers in sequential order) is never a good idea.

Posted on 2008-12-23 16:53:04
Basolo24

Just to make a note!

All good password cracking tools usually start at a 6 character min. and sometimes if not most of the time a smaller password is better! with a mix of cap to lower and numbers.

Happy New Years!!

Posted on 2009-01-02 16:11:36
Ryan

How am i supposed to enter the html code? i know how and where to enter it but where am i supposed to place the text and stuff if you know what i mean.

Posted on 2009-01-05 16:42:46
Milo

another addition:

put this in css:
.strength-1

{

width:250px;

background:#cccccc;

}

put this in html
if (password.length < 1) score--;

desc[-1] = "Password not entered";

Posted on 2009-07-30 13:07:32
calopsfr

Dave said :
5 characters, mixed case = 52 ^ 5 = 130691232.

That's fairly wrong. Everyone knows 130691232 is 42^5.

Always 42.

Posted on 2009-10-23 13:02:08
jim

offtopic, people stop bloody complaining about password grabbing from this site, grow up, what is the problem.
This is a test site to test the password meter, why are you putting in your real passwords in the first place and why would you use the same pass across you accounts?

I bet your the same people who phone up a radio station and complain that the chocolates "black magic" are racist!

idiots.

Posted on 2010-04-25 13:46:47
Kshitiz

thanx very much...brilliant piece of simplified logic...was searching somthing like this...alll other object , jquery and ajax codings...oh my god..tiresome..

Posted on 2011-05-20 17:53:32
mehmet

thank you " big" :) "P@ssw0rd" :))

Posted on 2011-08-01 17:31:54
Brett

Thank you for sharing. Great platform and highly customisable. Got to love all the people complaining about security flaws when they didn't bother to share any solution themselves. I didn't see any guarantee from yourself to make passwords un-crackable, just better.
Cheers

Posted on 2012-01-11 11:46:24
Matt

Adding 2 lines of css makes the transitions cleaner. Works in all browsers except IE9 and below.
-webkit-transition: width 2s; /* Safari */
transition: width 2s;

Posted on 2013-07-22 21:03:59

Make yourself heard

Categories

Subscribe

All Posts

All Comments

© Copyright CodeAssembly

All code is licensed under LGPL, unless otherwise noted

littlebubu