Advanced Encryption in JavaScript Using crypto-js


Advanced Encryption Standard (AES) is a famous and robust encryption method for encrypting data (string, files). Crypto-js is a JavaScript library provided to achieve AES in JavaScript without the help of any other language like Java or C#. Here, we will learn how to encrypt and decrypt the data strings using crypto-js. 

Include the crypto-js library in the HTML file.

<script src="">  
   var enbtn = document.getElementById("encrbtn");  
   var rawdata = document.getElementById("rawdata");  
   var password = document.getElementById("password");  
   var display1 = document.getElementById("display1");  
   var endata = document.getElementById("endata");  
   var password2 = document.getElementById("password2");  
   var display2 = document.getElementById("display2");  
   var debtn = document.getElementById("debtn");  

First, we are going to encrypt sensitive data with a user-defined password. The data is encrypted with the AES method.

Sensitive Data<input type="text" id="rawdata"/>  
Password       <input type="text" id="password"/>  
Encrypted data:: <span id="display1"></span><br/>  
<button type="button" id="encrbtn">Encrypt</button>  
   var ciphertext = CryptoJS.AES.encrypt(rawdata.value, password.value);  
   endata.value =  ciphertext.toString();  
   display1.textContent = ciphertext.toString();  

The 'ciphertext' you get back after encryption isn't a string yet. It's a 'CipherParams 'object. A CipherParams object gives you access to all the parameters used during encryption. Using a CipherParams object in a string context automatically converts it to a string according to the format strategy. The default is an OpenSSL-compatible format.

Then, the decrypted data string uses the same password.

Encrypted String<input type="text" id="endata"/>  
Password       <input type="text" id="password2"/>  
Decrypted data:: <span id="display2"></span><br/>  
<button type="button" id="debtn">Decrypt</button>  
   if(password.value != password2.value){  
   alert('password must same as on encrypted');  
   return false;  
   var Normaltext = CryptoJS.AES.decrypt(endata.value, password2.value);  
   display2.textContent = Normaltext.toString(CryptoJS.enc.Utf8);  

The 'Normaltext' you get after decryption is a Word Array object.

Object encryption

Crypto-js also provide the functionality to encrypt and decrypt objects at a deep level.

var data = [{ foo: bar }, { bar: foo}];   
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');   
var bytes = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');  
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));   


JavaScript is a fast-growing scripting language in browsers, servers (node.js), and databases. So encryption of data using JavaScript is important. Crypto-JS supports AES-128, AES-192, and AES-256. It will pick the variant by the key size you pass in. Crypto-JS also support other Hasher Algorithms, MD, SHA-1, and SHA-2.