Javascript Web Development

How to encrypt password on client side using Javascript

In this tutorial iIwill discuss about password encryption on client side using javascript. For client side encryption you  have to  used two javascripts .

<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

Recommended Tutorials for you


Related posts

How to create pagination in PHP

Anuj Kumar

PHP Email Verification Script

Anuj Kumar

How to upload and validate a image in php

Anuj Kumar

How to get Current Indian time in PHP

Anuj Kumar

How to delete multiple records in PHP

Anuj Kumar

How to get yesterday and tomorrow date in php

Anuj Kumar

How to Salt & Hash a Password using Sha256

Anuj Kumar

Password Hashing in PHP

Anuj Kumar

1 comment

yilkal February 8, 2019 at 8:04 pm

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

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

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