Anuj
KumarIn this tutorial, I will discuss password encryption on the client side using javascript. For client-side encryption, you have to use two javascript.
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script> <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
HTML FORM
<form class="form-signin" method="post" name="signin" id="signin"> <input type="password" name="password" id="password" placeholder="Password" id="password" value="" /> <input type="hidden" name="hide" id="hide" /> <div style="color:red" id="err"></div> <input type="submit" name="login" type="submit" onclick="return encrypt()" value="Submit" > </form>
In this form I created one password field and one hidden field. Hidden field
is used for hold the value of actual password.
Javascrit for encryption
<script>
function encrypt()
{
var pass=document.getElementById('password').value;
var hide=document.getElementById('hide').value;
if(pass=="")
{
document.getElementById('err').innerHTML='Error:Password is missing';
return false;
}
else
{
document.getElementById("hide").value = document.getElementById("password").value;
var hash = CryptoJS.MD5(pass);
document.getElementById('password').value=hash;
return true;
}
}
</script>
In the above javascript i created a function encrypt(). I call this function on onclick submit button.
Here is the full code that we have written during this tutorial:
<html>
<head>
<title>Encrypt Password on client Side</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script>
function encrypt()
{
var pass=document.getElementById('password').value;
var hide=document.getElementById('hide').value;
if(pass=="")
{
document.getElementById('err').innerHTML='Error:Password is missing';
return false;
}
else
{
document.getElementById("hide").value = document.getElementById("password").value;
var hash = CryptoJS.MD5(pass);
document.getElementById('password').value=hash;
return true;
}
}
</script>
</head>
<body>
<form class="form-signin" method="post" name="signin" id="signin">
<input type="password" name="password" id="password" placeholder="Password" id="password" value="" />
<input type="hidden" name="hide" id="hide" />
<div style="color:red" id="err"></div>
<input type="submit" name="login" type="submit" onclick="return encrypt()" value="LOGIN" >
</form>
</body>
</html>View
Demo
Download Source Code(How to encrypt password on
client side using Javascript)
Size:
849 Bytes
Version: V
1.0
697
Downloads
it is a good idea and thing so always try to greater than this work!