Handle Encrypt-Decrypt

Hi Friends, This is Lakshman here.

Welcome back to the Series "Angular Best Practices".

Today, We will go through about handling Encryption & Decryption on App.

Encrypt & Decrypt

As we develop the application probably, we will store some values on Session Storage or Local Storage.

For Implementing, the packages required are

* crypto-js
* @types/crypto-js

Shown as below,

"dependencies": {
    ...
    "@types/crypto-js": "^4.0.1",   
    "crypto-js": "^4.0.0",
    ...
  }

We are required to set the EncryptKey for Encrypt-Decrypt the value. It's better to configure on environment.ts file as below,

export const environment = {
  production: false,
  hmr: true,
  version: env.npm_package_version,
  ...
  EncryptKey: '<Key for Encrypt or Decrypt Values.>',
  ...
};

For Enryption & Decryption we have numerous options such as,

* AES Encryption & Decryption
* Triple DES Encryption & Decryption

Here, we are going to use AES Encryption.

For Encryption & Descryption Service as below,

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';
import { environment } from '@env/environment';

@Injectable({
  providedIn: 'root',
})
export class EncrDecrService {
  private _Keys = environment.EncryptKey;

  constructor() {}
//#region AES Encryption & Decryption

  // The set method used for encrypting the value.
  setAES(value: string) {
    const key = CryptoJS.enc.Utf8.parse(this._Keys.substring(0, 16));
    const iv = CryptoJS.enc.Utf8.parse(this._Keys.substring(0, 16));
    const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(value.toString()), key, {
      keySize: 128 / 8,
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });

    // const _rtnVal = JSON.stringify(encrypted.toString());
    const _rtnVal = encrypted.toString();
    return _rtnVal;
  }

  // The get method is used for decrypt the value.
  getAES(value: string) {
    const key = CryptoJS.enc.Utf8.parse(this._Keys.substring(0, 16));
    const iv = CryptoJS.enc.Utf8.parse(this._Keys.substring(0, 16));
    const decrypted = CryptoJS.AES.decrypt(value, key, {
      keySize: 128 / 8,
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });

    return decrypted.toString(CryptoJS.enc.Utf8);
  }

  //#endregion

}

Now, we can consume it as Service as below,

...
constructor(
    ...
    private envService: EncrDecrService
) 
{
    const value = sessionStorage.getItem(valueKey) || localStorage.getItem(valueKey);
    if (value) {
      const _value = this.envService.getAES(value);
      this._value = JSON.parse(_value);
    }
}

set(value?: any, remember?: boolean) {
    this._value = value || null;

    if (value) {
      const storage = remember ? localStorage : sessionStorage;
      const _value = this.envService.setAES(value); 
      storage.setItem(valueKey, JSON.stringify(_value));
    } else {
      sessionStorage.removeItem(valueKey);
      localStorage.removeItem(valueKey);
    }
}
...

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.