Javascript Password Strength Validator

In this tutorial we'll be creating a password checker to ensure that the user chooses a "strong" password.

As the user types in the password, a small box will tell them how secure the password they are typing is. Google and Hotmail have recently introduced systems similar to this, but most other websites and many company institutions routinely allow users to choose extremely easy passwords.

This tutorial will show how you can create a password-validation control in javascript which will show a user exactly how secure his or her password is.

Before we can do this, we need to work out some means of measuring "how good is a password?". There are several metrics that we can very easily check in JavaScript:

• Password Length
• Password uses both upper and lower case letters?
• Password uses punctuation
• Password doesn't contain an overly "easy" word or phrase

var lowercase = "abcdefghijklmnopqrstuvwxyz";

var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var password = "password";

// find out the length of the password
var length = password.length;

// find out if the password different cases

var containsLowerCase = contains(password, lowercase);
var containsUpperCase = contains(password, uppercase);

// sees if a password contains one of a set of characters
function contains(password, validChars) {

    for (i = 0; i < password.length; i++) {
        var char = password.charAt(i);
        if (validChars.indexOf(char) > -1) {
            return true;
        }
    }

    return false;

}

How are we going to work out which metric is most important? Should the password be long, or just complicated?

Instead of trying to work out which is best, we're going to look at it from a hacker's point of view. Assume that the hacker knows how long your password is, and whether it contains upper case letters or not etc. How long would it take him to hack your system?

Let's use an example. Say that you have a password that is 5 letters long, and that each of them is a lower case letter. If our hacker knows this, he would have to try:

26 * 26 * 26 * 26 * 26
= 11,881,376 combinations

If the hacker starts trying passwords on your website at a rate of 200 a second, say, he would crack your website in 59,406 seconds which is less than one day. This assumes of course that your password is the very last one he tries: on average, he'll find your password in half that time. This means that your password is secure, provided you are prepared to change it every few hours.

Let's see what happens if the password also contained upper case letters. In this case there are 52 different letters that could be used in each of the 5 positions. This time the hacker would need to try:

52 * 52 * 52 * 52 * 52
= 380 204 032 combinations

380 million combinations, this is much better. The hacker would now (on average) take 11 days to decrypt the password, at the same rate of 200 attempts per second. So you can keep your password for a good week.

The hacker will of course, try a selection of the most common passwords first. If your password is one of the few hundred most common passwords used by most users, the hacker could gain access to your account in a matter of seconds.

Most people, however, will want to use the same password for a year or more. Assuming this is the case, we'll start our JavaScript, defining a "strong" password as one that will take longer than a year to crack.

We'll start our javascript function with some simple maths to calculate automatically what we've just worked out manually:

function checkPassword(password) {

var combinations = 0;

if (contains(password, numbers) > 0) {
    combinations += 10;
}

if (contains(password, lowercase) > 0) {
    combinations += 26;
}

if (contains(password, uppercase) > 0) {
    combinations += 26;
}

if (contains(password, punctuation) > 0) {
    combinations += punctuation.length;
}

// work out the total combinations
var totalCombinations = Math.pow(combinations, password.length);

// if the password is a common password...
if (isCommonPassword(password)) {
    totalCombinations = 75000 
    // about the size of the dictionary
}

// work out how long it would take to crack this
var timeInSeconds = (totalCombinations / 200) / 2;

// this is how many days? (there are 86,400 seconds in a day.
var timeInDays = timeInSeconds / 86400

// how long we want it to last
var lifetime = 365;

// how close is the time to the projected time?
var percentage = timeInDays / lifetime;

Now we know how close our code is to the projected time, we need to display to the user how good the password is visually. We'll change the width of a <div> tag to make a simple progress bar. We'll take several percentages and change the colour of the div tag, starting red when it is a bad password, working up to green when it is finally defined as a "strong" password.

var progressBar = document.getElementById("progressBar");
progressBar.style.width = friendlyPercentage + "%";

if (percentage > 1) {
    // strong password
    progressBar.style.backgroundColor = "#3bce08";
    return;
}

if (percentage > 0.5) {
    // reasonable password
    progressBar.style.backgroundColor = "#ffd801";
    return;
}

if (percentage > 0.10) {
    // weak password
    progressBar.style.backgroundColor = "orange";
    return;
}

// useless password!
if (percentage <= 0.10) {
    // weak password
    progressBar.style.backgroundColor = "red";
    return;
}

All we need now is the HTML part of the code, where we put the progress bar. We'll also demonstrate how to use the onKeyUp() event to call the checkPassword() function every time the user types a new letter.

<table>

<tr>
<td>Password:</td>
<td><input type="text" onKeyUp="checkPassword(this.value)"/></td>

<td>
<div style="border: 1px solid gray; width: 100px;">

<div id="progressBar"
     style="font-size: 1px; height: 20px; 
    width: 0px; border: 1px solid white;">

</div>
</div>
</td>
</tr>
</table>

And that's it! Download the code:
JavaScript File
HTML File

Back to tutorials