angularjs-crypto

AngularJS module for decrytion/encryption of json in http requests/responses. heroku

Angular Core Dependency: 1.3.13

Module License: MIT

Added by: Sam Deering

GitHub

Repository

pussinboots/angularjs-crypto

Stats

Stars: 85

Watchers: 85

Forks: 30

Author

Frank
Frank

Module Description

angularjs-crypto

Build Status Coverage Status Dependencies Heroku Unit Tests Codio

Gitter chat

Test Results

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.

##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 iit is tested with 1.3.13 version

##Feature Requests

  • support public private key encryption/decryption maybe by integrate this javascript library

##Code anuglarjs-crypto.js

Dependencies

##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/CryptoJSCipher.js"></script>
<script type='text/javascript' src="[bower_components/]angularjs-crypto/public/js/lib/angularjs-crypto.js"></script>
<script type='text/javascript' src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script type='text/javascript' src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/mode-ecb.js"></script>

##Install (manual)

<script type='text/javascript' src="CryptoJSCipher.js"></script>
<script type='text/javascript' src="angularjs-crypto.js"></script>
<script type='text/javascript' src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script type='text/javascript' src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/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

Todos

  • configurable error handling strict or elegant mode
  • support for http ajax calls missing only ng resource calls are supported (under investigation)
  • aggressive console logging is active for development maybe make it configurable

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

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

Start it with play

play run

Then go to

Start it with nodejs

node server.js

Then go to

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 [email protected]

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.

Module stats last updated: 2017-06-10 15:00:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!