AngularJS-Crypto integrates the functionalities from CryptoJS and is required to use it together with ngResource. It allows encrypting the properties of the object based on a keyword or encrypt the whole object before sending over to the server. For more details about AngularJS-Crypto and how to integrate it to your project, you can refer from this link https://github.com/pussinboots/angularjs-crypto
Ensure that you have all the necessary scripts. The following are the list of required scripts.
- angular.js
- angular-resource.js
- angularjs-crypto.js
- CryptoJSCipher.js
And the following 2 scripts for using AES encryption with ECB mode.
- aes.js
- mode-ecb.js
In your angular module, add the dependency angularjs-crypto.
[Javascript]
angular.module('sampleModule', ['ngResource', 'angularjs-crypto'])
Here are a few things you can do in the run blocks for initializing the crypto.
- Set the encryption key to base64Key or use the function base64KeyFunc for dynamically change the key. The key needs to be in base64 format.
- Define the type of encryption algorithm.
- Define the pattern and only encrypt the object's property that contains or match the pattern.
So in this case, the algorithm used is AES and encrypt / decrypt the object's property that contains the name "content".
[Javscript]
.run(['$rootScope', 'cfCryptoHttpInterceptor', function ($rootScope, cfCryptoHttpInterceptor) {
cfCryptoHttpInterceptor.base64KeyFunc = function () {
return $rootScope.base64Key;
}
cfCryptoHttpInterceptor.plugin = new CryptoJSCipher(CryptoJS.mode.ECB, CryptoJS.pad.Pkcs7, CryptoJS.AES)
cfCryptoHttpInterceptor.pattern = "content";
}])
Next, create a factory to implement $resource to invoke the services that are created with Web API. The following is for encrypting / decrypting object's property only. Encryption / decryption will only be enabled when crypt is set to true.
[Javascript]
$resource('sample', null, {
post: {
method: 'POST',
crypt: true
}
});
The following is for encrypting / decrypting whole object. Encryption will only be enabled when fullcryptbody is set to true and decryption will be enabled when decryptbody is set to true.
transformRequest is used to intercept the content before sending it to the server. In this case, for the Web API to understand the string value from the body, the content will be supplied with the double quote added at the beginning and at the end before sending to server.
transformResponse is used to intercept the result received from the server. In this case, the value returned through Web API contains double quote. Before decrypting the content, the double quote located at the beginning and at the end of the content needs to be removed.
[Javascript]
$resource('sample', null, {
post: {
method: 'POST',
fullcryptbody: true,
decryptbody: true,
transformRequest: function (data, headers) {
return '"' + data + '"';
},
transformResponse: function (data, headers) {
return data.slice(1, -1);
}
}
For changing the encryption key, just assign the value to the base64Key. The function base64KeyFunc will be called whenever $resource is invoked.
[Javascript]
$scope.$root.base64Key = '16rdKQfqN3L4TY7YktgxBw==';
If you want to know how the server decrypt the content sent from client and encrypt it back to client. You can check out from the sample code here https://onedrive.live.com/?id=E6612168B803803D%21337&cid=E6612168B803803D&group=0&parId=E6612168B803803D%21165&authkey=%21AFMOI7ZQ%2DtGFxKM&action=locate
No comments:
Post a Comment