88

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?

4
  • 10
    Take a look at github.com/dropbox/zxcvbn
    – jcuenod
    Aug 5, 2016 at 14:55
  • 1
    This is how keepass does it in C# github.com/dlech/KeePass2.x/blob/…
    – nu everest
    Mar 19, 2017 at 4:02
  • 7
    "Closed as not constructive"? I found this very constructive indeed. Viewed 58,000+ times, top Google rank, etc. Come on folks...
    – 3Dom
    Jun 30, 2017 at 6:13
  • 1
    If you do use a password strength meter, make sure to test it with basic sanity checking. V4cc!nat!0n#3 is an horrifically weak password (cracked less than an hour), while monitor coke cursor fat is extraordinarily strong (cracked in 146,000 centuries). Make sure the password checker you use is giving valid results (i.e. complexity requirements make passwords weaker, not stronger)
    – Ian Boyd
    Mar 23, 2018 at 16:56

3 Answers 3

249

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

21
  • 21
    +1 because this method rates the passwords the same way zxcvbn does, but with much less code: qwER43@! => scores 70 = good, Tr0ub4dour&3 => scores 80 = strong, correcthorsebatterystaple => scores 86 = strong. Mar 6, 2013 at 7:12
  • 1
    I've rewritten this function in PHP for checking the score on the server too: pastie.org/8889985
    – MacroMan
    Mar 7, 2014 at 15:28
  • 4
    Looking at grc.com/haystack.htm pointed out by @Ziggy and experimenting the big weakness of this solution is that it says that passwords of length less than 8 are weak or good when they are way too small. adding the following to the top of checkPassStrength(pass) plugs the weakness if( pass.length < 8 ) { return "poor"; } that encourages folks to use something long enough with mixed up characters which is going to be weak, good or strong depending on how long it is. anything less is truly poor.
    – simbo1905
    Jan 1, 2015 at 17:59
  • 1
    This is just the snippet I was looking for. Snippets like these help when you're already done with the design and are just looking for an algorithm plugin.. Edit: Just found out you can't use both bold and italics to the same text while commenting!
    – mccbala
    May 7, 2015 at 6:48
  • 12
    little problem: this abcdefghijklmnopqrstuvwxyz gets a score of 130. it should check for patterns, etc. that a hacker would think of.
    – yaakov
    Oct 5, 2016 at 19:24
37
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.

8
  • 3
    @garrow: What's wrong with the coding style other than being different from yours? (FTR, it not the style I prefer either, but so what?) Jun 4, 2009 at 6:35
  • 2
    what happened to "2 numbers" ? :) Apr 10, 2013 at 12:34
  • 25
    Let's try a test case! Bill's password is "123&$aA", about 40 bits of entropy according to wikipedia. Your algorithm gives it a score of 80. Alice's password is "eriahrieudfklsvhnsreuilvnreuhgsldhhvf", about 160 bits or entropy. Your algorithm ranks it 35. Just to be clear, plugging those two passwords into grc.com/haystack.htm gives us 0.7 seconds to crack vs 74.72 thousand trillion trillion centuries.
    – Ziggy
    May 23, 2014 at 19:51
  • 14
    Seriously though. You aren't at all concerned that your many times up-voted answer is going to suggest weaker passwords over stronger ones? People will copy paste this!
    – Ziggy
    Jun 17, 2014 at 22:52
  • 3
    All other options are great, but the number one factor determining password strength is length. This should be reflected in the score. Anyway I think it's easy for people to customize this. Mar 28, 2016 at 20:23
15

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?

4
  • 4
    Remember, even if you disable the form in javascript, you should run this check on the server-side as well. Tricksy users will just do form submits anyway, or what if a user has javascript disabled?
    – Chris K
    Jun 4, 2009 at 4:56
  • 3
    You should also note that users are only tricking themselves. Don't sure if you need to protect users from that ...
    – caw
    Apr 18, 2014 at 19:04
  • 9
    I think the page you linked was hacked... LOL! the irony
    – KnF
    Mar 16, 2015 at 23:03
  • link provided is not working..
    – Thameem
    May 10, 2021 at 5:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.