CryptoJs — Secure Storage Data?

Photo by Markus Winkler on Unsplash

In many of the applications we extensively use the sessionStorage and localStorage, and its of great usage for accessing some required information and establishing various client side features. The Web Storage API provides mechanism(localStorage and sessionStorage) by which browsers can store key/value pairs which can be used by client-side.

Quick Notes on Storage:

Quick Notes on sessionStorage & localStorage

There can be scenarios where informations need to be stored in Web Storage, but we don't want to expose the exact values as that information could be confidential Or want to avoid any tampering of actual values. So in below steps we will explore a stable and feasible mechanism to encrypt and decrypt Web Storage data.

Note:- Any sensitive information must be avoided in session/local storage.

To Encrypt and Decrypt we will use crypto-Js library.

We can use AES provided by CryptoJs to encrypt/decrypt string or json. We need to share the Key to encrypt and decrypt. One approach could be to refer the key from server side to avoid any exposure on the Client Side.

AES : The Cipher Algorithm Advanced Encryption Standard (AES) is a U.S. Federal Information Processing Standard. CryptoJS supports AES-128, AES-192, and AES-256. It will pick the variant by the size of the key you pass in. If you use a passphrase, then it will generate a 256-bit key.

Install cyrpto-js / package.json dependencies

npm install crypto-js
"crypto-js": "^4.0.0"

Encrypt PlainText:

const envrypted = AES.encrypt('Hello All','MYKEY4DEMO').toString();

Decrypt:

const decrypted = AES.decrypt(envrypted, 'MYKEY4DEMO');
const decryptedText = decrypted.toString(enc.Utf8);

Example:

import {AES, enc}from 'crypto-js';
****
const envryptedString = AES.encrypt('Hello All','MYKEY4DEMO');
sessionStorage.setItem('encryptedHello', envryptedString.toString());

const decrypted = AES.decrypt(sessionStorage.getItem('encryptedHello'), 'MYKEY4DEMO');
const decryptedString = decrypted.toString(enc.Utf8);
sessionStorage.setItem('decryptedHello', decryptedString);

Encrypt Object:

let obj = {"studentName":"John Smith","studentId":"CSC001"};
const envrypted = AES.encrypt(JSON.stringify(obj),'MYKEY4DEMO').toString();

Decrypt:

const decrypted = AES.decrypt(envrypted, 'MYKEY4DEMO');
const decryptedObject = decrypted.toString(enc.Utf8);

Example:

let obj = {"studentName":"John Smith","studentId":"CSC001"};
const envryptedObject = AES.encrypt(JSON.stringify(obj),'MYKEY4DEMO');
sessionStorage.setItem('envryptedObject', envryptedObject.toString());

const decrypted2 = AES.decrypt(sessionStorage.getItem('envryptedObject'), 'MYKEY4DEMO');
const decryptedObject = decrypted2.toString(enc.Utf8);
sessionStorage.setItem('decryptedObject', decryptedObject);

This is a simple example of encrypting and storing plainText or Objects in WebStorage, and cypto-js library seems to be doing its job in encrypting/decrypting data.