Encrypt response and show decrypt data in UI by using AES encryption and decryption in node project

In a world where data is currency and cyber attacks are becoming more sophisticated by the day, the importance. Organizations have three critical tools at their disposal to ensure strong cybersecurity: encryption, authentication, and authorization. Encryption is one of the most helpful, first-level layers to protecting your data and staying cyber resilient.

In this blog, you’ll learn about how encrypt your data response and show decrypted data into your website.

Encrypted data

Decrypted data

First and foremost, you need to setup your backend code and frontend code. You would need the below dependencies for setting up.

npm install crypto-js

In backend, Aes Encrypt Util class created for AES configuration and encrypting data into cipher text.

const CryptoJS = require('crypto-js');

export class AesEncryptUtil {
  static publicKey: string; 
  static getAesPublicKey() {
    if (AesEncryptUtil.publicKey) return AesEncryptUtil.publicKey;
    AesEncryptUtil.publicKey = 'here you right secret key';
    return AesEncryptUtil.publicKey;
  }

  static aesEncrypt(data: any) {
    try {
      let pKey = AesEncryptUtil.getAesPublicKey();
      const ciphertext = CryptoJS.AES.encrypt(
        JSON.stringify(data),
        pKey,
      ).toString();
      return ciphertext;
    } catch (error) {
      throw error;
    }
  }
}

Here, showed how to encrypt your data response.

import { AesEncryptUtil } from 'src/util/util.aes.encrypt';
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { PayEntity } from 'src/pay/entities/pay.entity';
import { Repository } from 'typeorm';
import { CreateSubscriberDto } from './dto/create-subscriber.dto';

@Injectable()
export class PayService {
constructor(   
 @InjectRepository(PayEntity)
    private payRepo: Repository<PayEntity>,
) {}
 async checkout(createSubscriberDto: CreateSubscriberDto) {
    try {
      const subscriberDetail = createSubscriberDto;
      const order = await this.payRepo.create(subscriberDetail);
      let encryptData = AesEncryptUtil.aesEncrypt(order); // here, Encryption is done
      return { statusCode: 201, isSuccess: true, data: encryptData };
    } catch (error) {
      return { statusCode: 500, isSuccess: false, error: error };
    }
  }
}

In frontend side, Aes Decrypt Util Class created for AES configuration and decrypting cipher text into original data.

const CryptoJS = require("crypto-js");

export class AesDecryptUtil {
  static publicKey;

  static getAesKey() {
    if (AesDecryptUtil.publicKey) return AesDecryptUtil.publicKey;
    AesDecryptUtil.publicKey = 'here you right secret key';
    return AesDecryptUtil.publicKey;
  }

  static aesDecrypt(data) {
    try {
      let pKey = AesDecryptUtil.getAesKey();
      const bytes = CryptoJS.AES.decrypt(data, pKey);
      const decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
      return decryptedData;
    } catch (error) {
      throw error;
    }
  }
}

Here, showed how to decrypt cipher text.

import { AesDecryptUtil } from "../utils/aes.util";
export async function getStaticPaths() {
  try {
    const response = await axios.get(`${config.url}/programs/getall`);
    let { data } = response;
    data = AesDecryptUtil.aesDecrypt(data); // Decrypted data
    return {data: data};
    
  } catch (err) {
    return { error: err};
  }
}

Thank you for reading!.

Let me know if you have any feedback or comments or if you face any issues.