Don't Afraid of Source Code

How to encrypt password on client side using Javascript

4

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.
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 the click to 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 Source Code(How to encrypt password on client side using Javascript)
Size: 849 Bytes
Version: V 1.0

Leave A Reply

Your email address will not be published.

4 Comments
  1. Sidharth says

    thank you for sharing…it help us a lot

  2. bidhi says

    how to decrypt the same in php

    1. Anuj Kumar says

      By using MD5

  3. yilkal says

    it is a good idea and thing so always try to greater than this work!

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy