Encryption and Decryption using Crypto-js in Angularjs and Vector

This quick angular tutorial help to encrypt and decrypt variable using crypto.js. I am using Angularjs Crypto angular plugin for encryption and decryption.Crypto.js is very powerful library which is is used to encrypt and decrypt variable, forms data and any header parameters.You can create encrypted string using your salt code so that user could not decrypt your data.

Normally programmer are using BASE64 string which can decrypt easily without any effort because they are using same salt or algorithm not user defined.There are a lot of online website providing functionality to decrypt BASE64 string.

salt string is a user defined public key which is uses for encryption and decryption data.So both party have same public key(salt) to encrypt and decrypt data.

We are using below Files,The details are:

Index.html - This file will responsible to display encrypted and decrypted string.
app.js - This file responsible to encrypt and decrypt string using crypto.js and send data to html view file.
crypto lib - This will contains all crypto-js library files and use to encrypt/decrypt data.

Step 1: Include all necessary library files in header of index.html.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
     	 	 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="app.js"></script>
     <script src="assets/angularjs-crypto.js"></script>
    <script src="assets/CryptoJSCipher.js"></script>
      <!-- cryptojs aes files -->
    <script type="text/javascript" src="assets/aes.js"></script>

Step 2: Created UI for display source,encrypted and decrypted string.

  



<div class="container">



<h1>Hello</h1>






<ul class="list-unstyled">



 	<li><strong>Source String : </strong> {{source_string}}</li>






 	<li><strong>Encrypted String : </strong> {{ciphertext}}</li>






 	<li><strong>Decrypted String : </strong> {{descrString}}</li>



</ul>



</div>

Step 3: We will create angularjs application controller file and inject all dependency including crypto.js .

TestApp = angular.module('TestApp', ['TestApp.controllers', 'angularjs-crypto']);

TestApp.run(function(cfCryptoHttpInterceptor, $rootScope) {
    $rootScope.base64Key = CryptoJS.enc.Base64.parse("2b7e151628aed2a6abf7158809cf4f3c");
  $rootScope.iv = CryptoJS.enc.Base64.parse("3ad77bb40d7a3660a89ecaf32466ef97");
})
  
angular.module('TestApp.controllers', []).controller('testController', function($scope, $rootScope) {
      $scope.source_string = 'parvez.alam';
      
      console.log('source String = ' + $scope.source_string);
      var encrypted = CryptoJS.AES.encrypt(
                $scope.source_string,
                $rootScope.base64Key,
                { iv: $rootScope.iv });
      console.log('encrypted = ' + encrypted);
      
       $scope.ciphertext = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
       console.log('ciphertext = ' + $scope.ciphertext);
       
       var cipherParams = CryptoJS.lib.CipherParams.create({
                ciphertext: CryptoJS.enc.Base64.parse($scope.ciphertext)
                });
       var decrypted = CryptoJS.AES.decrypt(
                  cipherParams,
                  $rootScope.base64Key,
                  { iv: $rootScope.iv });
                  $scope.descrString = decrypted.toString(CryptoJS.enc.Utf8);
      console.log('decrypted='+$scope.descrString);
});

Here we configured crypto using .run() angular method.We have defined base64 salt and vector on-load of angular application.We have passed source string and encrypted using AES algorithm.

You can see that i am using CryptoJS.AES.encrypt() method for encrypt data and create ciphertext of encrypted data.You can send this encrypted data in request to server.

You can decrypt this data using CryptoJS.AES.decrypt() method.First of all You need to create cypher params using encrypted ciphertext and then pass this cypher params with vector string to crypto-js decrypt method.

You can download source code and Demo from below link.