How To Encrypt Password On Client Side Using JavaScript | Free Source Code

How to Encrypt Password on Client Side using JavaScript

encrypt a password in 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.
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
Facebook Comments
https://www.campcodes.com/

This is a free education portal. You can use every source code in your project without asking permission to the author. Share our website to everyone to make our community of programmers grow more.

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Leave a Reply

Your email address will not be published.