In 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.
JavaScript 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>Download Here
how do you decode the encrypted password on the server side?