I want to create a script so that in the registration form I have, check the most used and less secure passwords.
That is, check for example the passwords written by the users and not allow to advance in the registry, as for example the following passwords:
The idea is, to have more security in the accounts of users who create accounts on my site
Maybe this might help.
In your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="search-box">
<div class="caption">
<h3>Advance Password Validation</h3>
<p>Find to All</p>
</div>
<form action="" class="loginForm">
<div class="input-group">
<input type="text" id="name" class="form-control" placeholder="Full Name">
<input type="password" id="paw" class="form-control" placeholder="Password">
<input type="submit" id="submit" class="form-control" value="Submit">
</div>
</form>
</div>
</div>
<div class="col-md-4">
<div class="aro-pswd_info">
<div id="pswd_info">
<h4>Password must be requirements</h4>
<ul>
<li id="letter" class="invalid">At least <strong>one letter</strong></li>
<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
<li id="number" class="invalid">At least <strong>one number</strong></li>
<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
<li id="space" class="invalid">be<strong> use [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong></li>
</ul>
</div>
</div>
</div>
</div>
</div>You can style with some css:
.alignleft {
float: left;
margin-right: 15px;
}
.alignright {
float: right;
margin-left: 15px;
}
.aligncenter {
display: block;
margin: 0 auto 15px;
}
a:focus { outline: 0 solid }
img {
max-width: 100%;
height: auto;
}
.fix { overflow: hidden }
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px;
font-weight: 700;
}
html,
body { height: 100% }
a {
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
color: #333;
}
a:hover { text-decoration: none }
.search-box{margin:80px auto;position:absolute;}
.caption{margin-bottom:50px;}
.loginForm input[type=text], .loginForm input[type=password]{
margin-bottom:10px;
}
.loginForm input[type=submit]{
background:#fb044a;
color:#fff;
font-weight:700;
}
#pswd_info {
background: #dfdfdf none repeat scroll 0 0;
color: #fff;
left: 20px;
position: absolute;
top: 115px;
}
#pswd_info h4{
background: black none repeat scroll 0 0;
display: block;
font-size: 14px;
letter-spacing: 0;
padding: 17px 0;
text-align: center;
text-transform: uppercase;
}
#pswd_info ul {
list-style: outside none none;
}
#pswd_info ul li {
padding: 10px 45px;
}
.valid {
background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px;
color: green;
line-height: 21px;
padding-left: 22px;
}
.invalid {
background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px;
color: red;
line-height: 21px;
padding-left: 22px;
}
#pswd_info::before {
background: #dfdfdf none repeat scroll 0 0;
content: "";
height: 25px;
left: -13px;
margin-top: -12.5px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 25px;
}
#pswd_info {
display:none;
}Your javascript (where magic will happen) will look like this:
$(document).ready(function(){
$('input[type=password]').keyup(function() {
var pswd = $(this).val();
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
//validate space
if ( pswd.match(/[^a-zA-Z0-9\-\/]/) ) {
$('#space').removeClass('invalid').addClass('valid');
} else {
$('#space').removeClass('valid').addClass('invalid');
}
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});Hope this helps clear up the ideas.
Reference: link
First you have to determine what a strong and weak password is, this is already the most obvious start. There are several types of implementations, here you can see an example comparing three different passwords in several different services:
Irecommend read the full explanation here , just where have this image.
Dropbox has made available its open source password analysis system, you can see here . It has implementations in several different languages.
If you want a list with more options:
If you want a comparison, see here .
Measuring password strengths is relative, by me extremely flawed. The strength of the password will be measured by a standard, a criterion that you believe is safe. Even so there is so much difference the result of a library and another library. The problem is that the attacker may not follow his pattern. It is impossible to determine the strength of a password if the attacker's technique is unknown.
In addition, the "correcthorsebatterystaple" password may not be considered good, for example, Bruce Schneier , this is the same password that Dropbox's ZXCVBN considers safer.
Personally I believe that the most important thing is to allow the user to use 2FA, preferably FIDO U2F and for now also accept the TOTP. This will be the main factor if the person discovers the password will be barred by the second authentication.
Remember to save the password correctly (using Argon2, BCrypt, Scrypt or PBDKF2, with high difficulties), this will delay offline attacks if your database has been compromised.