In this article I will explain with an example, how to encrypt and decrypt using
JavaScript.
This article makes use of
CryptoJS AES library to perform encryption and decryption using
JavaScript.
CryptoJS AES JavaScript library
CryptoJS AES JavaScript library is a
JavaScript based encryption library used to perform encryption and decryption on Client Side. For complete documentation, please refer the following link.
HTML Markup
The HTML markup consists of following elements:
TextBox – For capturing plain text to be encrypted.
SPAN – For displaying encrypted and decrypted text.
Button – For performing encrypting and decrypting function.
The Buttons have been assigned with the
JavaScript onclick event handler.
Plain Text:
<input id="txtPlain" type="text" />
<input type="button" value="Encrypt" onclick="Encrypt()" />
<br />
Encrypted Text:<span id="lblEncrypted"></span>
<hr />
<input type="button" value="Decrypt" onclick="Decrypt()" /><br /><br />
Decrypted Value: <span id="lblDecrypted"></span>
Encrypting and Decrypting using JavaScript
Inside the HTML Markup, the following JS file is inherited.
1. crypto-js.min.js
Note: For Encryption and Decryption, AES encryption algorithm will be used, where a Symmetric (Same) key will be used for encryption and decryption process.
Firstly, the secret key is defined for the encryption and decryption and converted into a BYTE array using
parse method of the
CryptoJS JavaScript library.
Encrypt
Inside the
Encrypt function, the plain text is captured from the TextBox and passed as parameter to
encrypt method of
CryptoJS JavaScript library where necessary properties are set.
Mode – It defines the mode of the operation. Here it is CryptoJS.mode.ECB (Electronic Codebook).
Padding – It specifies padding mode.
Finally, the encrypted text is displayed using HTML SPAN element.
Decrypt
Inside the
Decrypt function, the encrypted text is captured from the SPAN element and passed as parameter to
decrypt method of
CryptoJS JavaScript library where necessary properties are set.
Mode – It defines the mode of the operation. Here it is CryptoJS.mode.ECB (Electronic Codebook).
Padding – It specifies padding mode.
Finally, the decrypted text is displayed using HTML SPAN element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
//Secret Key.
var secretKey = "$ASPcAwSNIgcPPEoTSa0ODw#";
//Secret Bytes.
var secretBytes = CryptoJS.enc.Utf8.parse(secretKey);
function Encrypt() {
//Read the Plain text.
var plainText = document.getElementById("txtPlain").value;
//Encrypt with AES Alogorithm using Secret Key.
var encrypted = CryptoJS.AES.encrypt(plainText, secretBytes, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
//Display the Encrypted Text.
document.getElementById("lblEncrypted").innerHTML = encrypted;
}
function Decrypt() {
//Read the Encrypted text.
var encryptedText = document.getElementById("lblEncrypted").innerHTML;
//Decrypt with AES Alogorithm using Secret Key.
var decryptedBytes = CryptoJS.AES.decrypt(encryptedText, secretBytes,
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
//Display the Decrypted Text.
document.getElementById("lblDecrypted").innerHTML = decryptedBytes.toString(CryptoJS.enc.Utf8);
}
</script>
Screenshot
![Encrypt and Decrypt using JavaScript]()
Demo
Downloads
