Password Strength Meter

JavascriptPasswords

Javascript Problem Overview


I have a situation where I would like to be able to rate a users password in the web interface to my system, so that before they hit submit they know if they have a bad password.

Key Requirements:

  • Must be able to rate the password, not just pass/fail.
  • Should disable the form if the password is below a threshhold, so the user can't submit it.
  • Look nice. :)
  • Not use jQuery - we're currently using Mochikit and Y!UI in this system.

I've found many password meters written in jQuery, and things like http://www.passwordmeter.com/ that are too verbose.

Can anyone suggest a good drop in javascript password rater I can use, or give an example of how to write one?

Javascript Solutions


Solution 1 - Javascript

Update: created a js fiddle here to see it live: http://jsfiddle.net/HFMvX/

I went through tons of google searches and didn't find anything satisfying. i like how passpack have done it so essentially reverse-engineered their approach, here we go:

function scorePassword(pass) {
    var score = 0;
    if (!pass)
        return score;

    // award every unique letter until 5 repetitions
    var letters = new Object();
    for (var i=0; i<pass.length; i++) {
        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
        score += 5.0 / letters[pass[i]];
    }

    // bonus points for mixing it up
    var variations = {
        digits: /\d/.test(pass),
        lower: /[a-z]/.test(pass),
        upper: /[A-Z]/.test(pass),
        nonWords: /\W/.test(pass),
    }

    var variationCount = 0;
    for (var check in variations) {
        variationCount += (variations[check] == true) ? 1 : 0;
    }
    score += (variationCount - 1) * 10;

    return parseInt(score);
}

Good passwords start to score around 60 or so, here's function to translate that in words:

function checkPassStrength(pass) {
    var score = scorePassword(pass);
    if (score > 80)
        return "strong";
    if (score > 60)
        return "good";
    if (score >= 30)
        return "weak";

    return "";
}

you might want to tune this a bit but i found it working for me nicely

Solution 2 - Javascript

Password Strength Algorithm:

Password Length:
	5 Points: Less than 4 characters
	10 Points: 5 to 7 characters
	25 Points: 8 or more
	
Letters:
	0 Points: No letters
	10 Points: Letters are all lower case
	20 Points: Letters are upper case and lower case

Numbers:
	0 Points: No numbers
	10 Points: 1 number
	20 Points: 3 or more numbers
	
Characters:
	0 Points: No characters
	10 Points: 1 character
	25 Points: More than 1 character

Bonus:
	2 Points: Letters and numbers
	3 Points: Letters, numbers, and characters
	5 Points: Mixed case letters, numbers, and characters
	
Password Text Range:

	>= 90: Very Secure
	>= 80: Secure
	>= 70: Very Strong
	>= 60: Strong
	>= 50: Average
	>= 25: Weak
	>= 0: Very Weak
	

Settings Toggle to true or false, if you want to change what is checked in the password

var m_strUpperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var m_strLowerCase = "abcdefghijklmnopqrstuvwxyz";
var m_strNumber = "0123456789";
var m_strCharacters = "!@#$%^&*?_~"

Check password


function checkPassword(strPassword)
{
	// Reset combination count
	var nScore = 0;
	
	// Password length
	// -- Less than 4 characters
	if (strPassword.length < 5)
	{
		nScore += 5;
	}
	// -- 5 to 7 characters
	else if (strPassword.length > 4 && strPassword.length < 8)
	{
		nScore += 10;
	}
	// -- 8 or more
	else if (strPassword.length > 7)
	{
		nScore += 25;
	}

	// Letters
	var nUpperCount = countContain(strPassword, m_strUpperCase);
	var nLowerCount = countContain(strPassword, m_strLowerCase);
	var nLowerUpperCount = nUpperCount + nLowerCount;
	// -- Letters are all lower case
	if (nUpperCount == 0 && nLowerCount != 0) 
	{ 
		nScore += 10; 
	}
	// -- Letters are upper case and lower case
	else if (nUpperCount != 0 && nLowerCount != 0) 
	{ 
		nScore += 20; 
	}
	
	// Numbers
	var nNumberCount = countContain(strPassword, m_strNumber);
	// -- 1 number
	if (nNumberCount == 1)
	{
		nScore += 10;
	}
	// -- 3 or more numbers
	if (nNumberCount >= 3)
	{
		nScore += 20;
	}
	
	// Characters
	var nCharacterCount = countContain(strPassword, m_strCharacters);
	// -- 1 character
	if (nCharacterCount == 1)
	{
		nScore += 10;
	}	
	// -- More than 1 character
	if (nCharacterCount > 1)
	{
		nScore += 25;
	}
	
	// Bonus
	// -- Letters and numbers
	if (nNumberCount != 0 && nLowerUpperCount != 0)
	{
		nScore += 2;
	}
	// -- Letters, numbers, and characters
	if (nNumberCount != 0 && nLowerUpperCount != 0 && nCharacterCount != 0)
	{
		nScore += 3;
	}
	// -- Mixed case letters, numbers, and characters
	if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0)
	{
		nScore += 5;
	}
	
	
	return nScore;
}
 
// Runs password through check and then updates GUI 


function runPassword(strPassword, strFieldID) 
{
	// Check password
	var nScore = checkPassword(strPassword);
	
	
	 // Get controls
    	var ctlBar = document.getElementById(strFieldID + "_bar"); 
    	var ctlText = document.getElementById(strFieldID + "_text");
    	if (!ctlBar || !ctlText)
    		return;
    	
    	// Set new width
    	ctlBar.style.width = (nScore*1.25>100)?100:nScore*1.25 + "%";

 	// Color and text
	// -- Very Secure
 	/*if (nScore >= 90)
 	{
 		var strText = "Very Secure";
 		var strColor = "#0ca908";
 	}
 	// -- Secure
 	else if (nScore >= 80)
 	{
 		var strText = "Secure";
 		vstrColor = "#7ff67c";
	}
	// -- Very Strong
 	else 
 	*/
 	if (nScore >= 80)
 	{
 		var strText = "Very Strong";
 		var strColor = "#008000";
	}
	// -- Strong
 	else if (nScore >= 60)
 	{
 		var strText = "Strong";
 		var strColor = "#006000";
	}
	// -- Average
 	else if (nScore >= 40)
 	{
 		var strText = "Average";
 		var strColor = "#e3cb00";
	}
	// -- Weak
 	else if (nScore >= 20)
 	{
 		var strText = "Weak";
 		var strColor = "#Fe3d1a";
	}
	// -- Very Weak
 	else
 	{
 		var strText = "Very Weak";
 		var strColor = "#e71a1a";
	}
	
	if(strPassword.length == 0)
	{
	ctlBar.style.backgroundColor = "";
	ctlText.innerHTML =  "";
	}
else
	{
	ctlBar.style.backgroundColor = strColor;
	ctlText.innerHTML =  strText;
}
}
 
// Checks a string for a list of characters
function countContain(strPassword, strCheck)
{ 
	// Declare variables
	var nCount = 0;
	
	for (i = 0; i < strPassword.length; i++) 
	{
		if (strCheck.indexOf(strPassword.charAt(i)) > -1) 
		{ 
	        	nCount++;
		} 
	} 
 
	return nCount; 
} 

You can customize by yourself according to your requirement.

Solution 3 - Javascript

Here's a collection of scripts: http://webtecker.com/2008/03/26/collection-of-password-strength-scripts/ (archived link)

I think both of them rate the password and don't use jQuery... but I don't know if they have native support for disabling the form?

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJerubView Question on Stackoverflow
Solution 1 - Javascripttm_lvView Answer on Stackoverflow
Solution 2 - JavascriptShashiView Answer on Stackoverflow
Solution 3 - JavascriptkanamekunView Answer on Stackoverflow