angularjs-crypto

angularjs-crypto

AngularJS Module that integrate cryptography functionality offers from the crypto-js project for all http requests and response.

Inprogress update to the new angularjs version but before protractor migration.

##Demo Application

There is demo application that use this library to demonstrate the client side encryption and storing that encrypted data on a server. Retrieve this data back and decrypt on the client side to display the data.

Demo

Source Code

##Versions

Actual there are two versions one for angularjs 1.2 and one for angularjs 1.3.

• angularjs 1.2 use the 1.2 branch it is tested with the latest 1.2.28 version
• angularjs 1.3 use the master branch it is tested with 1.3.13 version

##Feature Requests

• support public private key encryption/decryption maybe by integrate this javascript library
• encrypt / decrypt binary data like images (setup a working example and maybe support it directly with angularjs-crypto) example image encryption

##Code anuglarjs-crypto.js

Dependencies

• AngularJS 1.1.4 + (tested with 1.1.4, 1.2.16, 1.2.28, 1.3.13)
• Crypto-js 3.1.2 AES modul
• Crypto-js 3.1.2 ecb mode

##Bower Versions

• 0.0.3 : support all ciphers that are supported by CryptoJS
• 0.0.4 : support decryption of encoded reponse body
• 1.2.0 : use it for 1.14 + and 1.2.x version of angularjs
• 1.3.0 : use for angularjs 1.3.x

##Development

To simplify the checkout and the setup of a full development environment with all needed dependencies the vagrant-git project is used.

But before we can use the vagrant-git project first install all reequieremnts. It is implemented as nodejs application. Than you can install the vagrant-git project follow this instruction. Usage turorial can be found here.

To setup a development vagrant box for this project execute the command below.

vgit --repo pussinboots/angularjs-crypto 

It will checkpout the vagrant runtime repo and this project itslef.

On Windows without ssh client

vgit --g https --repo pussinboots/angularjs-crypto 

That use https instead of ssh protocol. The ssh protocol is the default used protocol. So the first execution will take a while to download the vagrant base box defined in the Vagrantfile. Than it install the defined dependencies see below. When the login screen appear login with vagrant/vagrant than you have a ready to use development environment for that project up and running. The project will be checkout to the vagrant shared folder so that the Host and Guest operating systems can access the git clone.

The vagrant-git configuration is defined in the .vagrant.yml file. The configuration will be explained on the next line the general explanetion.

repo: 
    - pussinboots/vagrant-devel
folder: /vagrant/project/angularjs-crypto
deps: 
    - sublime3
    - nodejs

repo: defined the following github repo like https://github.com/pussinboots/vagrant-devel as the vagrant runtime repo where the Vagrant configuration is placed that will be used for that project.

folder: is only information for the Developer that will pe display before vagrant startup so that he or sher knows where the angularjs-crypto project root folder can be found.

deps: defined the dependencies to be installed during vagrant provision.

##Install (bower)

• bower install angularjs-crypto
• js file is under the [bower_components/]angularjs-crypto/public/js/lib/angularjs-crypto.js

<script type='text/javascript' src="[bower_components/]angularjs-crypto/public/js/lib/plugins/CryptoJSCipher.js"></script>
<script type='text/javascript' src="[bower_components/]angularjs-crypto/public/js/lib/angularjs-crypto.js"></script>
<script type='text/javascript' src="[bower_components/]angularjs-crypto/public/js/cryptojs/rollups/aes.js"></script>
<script type='text/javascript' src="[bower_components/]angularjs-crypto/public/js/cryptojs/components/mode-ecb.js"></script>

##Install (manual)

• download js file
• download js plugin file
• download cryptojs aes
• download crypto mode-ecb
• added javascript file to your app html file

<script type='text/javascript' src="CryptoJSCipher.js"></script>
<script type='text/javascript' src="angularjs-crypto.js"></script>
<script type='text/javascript' src="aes.js"></script>
<script type='text/javascript' src="mode-ecb.js"></script>

##Usage

• add modul dependency ('angularjs-crypto') to angular

var demoApp = angular.module('demoApp', ['services', 'angularjs-crypto']);

Example Service Definition

• configure the http request for automatic decryption/encryption detection by setting property crypt:true

'use strict';

angular.module('services', ['ngResource'], function ($provide) {
    $provide.factory('Data', function ($resource) {
        return $resource('/assets/config', {}, {
            query: {method: 'GET', isArray: false, crypt: true},
            queryNoCrypt: {method: 'GET'},
            save: {method: 'POST', params: {}, crypt: true},
            saveNoCrypt: {method: 'POST', params: {}}
        });
    });
});

• configure base64Key aes key for decryption/encryption

demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
    cfCryptoHttpInterceptor.base64Key = "16rdKQfqN3L4TY7YktgxBw==";
}])

That's done now all json fields that end with the pattern (default: '_enc') will be encoded in requests and decoded in responses.

Issues

• Report at the github issue tracker

Todos

• configurable error handling strict or elegant mode
• support for http ajax calls missing only ng resource calls are supported (under investigation)
• add support of encrypted cookies that are decrypted on server side

Features

• implements ciphers offered by the crypto-js project
• AES
• DES
• Triple DES
• Rabbit
• RC4, RC4Drop
• configuration the cipher algorithm to use (aes is configured as default) (done see))
• configuration a function that return the aes secret key to use for encryption/decryption
• encoding of complete query and body for requests
• encoding of query parameter fields that end with the pattern
• configuration of encode/decode function so that you can plugin in your own implementation
• configuration of the aes secret key to use for encryption/decryption
• configuration of the field name pattern which determinate which fields will be encrypted/decrypted
• aes encryption/decryption of http json requests and responses
  • only with mode ECB
  • only with padding Pkcs7
• automatic detection of encryption/decryption for json fields based on the naming rule all fields end with pattern (default: :enc) as it comes
  • reponse then decrypt
  • request then encrypt
• only requests / responses of Content-Type: 'application/json;charset=utf-8' will be processed other types will skip crypt processing include auto detection

Configuration

Set the base64Key for aes encryption/decryption

var demoApp = angular.module('demoApp', ['angularjs-crypto']);
demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
 cfCryptoHttpInterceptor.base64Key = "16rdKQfqN3L4TY7YktgxBw==";
}])

Set the field name pattern

var demoApp = angular.module('demoApp', ['angularjs-crypto']);
demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
 cfCryptoHttpInterceptor.pattern = "_enc"; //that is the default value
}])

Set own plugin implementation for encoding and decoding

This make it now possible to simple add other CryptoJs cipher implementations like DES or even other crypto libraries as well. If i find the time than i will add at least the supported cipher from CryptoJs. An example implementation that use Crypto AES can be found here

var demoApp = angular.module('demoApp', ['angularjs-crypto']);
demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
 cfCryptoHttpInterceptor.plugin = {
        encode: function(plainValue, base64Key) {
		    return plainValue;
                },
        decode : function(encryptedValue, base64Key) {
                    return encryptedValue;
                }
    };
}])

connfigure the cipher algorithm to use

demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.DES)
})

• availabe ciphers all that are supported by CryptoJS

demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.AES)
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.DES)
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.TripleDES)
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.Rabbit)
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.RC4)
    cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.RC4Drop)
})

Configure the Content-Type header for encryption/decryption

demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
	cfCryptoHttpInterceptor.contentHeaderCheck = new ContentHeaderCheck(['application/json', 'application/json_enc']);
}

The default configured Content-Type is shown above. That means only for request's and responses that have one of the aboved Content-Type will be enrypted/decrypted. For example if you perform a request with the Content-Type : 'text/plain'. This request will be skipped for encryption even if shouldCrpyt is set to true.

There is also the possibilities to implement your own ContentHeaderCheck that for example always return true. Like that own below.

function ContentTypeDoesntMatterCheck() {
    return {
        check: function(contentType) {
            return true;
        }
    }
}

To use the new implemented ContentHeaderCheck apply following configuration code.

demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
	cfCryptoHttpInterceptor.contentHeaderCheck = new ContentTypeDoesntMatterCheck();
}

Activate console logging

var demoApp = angular.module('demoApp', ['angularjs-crypto']);
demoApp.run(['cfCryptoHttpInterceptor', function(cfCryptoHttpInterceptor) {
 cfCryptoHttpInterceptor.logging = true; //the default value is false. True will log the decrypted and the encrypted values to the console.
}])

Complete encoding of query parameter

$provide.factory('Data', function ($resource) {
        return $resource('/assets/config', {}, {
	        queryFullCrypt: {method: 'GET', isArray: false, fullcryptquery:true}
        });
    });

Complete encoding of body

$provide.factory('Data', function ($resource) {
        return $resource('/assets/config', {}, {
            saveFullCrypt: {method: 'POST',  fullcryptbody:true}
        });
    });

##Example

Key Example

Change the base64Key locally by read it from the rootScope.

var demoApp = angular.module('demoApp', ['angularjs-crypto']);
demoApp.run(function(cfCryptoHttpInterceptor, $rootScope) {
    cfCryptoHttpInterceptor.base64Key = $rootScope.base64Key;
    cfCryptoHttpInterceptor.pattern = "_enc"; //default value but for a better understanding it is also defined here
})

Key Example Function

Define a function which will be used to get the key for encryption/decryption is called for every encryption/decryption process.

var demoApp = angular.module('demoApp', ['angularjs-crypto']);
demoApp.run(function(cfCryptoHttpInterceptor, $rootScope) {
    cfCryptoHttpInterceptor.base64KeyFunc = function() {
        return $rootScope.base64Key;
    }
})

With this html snippet you can edit the key to use only locally.

<input type="text" ng-model="$root.base64Key" />

Example App

Setup a simple example app that use mongodb as persistence layer for storing encrypted data.

Github

Live

Demo

live

The http calls are mocked with angular-mock.

Http Get Example

Http Post Example

Http Get query parameters encoding

Complete query encoding

Complete body encoding

Change base64Key Example

local

Two ways to run the demo app local one with play or second with nodejs.

Dependencies

• play 2.2.3 (optional)
• nodejs 0.10.28
• karma-test runner

Start it with play

play run

Then go to

• Get Example
• Post Example
• Http Get query parameters encoding
• Change base64Key Example
• Complete query encoding
• Complete body encoding

Start it with nodejs

node server.js

Then go to

• Get Example
• Post Example
• Http Get query parameters encoding
• Change base64Key Example
• Complete query encoding
• Complete body encoding

Or run the karma test local with

npm test

Description

This angularjs module is part of the bankapp. The idea is to store encrypted data in a backend and decode it on the client side so that the backend doesn't know what kind of data it stores only the angularjs client and the storage process know the plain data.

If you have question or want to take of the development than write me a mail at [e-mail].

It is a very young project but with the support of wide open source tools like karma and travis it will flow soon i hope.

License

angularjs-crypto is released under the MIT License.