Apply same encryption & decryption in both Angular and ASP.NET Core MVC

Question

In C#, I am using this scheme for encryption and decryption. I want to apply the same on the Angular side - how can I do that?

Actually, when I call the API I want to send the encrypted value to the backend and in backend I want to decrypt it to process further.

Is there any way or alternative please?

Frontend call goes here:

callExternalProject(Username : string): Observable<any> {
      
       return this.http.get<any>(`${environment.CMRDashboardURL}/Account/LoginUser?username=${I_WantToPassEncryptedUsernameHere}`) .pipe(
          catchError(error => {
          return throwError(() => new Error(error))
          })     
        );
}

Applying same encryption decryption in Angular (frontend) and C# (ASP.NET Core MVC) side.

Answer 1

In Angular component, you can import the crypto-js and then decrypt the value. Refer to the following code (View the online Sample):

encryption.service.ts:

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

@Injectable({
  providedIn: 'root',
})
export class EncryptionService {
  key: any = 'sz83kd75';
  IV = 'MTIzNDU2Nzg=';

  // ENCRYPTION USING CBC TRIPLE DES
  encryptUsingTripleDES(res: any, typeObj: boolean): string {
    const data = typeObj ? JSON.stringify(res) : res;
    const keyHex = CryptoJS.enc.Utf8.parse(this.key);
    const iv = CryptoJS.enc.Utf8.parse(this.IV);
    console.log(iv);
    const mode = CryptoJS.mode.CBC;
    const encrypted = CryptoJS.TripleDES.encrypt(data, keyHex, { iv, mode });
    return encrypted.toString();
  }

  // DECRYPTION USING CBC TRIPLE DES
  decryptUsingTripleDES(encrypted: string): string {
    const keyHex = CryptoJS.enc.Utf8.parse(this.key);
    const iv = CryptoJS.enc.Utf8.parse(this.IV);
    const mode = CryptoJS.mode.CBC;
    const decrypted = CryptoJS.TripleDES.decrypt(encrypted, keyHex, {
      iv,
      mode,
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
  }

  // ENCRYPTION USING AES
  encryptUsingAES(res: any, typeObj: boolean): string {
    const data = typeObj ? JSON.stringify(res) : res;
    const hash = CryptoJS.MD5(this.key).toString();
    const encrypted = CryptoJS.AES.encrypt(data, hash);
    return encrypted.toString();
  }

  // DECRYPTION USING AES
  decryptUsingAES(encrypted: string): string {
    const hash = CryptoJS.MD5(this.key).toString();
    const decrypted = CryptoJS.AES.decrypt(encrypted, hash);
    return decrypted.toString(CryptoJS.enc.Utf8);
  }
}

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor(private encryption: EncryptionService) {}

  ngOnInit() {
    const data = 'test1231!';
    // // DES
    const encrypted = this.encryption.encryptUsingTripleDES(data, true);
    console.log(encrypted);
    const decrypted = this.encryption.decryptUsingTripleDES(encrypted);
    console.log(decrypted);
  }
}

After getting the encrypted data, you can call the controller method and try to use the following code to decrypt the data.

    static byte[] key = null;
    static byte[] iv = null;
    public static string Decrypt(string value)
    {
        DESCryptoServiceProvider desSprovider = new DESCryptoServiceProvider();
        Encoding utf1 = new UTF8Encoding();
        key = utf1.GetBytes("sz83kd75");
        iv = utf1.GetBytes("MTIzNDU2Nzg=");
        ICryptoTransform decryptor = desSprovider.CreateDecryptor(key, iv);

        Encoding utf = new UTF8Encoding();
        value = value.Replace(" ", "+").Replace("'", "");

        byte[] bEncrypt = Convert.FromBase64String(value);
        byte[] bDecrupt = decryptor.TransformFinalBlock(bEncrypt, 0, bEncrypt.Length);
        return utf.GetString(bDecrupt);
    }

The test result as below: