How To Encrypt and Decrypt string in Angularjs using AES and Crypto-js

This tutorial help to encrypt and decrypt string using Cryptojs and AES. Cryptojs is a very popular library that is used to convert strings into encrypted text and vice versa.

I am using Angularjs Crypto angular module for encryption and decryption data. You can encrypt and decrypt strings, forms data, and any header parameters.

You can create your own public salt key which will secure your encrypted data. The SALT string is a user-defined public key that will be used for the encryption and decryption of data/string.

Also Checkout other tutorials of angular grid,

• Simple Example and Demo of Multistep form Using Angularjs
• Example of In-Place Editing using Angular Xeditable
• Simple Example of Angularjs Datatable
• Best Free Angularjs Grid & Table Plugin Examples

I am using the following files for Cryptojs Example

• Index.html – This file will be responsible for displaying encrypted and decrypted strings in HTML format.
• app.js – This file is responsible for encrypting and decrypting strings using crypto.js and send data to html view file.
• crypto lib – This will contain all crypto-js library files and be used to encrypt/decrypt data.

We are using cryptojs Hex method to encode key and iv. I am using the below key and iv,

• key : 0123456789abcdef0123456789abcdef
• iv : abcdef9876543210abcdef9876543210

We will set above iv and key to $rootscope so that we can access these variables anywhere from the application.

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
		
		<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.Hex.parse('0123456789abcdef0123456789abcdef')
    $rootScope.iv = CryptoJS.enc.Hex.parse('abcdef9876543210abcdef9876543210');
})
	
angular.module('TestApp.controllers', []).controller('testController', function($scope, $rootScope) {
	$scope.source_string = 'Adam,John';

	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);
});

I am using CryptoJS.AES.encrypt() method for encrypt data and create a cipher-text of encrypted data.

We will use this encrypted data in decrypt method. The Cryptojs provided CryptoJS.AES.decrypt() method to decrypt string from encrypted string.

You can download source code and Demo from below link.