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.

angularjs-crypto

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.

Select Code
1
2
3
4
5
6
7
8
<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.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body ng-app="TestApp" ng-controller="testController">
    <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>
</div>

</div>
</body>
</html>

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

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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.

  • umesh katakdhond

    How to Decrypt CryptoJS.AES.encrypt value in Laravel 5.

    • U need to find aes lib file for laravel then u can dcrp code

  • Valerio Radice

    How I can decrypt in PHP ? Do you hase some examples?

    • you need to search aes lib then you can design

    • you need to search aes lib for php then u can decrypt

  • anarchist

    Your encryption key is visible to anyone by downloading your angular files. Then what’s the point of this encryption?

    • yes , u need to use server side script which will encrypt string and send u encrypted string, which can use that string in angular code.ie. i am using laravel, i ll keep all key in .env file and send source string to laravel using angular HTTP, laravel encrypt that string and revert back encrypted string, which we will use for further req.