Encryption and Decryption using Javascript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to encrypt and decrypt text using Javascript. Guys, in this article i am using CryptoJS AES library for encryption and decryption using Javascript.
Introduction about CryptoJS AES JavaScript library
CryptoJS AES Javascript library is a Javascript based encryption library use for encryption and decryption on Client end. For learn complete article on CryptoJS AES Javascript library , please follow below link.
https://cryptojs.gitbook.io/docs
HTML
On the HTML page there will be Two Controls, one is text box with the id named txt_input for to enter the input by the user and this text will convert capturing plain text to be encrypted. And other one control is two Button. These buttons will perform encrypting and decrypting function. Here i will assigned Javascript onclick event handler to the buttons. And another control is SPAN for showing encrypted and decrypted text.
HTML Code :
<input id="txt_input" type="text" />
<input type="button" value="Encrypt" onclick="Encrypt()" />
<br />
Encrypted Text:<span id="lbl_encryption"></span>
<hr />
<input type="button" value="Decrypt" onclick="Decrypt()" /><br /><br />
Decrypted Value: <span id="lbl_decryption"></span>
Encryption and Decryption using JavaScript
Encryption
Inside the HTML page i will inherit JS file named crypto-js.min.js
Here i will also define the secret key for the encryption and decryption and converted into a BYTE array using parse method of the CryptoJS Javascript library.
Inside the Encrypt function, the plain text entered by the user from the TextBox and passed using a parameter to encrypt method of CryptoJS Javascript library where all important of compulsory properties has been already 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.
Decryption
Inside the Decrypt function, the encrypted text is captured from the SPAN control and passed using a parameter to decrypt method of CryptoJS Javascript library where where all important of compulsory properties has been already 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 control.
Now Here i am giving complete code for the HTML page. You can copy and paste the whole code on your HTMl page. And enjoy the execution of the whole concept.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
Plain Text:
<input id="txtPlain" type="text" />
<input type="button" value="Encrypt" onclick="Encrypt()" />
<br />
Encrypted Text:<span id=" lbl_encryption "></span>
<hr />
<input type="button" value="Decrypt" onclick="Decrypt()" /><br /><br />
Decrypted Value: <span id="lbl_decryption"></span>
<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("txt_input ").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("lbl_encryption ").innerHTML = encrypted;
}
function Decrypt() {
//Read the Encrypted text.
var encryptedText = document.getElementById("lbl_encryption").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("lbl_decryption").innerHTML = decryptedBytes.toString(CryptoJS.enc.Utf8);
}
</script>
</body>
</html>
Conclusion: In above code, I explained that how to encrypt and decrypt text using Javascript. This code is very helpful for every developer. Bye BYE and take care of yourself Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment