How to Encrypt Password on Client Side using JavaScript

Updated on: February 15, 2021

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