How to encrypt password
How to Encrypt Password on Client Side using JavaScript
Outline: How to encrypt password
Password encryption is a feature that allows users to hide their password from others. It works by encrypting the password and then storing it in the user’s browser. To decrypt the password, the user accesses his browser and enters his password. Password encryption is a highly secure feature as it protects your data from hackers. However, this security comes at the price of slowed browsing speeds since you must encrypt and decrypt your passwords for each page you load.
In this tutorial, we will look at password encryption on the client-side using JavaScript. This will be done using 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: How to encrypt password
<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>
A password field and a hidden field were created in this form. Hidden fields are used to hold the value of an actual password.
<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>
A function encrypt () has been created in the above JavaScript. We can call this function on the click to submit button.
Find Complete Code: How to encrypt password
<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>
