How to Make a Password Strength Meter Like Google
Password strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about making one of these meters? Well it’s fairly straight forward.
The basic break down is we add an event handler on your password field that will check the password for every key input the user types. This allows for an updated meter as the user types the password. When you get into the algorithm that actually checks how secure a password is, there are many routes you can go. When researching for this project, I chose to base my code off of the kind folks over at Intelligent Web. There theory is to calculate how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that we then in turn convert to a nice GUI for the end user to see. So let’s take a look at the code:
The JavaScript is fairly straight forward. There are settings at the top for different checks to enable or disable. Here is the JavaScript:
[ftf]
// Password strength meter v1.0
// Matthew R. Miller - 2007
// www.codeandcoffee.com
// Based off of code from http://www.intelligent-web.co.uk
// Settings
// — Toggle to true or false, if you want to change what is checked in the password
var bCheckNumbers = true;
var bCheckUpperCase = true;
var bCheckLowerCase = true;
var bCheckPunctuation = true;
var nPasswordLifetime = 365;
// Check password
function checkPassword(strPassword)
{
// Reset combination count
nCombinations = 0;
// Check numbers
if (bCheckNumbers)
{
strCheck = “0123456789″;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check upper case
if (bCheckUpperCase)
{
strCheck = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check lower case
if (bCheckLowerCase)
{
strCheck = “abcdefghijklmnopqrstuvwxyz”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check punctuation
if (bCheckPunctuation)
{
strCheck = “;:-_=+\|//?^&!.@$£#*()%~<>{}[]“;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Calculate
// — 500 tries per second => minutes
var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400;
// Number of days out of password lifetime setting
var nPerc = nDays / nPasswordLifetime;
return nPerc;
}
// Runs password through check and then updates GUI
function runPassword(strPassword, strFieldID)
{
// Check password
nPerc = checkPassword(strPassword);
// Get controls
var ctlBar = document.getElementById(strFieldID + “_bar”);
var ctlText = document.getElementById(strFieldID + “_text”);
if (!ctlBar || !ctlText)
return;
// Set new width
var nRound = Math.round(nPerc * 100);
if (nRound < (strPassword.length * 5))
{
nRound += strPassword.length * 5;
}
if (nRound > 100)
nRound = 100;
ctlBar.style.width = nRound + “%”;
// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
ctlBar.style.backgroundColor = strColor;
ctlText.innerHTML = “” + strText + ““;
}
// Checks a string for a list of characters
function doesContain(strPassword, strCheck)
{
nCount = 0;
for (i = 0; i < strPassword.length; i++)
{
if (strCheck.indexOf(strPassword.charAt(i)) > -1)
{
nCount++;
}
}
return nCount;
}
[/ftf]
On the HTML side, I have setup a simple form to display the interaction the user will receive.
[ftf]
[/ftf]
The magic lies inside the event handler I spoke about above. The “onkeyup” event passes the current password, and the ID for this input item. The ID is used to reference the below div tags that show the strength meter and text. The ID allows for you to have more than one password meter per form, per page.
[ftf]
[/ftf]The algorithm can be enhanced if you wish to get more complicated with the strength checking. One can also adjust the colors and text for the various strength levels displayed to the user.[ftf]
// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
[/ftf]
Further features could be displaying when a user has not entered a valid password, for example not a long enough length.
Here is a demo of the above code, and download links so you can implement this into your sign up pages. Enjoy!
Right Click to Download:
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Nice article. I can see a lot of uses for this.
However, I think I’m going to have to look for another algorithm.
The password “password” shows as “very secure” 
it seems that the level of security is measured only by the size of the password. dictionary words long enough evaluate to “very secure”…
WOW! This is awesome. Thank you very much for sharing this kind of quality content with the rest of us.
I’m planning on implementing this within the next little while, and if I can contribute any improvements (perhaps to the GUI), I will let you know.
Man, please keep it coming.
WebGyver
http://www.webgyver.info
====================================
Tools and Resources for Successful Web Design,
Web Development, Web Applications and
Web Business Marketing
[...] How to Make a Password Strength Meter Like Google zeigt wie man im Registrierungsprozess grafisch die Stärke eines Passworts anzeigt. « Links für Entwickler [...]
[...] How to make a password Strength Meter like Google If you have not seen googles example of a password strength meter then this is still worth looking at. Good way to encourage your users to improve their password strength. [...]
Cool idea but lame results. The javascript is there to check for alpha, numeric, upper, lower and punctuation in a password but it obviously doesn’t actually check for those elements. Just password length.
As stated above, this a proof of concept. I will work on making the algorithm better here in the near future.
kid,
That’s not entirely true.. this is a proof of concept… it is not meant to be a drop in solution.
[...] in Part 1 of How to Make a Password Strength Meter Like Google I went over the basics on how to get a password strength meter up and running on your site. I got a [...]
[...] Hace unos días vimos como desde Sentido Web montaban un sistema que nos permitía integrar un indicador de calidad de la contraseña que vas introduciendo en el mismo inputbox en el que introducimos la contraseña. Y hoy via Digg, encuentro este artículo en el que nos muestras una forma de emular el sistema que usa Google para controla la calidad de la contraseña. [...]
I’m always a little sceptical of sites that “look” at my passwords. I know my password is good. What I don’t know is if a site is storing it in plain text or otherwise exposing it to the outside world. If I see something like this I’m not going to enter my good password (I memorize about one strong password at a time and use it for sensitive systems. I don’t have room in my noggin for more than one and writing passwords down is the fastest way to have a password burned) so I’ll enter an easy to remember (and crack) password.
But that’s just me an I’m a humungus nerd. For those less well endowed in the geek department, I’m sure these meters make them feal better.
Cool idea. Don’t listen to party pooper. I’m sure you can implement a better algorithm in an evening.
Good idea, needs to check the password against dictionary etc. Once you do that you’ll want to implement the check server-side, as otherwise your Javascript will get too big.
Surely “password” shouldn’t be categorised as “Very Secure”, sorry submitted to early. However - a list of completely banned words can simply be added to check against, but obviously checking this list could become long, something clever with a better bigO search profile would be quite cute.
However the basics in the demo will be very useful as a starting block to make a gorgeous addition to any interface where setting up a user and password is needed, I’m also considering adding it to a letter counter in an app that has users entering free text so they know when they’re approaching the limit of the paper the form will eventually be printed on.
There is a new version available at: http://www.codeandcoffee.com/2007/07/16/how-to-make-a-password-strength-meter-like-google-v20/
[...] making one of these meters? Well it’s fairly straight forward. flintsones and jetsons gangbangread more | digg [...]
Excellent and informative blog post but the results need a bit more work. By the measure of this strength checker my password: “11111111111111″ is just as strong as “3rc$£$342c82@” which is not true. A proper checker would have to look at things like dictionary words and repetition / simple patterns.
[...] one go about making one of these meters? Well it’s fairly straight forward. X Men comic booksread more | digg story RSS feed for comments on this post. TrackBack URI Cartoons Fans Lounge [...]
The algorithm sucks imho.
All this does is lure users into a false sense of security. “12345678901″ is classified as “Very Secure”.
You have to take ALL variables into account, not just one..
[...] How to Make a Password Strength Meter Like Google - Code and Coffee (tags: javascript password) [...]
Well it’s been said 30 times already but the algorithm is horrible, though the javascript is cool if given the right security measures.
“1111111111″ and “password” are not very secure in any environment.
I’d love to see a rework of the php though…
Google uses a Dictionary along with checking all the above (uppercase & lowercase, numbers, etc…) for validating password strength.
Unfortunately the demo rated the password “changeme” as “very secure”. It’s a fun article, but as others have pointed out, it might be good to point out the heuristics involved.
A password of “aaaaaaaaaaaaaaaaaa” gives a result of very secure, wouldn’t it be better to measure the entropy of a password through chi square analysis etc.?
Well, how simple is it to brute force “aaaaaaaaaaaaaaaaaa” if the passwords are stored with a salt and sha256? A simple check to see if all the chars are the same could be usefull to stop the most emo users from doing this.
A requirement for “very secure” could be char, number and special char in the password
E.g. “.aSSw0rp” would be a way better password then “password” and not that much harder to remember even for grandma
There is a version 2.0 of this script that has a better way of rating implemented. http://www.codeandcoffee.com/2007/07/16/how-to-make-a-password-strength-meter-like-google-v20/
[...] one of these meters? Well it’s fairly straight forward. xmen fanfiction rogue cyclops sarahread more | digg [...]
[...] How to Make a Password Strength Meter Like Google - Code and Coffee (tags: javascript password security tools) [...]
[...] How to Make a Password Strength Meter Like Google - Code and Coffee (tags: code javascript password howto ajax) Posted by allencui Filed in bookmarks [...]
[...] How to Make a Password Strength Meter Like Google - Code and Coffee Password strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about m (tags: javascript password webdev programming tips tools code) [...]
[...] egy jelszó erősség mérőnk is js-ben, amivel például regisztrációkor tudjuk tudatni a felhasználóval, hogy mennyire [...]
It’s useless！
I typed “ddddddd”,it display “Very Secure”，do you think the “dddddddd” password is secure?
NO!
So it’s no use at all,and may mislead the user.
[...] How to Make a Password Strength Meter Like Google - Code and Coffee Javascript sederhana untuk membuat ukuran kekuatan kata sandi. (tags: javascript) [...]
[...] How to Make a Password Strength Meter Like Google - Code and CoffeeJavascript sederhana untuk membuat ukuran kekuatan kata sandi.(tags: javascript) [...]
poor script. attaching an arbitrary rating depending on the amount of numbers or letters is a bad way of determining password strength. as others have posted, under this system “password” is a very secure password. As is “11111111111″.
This script could be improved greatly by checking that the string does not include repeated characters and putting in an AJAX call that runs a cross-check against a dictionary to weed out real words.
But, as others have said, the script provides a base at least for others to build upon, so kudos for that.
Comments closed as there is a new version available at:
http://www.codeandcoffee.com/2007/07/16/how-to-make-a-password-strength-meter-like-google-v20/
[...] Instalarlo es muy sencillo. Tienes disponible el código fuente y ejemplos en Code and Cofee. [...]
[...] und signalisiert wie gut das eingetippte Passwort ist. Matthew R. Miller hat in seinem Blog ein kleines Script vorgestellt das genau dieses Verhalten nachahmt, natürlich ist das Script etwas [...]
[...] users. So how does one go about making one of these meters? Well it’s fairly straight forward.read more | digg [...]
[...] dover controllare che la password che l’utente si crea, sia sicura oltre che valida.Questo post, preso dal [...]
[...] How to make a password strength meter like Google: interesante javascript con el que medir la calidad de las contraseñas. none [...]
[...] Password Strength Meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. The password strength meters wil be updated for every key input the user types. So how does one go about making one of these meters? Code and Coffee created one for us, it calculates how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that he then in turn convert to a nice GUI for the end user to see. Requirements: Modern Browser with Javascript Enabled Demo: http://www.codeandcoffee.com/wp-content/uploads/demo.html License: License Free [...]
[...] Code and Coffee has released the javascript file along with the demo.html page that you would need, to add one of these password meters to your site or service. There is also a detailed explanation as to how to the code works which can be read, by clicking here. [...]
[...] volete creare qualcosa di simile per il vostro sito, trovate in questo tutorial tutto quello che vi occorre, compreso codice Javascript da scaricare e usare [...]
Sorry, the comment form is closed at this time.
Very nice post, really, go on!