Javascript Check Password Strength

[Nelida]

Aregular expression is a sequence of characters that define a search pattern. Usually, such patterns are used by string searching algorithms for find or find and replace operations on strings, or for input validation.

The Regular Expressions do a fantastic job of minimizing the length of the code. This JavaScript function checks the strength of a password and whether foiling it is easy, medium, difficult, or extremely difficult to guess. As the person types, it displays tips on encouraging it to be stronger. It validates the password based on:

Martech Zone was founded by Douglas Karr and operates under his company, DK New Media, LLC, a proud Veteran-Owned and Operated organization. Douglas is a digital transformation speaker and consultant.

The Martech Zone is owned and operated by DK New Media, LLC, a company I started in 2009. After working with virtually every major online marketing department in my tenure at ExactTarget and launching Compendium, I knew there was a great demand for my expertise and guidance within such a complex industry.

DK New Media oversees my consulting, publications, podcasts, workshops, webinars, and speaking opportunities. Highbridge, my agency with two other partners, helps companies maximize their investment in sales, marketing, and related products. We offer integration, migration, training, strategic consulting, and custom development.

As a web developer, it is an inescapable obligation to protect your users' accounts and privacy. A study shows that 22% of social media users have fallen victim to a security-related incident. The Pony botnet affected Facebook, Google, Yahoo, and other social media users, stealing more than 2 million user passwords.

Not sure which password strength check to use? Here is a hand-crafted list of 10 best JavaScript or jQuery based password strength checkers from which you can choose to strengthen your users' passwords and protect your users' accounts. Have fun with it.

I have a web application and I have implemented a check on the browser to ensure that a user sets only strong passwords.A company that we have called to check security vulnerabilities pointed out that this is not enough because using some hacking a user can ignore the check and set a weak password.

I do not understand how this can be a security vulnerability. Why would someone hack the security check just to set a weak password? Someone expert enough to hack the web application will understand the importance of using a strong password.

My point is: given that, to have an acceptable user experience, we have to do the check on the client side, there has to be a good reason, a real use case that creates a possible vulnerability to justify a duplication of the check on the server side.

Reading the answers, so far, it seems that the only use case that can create a vulnerability is when the javascript does not work. This does not seem a problem for me because the submit button is disabled by default.

The rule when writing a server application is simply never trust what comes from client. Checks done client side are great as they allow a nice user experience with nice popups and immediate display. But as anything can happen, from a disabled javascript browser to a user using a scripting language to simulate a browser, all checks must be done (again) server side.

BTW: you as the dev can propose solutions, but the client does express requirements. If you do not agree with them you can ask for clarification and propose other ways, but in the end the client will decide.

If you work in a big company and you have to change your password every 2 or 3 months a few people will start bypassing the client-side check of password strength to use shorter or better to memorize passwords.If these passwords are used to derive cryptographic keys, e.g. for multi-user encryption of files, it becomes horrible...

Let's say a user downloads an adblocker like Adblock Plus or uBlock Origin. Then, due to the scripts being misconfigured, one of these adblockers accidentally blocks the script you were using to verify password security. Now the user can enter 1234 as a password without any server-side checks in place to prevent it.

Or alternatively, maybe local caching gave the user an older version of your script. Maybe they've saved your webpage as a static HTML file on their desktop. Maybe the user's PC has a virus that altered the content of your script. As the common saying goes...

You mention that both the check & the enabling of the submit button are one script, so it's safe even if some scripts are loaded and others aren't. How sure are you that those two functions will always be in the same script?

I suppose what I'm saying is that it sounds like, as things stand right now, it would mean someone intentionally doing something they know is a bad idea in order for them to get a bad password, and you're ok with that; you're trying to prevent accidents, not intentional stupidity.

The thing that worries me is that if this script ever gets refactored & split up, or intentional stupidity becomes your problem, or some attacker writes a client side script ostensibly to help people,... then you're in trouble.

One possible problem is that it only takes one wise guy (that might be knowledgeable enough to use that technique to use a password that fails the checker and is nevertheless secure!) to find a way to hack it - and distribute the hack to a few other people (that s/he probably deems responsible enough) that will eventually give it to people against whose lack of security competence the solution was supposed to guard.

Whatever rules you set up, they must be enforced at the server level in every case. This is true for password setting, and for mandatory fields in forms for example (e.g. if a phone number is required when signing up, it should be checked in the server).

But in any cases, you cannot rely on the client at all. Some people will block JS. Some people will block flash. At some point you may open your API to third parties, which may or may not enforce your rules for you.

In this article we'll see how I made a simple password checker which checks whether the password is strong or not. You might have seen this type of checker or validation in most of modern websites. So let's see how I made it.

In the above preview, you can see what exactly we will make. On the page there is a password field and you can type your password simply there. But when you focus it, a validation checklist will popup which tells what your password should include. As soon as your start typing the checklist will check the condition whatever gets satisfied. A cherry on top, there is eye icon on right where you can click to see password. Below you can find a Video tutorial where I am making this project step by step.

So if you just want a quick explanation of how everything is working, here it is. I am using CSS :focus selector to show/hide the checklist box and under the hood I am using regex in Javascript to validate the password everytime, there is a keyup event triggers using regex's test() method. And about the eye icon, its basically toggling the password input type to text from password to text on click event.

So let's start with the basic HTML structure. So create an index.html file along with style.css and app.js file. Then just add a basic HTML structure boiler code and link the CSS and JS file. Something like this ?

So since we have the password input now, we need the validation checklist box as well it order to show the user in frontend what conditions passwords should match. So inside the div with class name password-input-box make another div which will be the box of checklist and inside it use ul to create an unordered list to create the checkpoints. Something like this ?

The first thing we can do in JS is, toggling our password's input type from password to text to back to password. For that we first have to select the icon as well as the input in JS. Afterwards we can add click event to icon using addEventListener method and in callback, we can use if and else to check whats password type currently is and what we have to change.

If you read above JS code, you will see validationRegex variable, that variable is an array of regex expressions for each conditions we want for the password. So inside the array, we have objects with key regex and the value of that key is the expression. One thing you have to keep in mind while making this array is that you make sure that the expression's index number is same as the condition in HTML. Which is, if I have for 8 characters long in HTML file the the first item in the array should be the regex expression for 8 characters, otherwise you will see in UI that wrong condition is getting checked.

Anyway coming again to the javascript, once we have the array of regex. I am just looping through it whenever there is a keyup event happening on passwordInp. And inside it we are selecting each regex expression and using test() method to validate the password value and storing the boolean value inside isValid variable.

So after all the steps, you will have a fully working password validation checker at the end. I hope like this article and found this helpful. Thanks for reading this article. If you any suggestion or any doubts or anything to share feel free to leave it in comments. If you are interested in learning how to make some fully working websites you can checkout my YouTube channel.

Not a criticism of your project, which is a really nice UI control, but if you want to actually test password strength, a list of rules like this is a bad way of doing it and often just incentivizes using weak passwords that fit the minimum requirements but are still needlessly difficult to remember. For example, P@ssw0rd is an extremely weak password that passes; whereas musician scold fold pet is a very strong password that fails (generated via correcthorsebatterystaple.net, inspired by Password Strength - XKCD).

3a8082e126