Build a Simple Password Strength Checker

Providing instant feedback is the in-thing right now. Why limit yourself to checking usernames and email addresses? Why not extend this to provide quick visual feedback about the strength of the password the user has input? Today, we'll take a look at how to create a simple password strength checker using regular expressions and a simple algorithm.

As most security experts will tell you, the user is always the weakest link. Even the most secure systems are vulnerable when a user chooses an extremely ill-advised password. With that in mind, the recent trend seems to be providing quick feedback to the user regarding the strength of the password so the user can extend or modify the password to make it more secure.

Today, we are going to use the jQuery library, a bunch of regular expressions, and a very simple algorithm to create a basic password strength checker. Interested? Let's get started right away! Here is a demo of what we are trying to build today:

Design Goals

Our design goals for this specific functionality are relatively small.

• Provide visual feedback to the user regarding the strength of their password.
• The feedback has to be instantaneous. This means no clicking on a button to test the strength.
• The trigger event can be any of the keyboard events. I've chosen keyup event of the input box.
• Let the event handler check the input but delegate everything else to individual helper methods.
• The helper methods should take care of parsing the input and analyzing it, computing the complexity and printing out the results.
• Make sure the event handler fires off the helper methods only if the length of the input is greater than the expected minimum so as to not waste CPU cycles on invalid entries.
• Return control to the event handler in case anything else needs to be done.

The Algorithm

In the interest of keeping this write-up succinct and approachable, I've decided to go with a very basic algorithm. The algorithm analyzes the string, giving bonuses for extra length and using numbers, symbols, and uppercase letters, and penalties for letter- or number-only inputs. We aren't going to look at checking the input against a dictionary since this is out of the scope of the article.

First, we check the length of the input string. If it's greater than the minimum length, give it a base score of 50. Else make it 0. Next, iterate through each character of the string and check if it is a symbol, number, or uppercase letter. If so, make a note of it.

Then check how many extra characters the string has over the recommended minimum, and grant a bonus for each character. Also grant a bonus if the string contains a combination of uppercase letters, numbers, and symbols, or all three. Grant a bonus for the presence of each of them.

Check if the string only contains either lowercase letters or numbers and, if so, penalize.

Add up all the numbers and decide the strength of the password accordingly.

That's the long and short of the algorithm. It's not going to be exceedingly complex, but it will catch a lot of bad passwords. You'll understand this better once we see it in code.

Core Markup

The HTML markup of the demo page looks like so:

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

Disregard all the usual markup. Do notice the input element with an id of div element with an id of div element with an id of div to message class will contain a message about penalties, so we have made it bold and red in color.

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

JavaScript Implementation

Now that we have a solid framework and some basic styling in place, we can start coding up the required functionality. Do note that we make extensive use of jQuery. Feel free to link to Google's CDN if necessary.

Variables and Event Handling

Since a lot of number juggling is going to go on, we need a bunch of variables to hold the values. Since this is a demo and not production code, I decided to declare the variables as global and access them through the helper methods instead of declaring them internally and then passing them to the functions.

let baseScore = 0;<br>let score = 0;<br>const minPasswordLength = 8;<br><br>const complexity = document.querySelector("#complexity");<br>const passwordInput = document.querySelector("#password");<br><br>let num = {<br>  excess: 0,<br>  upper: 0,<br>  numbers: 0,<br>  symbols: 0<br>};<br><br>let bonus = {<br>  excess: 3,<br>  upper: 4,<br>  numbers: 5,<br>  symbols: 5,<br>  combo: 0,<br>  onlyLower: 0,<br>  onlyNumber: 0,<br>  uniqueChars: 0,<br>  repetition: 0<br>};<br>

We have three constants. The first one, called input element and the num, holds the number of extra characters, uppercase characters, numbers, and symbols. We do the same for the second object, called num object holds the number of characters, while the checkVal function will be called whenever there is a passwordInput element.

The Event Handler

Let's begin by writing the code for our event handler callback function. We first get the password that was entered by the user and then do some variable initialization within the outputResult() function, which takes care of making sense of the computed computations. We'll see how it works later.

Analyzing the Input

We will now define the match() method lets us match a string against a regular expression. If you are new to regular expressions, I suggest you read Vasili's great article about must-know regular expressions.

Next, we have to determine the difference between the length of the input string and the specified minimum length of the password. This gives us the excess number of characters to play around with.

We then check if the string has uppercase, numbers, and symbols. If so, grant a bonus. We also check to see whether it has combinations of two of them and grant a smaller bonus if so.

Finally, we check to see whether the string is flat: whether it contains only lowercase letters or only numbers. We check this with a regular expression and, if so, penalize the password for this practice.

Calculate the Complexity

Calculating the complexity is relatively easy as we just have to do simple addition and multiplication of the values we assigned to our variables earlier. We add the base score to the product of the number of excess characters and its multiplier. We do the same for uppercase letters, numbers, and symbols. We then add a bonus for combinations, if present, and add penalties if the string is flat.

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

Updating the UI

Now that all the computation is behind us, we can update the UI to reflect the changes. Here are each of the states.

We will define two functions here. The main function called div, the classes to be removed, and the classes to be added. The helper function called default class to change its background color back to its original black.

If it's less than the minimum specified length, we change the text accordingly and add a weak.

As the score increases, we change the text accordingly and add the necessary classes. Feel free to change the baseline scores for each rating. I just put in unscientific values to get the demo going.

Updating the Detailed Breakdown

 

With the main result updated, we can look at updating the stats now.

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

This part is not as confusing as it looks. Let me explain.

Instead of updating the individual values for the detailed results, I've resorted to just updating the complete HTML value of the container. I know it's going to be sluggish when the number of these boxes adds up, but accessing each element individually and then updating its value for a tiny demo seemed to be rather counter-productive. So run with me here.

This is just like injecting regular HTML into an element, except that we've placed a couple of variables inside to enable the details to be updated instantaneously. Each value gets a init() function isn't useful just for the initial value assignment. It actually takes care of resetting the score and penalty values after every analyzeString() function, and you will be good to go.

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

Let's see what is going on here. We begin by converting our entire password to lowercase letters. After that, we convert it into a size property to get the number of unique characters. If the number of unique characters is less than or equal to 3, we set the value for the analyzeString() function to check for repeating patterns. This will rely on regex and check if a sequence of 3 or more alphanumeric characters is being repeated in the password.

We will add the following code at the bottom of our checkRepetition() function:

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

We are simply using the test()<code>test() method on the input password, and it returns true whenever there is a repeating pattern of three or more characters.

In the above image, you can see that we have successfully tackled the issue of repeating character sequences. However, I have given an example of another limitation of the password strength checker. 

You can see that Pa$$W0rd$ turns up as a secure password, while in fact it'll be broken pretty soon. This is due to the simplicity of our algorithm here. We don't check for character replacements or common passwords or patterns for that matter. Doing such things would increase the difficulty of this tutorial while reducing its approachability, both of which I didn't want for this particular write-up.

Looking the input up against a dictionary is really out of the scope of this article and would require either a huge dictionary downloaded to the client side or hooking it up to a server-side system to do that. Again, I really wanted to avoid both of them this time.

Conclusion

And there you have it: how to add a user-friendly functionality, the ability to let users know the strength of a password they just entered, to your projects. Hopefully you've found this tutorial interesting, and this has been useful to you. Feel free to reuse this code elsewhere in your projects!

This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials and to learn about new JavaScript libraries.

The above is the detailed content of Build a Simple Password Strength Checker. For more information, please follow other related articles on the PHP Chinese website!