التشفير وفك التشفير في Angular

يونيو 03, 2024

encryption response from nestjs and decryption in angular for object

To handle the encryption of an object in a NestJS backend and its decryption in an Angular frontend, we can follow a similar approach but adapt it to work with objects instead of strings.

Step 1: Install Dependencies

Ensure you have crypto-js installed in both your NestJS and Angular projects.

For NestJS

bash

npm install crypto-js

For Angular

bash

npm install crypto-js

Step 2: Encryption in NestJS

Create a service in your NestJS application to handle encryption of an object. For example, encryption.service.ts:

encryption.service.ts

typescript

import { Injectable } from '@nestjs/common';
import * as CryptoJS from 'crypto-js';

@Injectable()
export class EncryptionService {
  private readonly secretKey = 'your-secret-key';

  encrypt(data: object): string {
    const jsonString = JSON.stringify(data);
    return CryptoJS.AES.encrypt(jsonString, this.secretKey).toString();
  }

  decrypt(ciphertext: string): object {
    const bytes = CryptoJS.AES.decrypt(ciphertext, this.secretKey);
    const decryptedString = bytes.toString(CryptoJS.enc.Utf8);
    return JSON.parse(decryptedString);
  }
}

Use this service in your controller to encrypt the response before sending it to the client:

app.controller.ts

typescript

import { Controller, Get } from '@nestjs/common';
import { EncryptionService } from './encryption.service';

@Controller()
export class AppController {
  constructor(private readonly encryptionService: EncryptionService) {}

  @Get('secure-data')
  getSecureData() {
    const data = { message: 'Sensitive data from NestJS', timestamp: new Date() };
    const encryptedData = this.encryptionService.encrypt(data);
    return { encryptedData };
  }
}

Step 3: Decryption in Angular

In your Angular application, create a service to handle decryption of an object. For example, encryption.service.ts:

encryption.service.ts

typescript

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

@Injectable({
  providedIn: 'root'
})
export class EncryptionService {
  private readonly secretKey = 'your-secret-key';

  decrypt(ciphertext: string): object {
    const bytes = CryptoJS.AES.decrypt(ciphertext, this.secretKey);
    const decryptedString = bytes.toString(CryptoJS.enc.Utf8);
    return JSON.parse(decryptedString);
  }
}

Use this service in your component to decrypt the response from the backend:

app.component.ts

typescript

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { EncryptionService } from './encryption.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  decryptedData: any;

  constructor(private http: HttpClient, private encryptionService: EncryptionService) {}

  ngOnInit() {
    this.http.get<{ encryptedData: string }>('/api/secure-data')
      .subscribe(response => {
        this.decryptedData = this.encryptionService.decrypt(response.encryptedData);
      });
  }
}

app.component.html

html

<div>
  <h1>Decrypted Data</h1>
  <pre>{{ decryptedData | json }}</pre>
</div>

Step 4: Ensure Secret Key Security

Ensure that the secret key used for encryption and decryption is stored securely. Do not hard-code it in your codebase. Consider using environment variables or a secrets management service.

Step 5: Test the Setup

Start both your NestJS backend and Angular frontend applications. When you access the Angular application, it should fetch the encrypted data from the NestJS backend, decrypt it using the shared secret key, and display the decrypted object data.

This setup ensures that sensitive object data is securely encrypted by the backend and decrypted by the frontend, using a consistent encryption/decryption algorithm and shared secret key.

بحث هذه المدونة الإلكترونية

مدونة Angular و NestJs