PHPGurukul

How to encrypt password on client side using Javascript

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 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

Anuj Kumar

This is Anuj Kumar. I’m a professional web developer with 4+ year experience. I write blogs in my free time. I love to learn new technologies and share with others.
I founded PHPGurukul in September 2015. The main aim of this website to provide PHP, Jquery, MySQL, PHP Oops and other web development tutorials.
.

Recommended Tutorials for you


1 comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.