How to Encrypt Password on Client Side using JavaScript

By CampCodes Administrator

Updated on:

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
READ ALSO:   Limit Password Length Using JavaScript
aes encryption and decryption in javascript example aes encryption javascript bcrypt client side cipher encryption in javascript client side encryption and server side decryption client side encryption and server side decryption in php client side encryption javascript client side encryption jquery client side encryption vs server side encryption client side password hashing javascript crypto javascript crypto-js decrypt javascript encrypt a password in javascript encrypt in php and decrypt in javascript encrypt javascript encrypt javascript variable encrypt password in javascript encrypt password using javascript encrypt string in javascript and decrypt in php encrypt string javascript encryption and decryption in javascript encryption between client and server hash decrypter hash password javascript hash password javascript example hash_hmac javascript hashing password javascript hmac sha1 javascript how to encrypt data in javascript how to encrypt json data in javascript how to encrypt password in html how to encrypt password in javascript how to encrypt password in javascript using md5 how to encrypt password using javascript is javascript encryption secure javascript data encryption javascript encrypt file javascript encrypt password javascript encrypt password before sending javascript encryption javascript encryption algorithm javascript encryption and decryption source code javascript encryption example javascript encryption function javascript encryption library javascript encryption online javascript file encryption javascript hash function javascript hash password javascript md5 javascript password encryption javascript password encryption decryption javascript password hash javascript simple encryption javascript simple encryption with key javascript string encryption js encrypt jsaes nodejs crypto password encryption and decryption in javascript example password encryption in javascript password encryption in javascript example sjcl encrypt what is server side encryption

1 thought on “How to Encrypt Password on Client Side using JavaScript”

Leave a Comment