Advanced Encryption in JavaScript Using crypto-js

Introduction

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

Include crypto-js library to the HTML file.

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptojs/3.1.2/rollups/aes.js">  
  2. </script>  
  1. <script>  
  2.    var enbtn = document.getElementById("encrbtn");  
  3.    var rawdata = document.getElementById("rawdata");  
  4.    var password = document.getElementById("password");  
  5.    var display1 = document.getElementById("display1");  
  6.    var endata = document.getElementById("endata");  
  7.    var password2 = document.getElementById("password2");  
  8.    var display2 = document.getElementById("display2");  
  9.    var debtn = document.getElementById("debtn");  
  10. </script>  

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

  1. Sensitive Data<input type="text" id="rawdata"/>  
  2. Password       <input type="text" id="password"/>  
  3. Encrypted data:: <span id="display1"></span><br/>  
  4. <button type="button" id="encrbtn">Encrypt</button>  
  5.   
  6. <script>  
  7.    enbtn.addEventListener("click",function(e){   
  8.    var ciphertext = CryptoJS.AES.encrypt(rawdata.value, password.value);  
  9.    endata.value =  ciphertext.toString();  
  10.    display1.textContent = ciphertext.toString();  
  11.    })  
  12. </script>  
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. When you use a CipherParams object in a string context, it's automatically converted to a string according to the format strategy. The default is an OpenSSL-compatible format.

Then, the decrypted data string uses the same password.

  1. Encrypted String<input type="text" id="endata"/>  
  2. Password       <input type="text" id="password2"/>  
  3. Decrypted data:: <span id="display2"></span><br/>  
  4. <button type="button" id="debtn">Decrypt</button>  
  5.  
  6. <script>  
  7.    debtn.addEventListener("click",function(e){  
  8.   
  9.    if(password.value != password2.value){  
  10.    alert('password must same as on encrypted');  
  11.    return false;  
  12.    }    
  13.    var Normaltext = CryptoJS.AES.decrypt(endata.value, password2.value);  
  14.    display2.textContent = Normaltext.toString(CryptoJS.enc.Utf8);  
  15.    });  
  16.   
  17. </script>  
The 'Normaltext' you get after decryption is a Word Array object.
 
 
 
Object encryption

Crypto-js also provides the functionality to encrypt and decrypt objects in a deep level.

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

Summary

JavaScript is 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 size of the key you pass in. Crypto-JS also support other Hasher Algorithms MD, SHA-1 and SHA-2.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now