[태그:] Angular

Angular에서 암호화된 데이터 복호화(Decryption)

백엔드(Node.js)에서 암호화된 데이터를 프론트엔드(Angular)에서 복호화하여 사용자에게 보여주는 방법을 정리했음.

---

📦 1. crypto-js 모듈 설치

Angular 프로젝트에서 crypto-js를 사용하려면 먼저 모듈을 설치해야 함.

• 설치 명령어:
  

  npm i -d crypto-js

  
  
• TypeScript 사용 시 추가 설치:
  

  npm i --save-dev @types/crypto-js

  
  

---

🔑 2. 암호화/복호화 서비스 설정 (cryptoJs.service.ts)

@Injectable() 데코레이터를 사용하여 CryptoJsService를 정의하고, 암호화 키를 설정했음.

// cryptols.service.ts
import { Injectable } from "@angular/core";
import * as CryptoJS from "crypto-js"; // crypto-js 모듈 임포트

@Injectable()
export class CryptoJsService {
  private encryptionKey: string = "YOUR_ENCRYPTION_KEY"; // 암호화 키 설정. 실제 키로 대체 필요

  constructor() {}

  // 데이터 암호화 메서드 (Node.js와 동일한 방식으로 암호화)
  encrypt(value: string) {
    return CryptoJS.AES.encrypt(value, this.encryptionKey).toString();
  }

  // 데이터 복호화 메서드
  decrypt(value: string, isIpFormat: boolean) {
    // isIpFormat은 IP 형식을 체크하는 사용자 정의 함수일 수 있음
    let rtnValue = value;
    if (!isIpFormat) {
      // IP 형식이 아닌 경우에만 복호화 시도
      try {
        rtnValue = CryptoJS.AES.decrypt(value, this.encryptionKey).toString(CryptoJS.enc.Utf8);
        return rtnValue;
      } catch (e) {
        console.log(e, value);
        return rtnValue; // 에러 발생 시 원본 값 반환
      }
    } else {
      return rtnValue;
    }
  }
}

• encryptionKey: 백엔드에서 사용한 암호화 키와 동일해야 함.
• decrypt 메서드는 isIpFormat이라는 추가 파라미터를 받아 특정 조건(!isIpFormat)에서만 복호화를 시도함
  
  이는 IP 주소와 같은 특정 형식의 데이터는 복호화하지 않기 위함으로 보임.

---

💻 3. 컴포넌트에서 복호화 적용

CryptoJsService를 컴포넌트에 주입하여 데이터를 복호화했음.

// import {CryptoJsService} from "@app/core/service/cryptoJs.service"; // 서비스 임포트

// constructor 등에서 서비스 주입
// private cryptoJsService: CryptoJsService

// 데이터 사용 예시
// testdata.push(this.cryptoJsService.decrypt(test.testdata)); // 데이터를 복호화하여 사용

이렇게 적용 시 일반적인 화면에서는 데이터가 정상 출력됨

---

⚠️ 4. 팝업창 복호화 문제 및 해결

간혹 팝업창에서는 암호화된 데이터가 그대로 출력되는 문제가 발생할 수 있었음

4.1. 문제 해결을 위한 추가 코드

팝업창으로 데이터를 보낼 때 특정 데이터만 추출하여 다시 넣어주는 방식으로 해결했음

// 팝업창으로 데이터를 보낼 때 적용
if (e.colDef.field === "modi") {
  // 'modi' 필드에 해당하는 경우
  if (Array.isArray(e.data.test)) {
    // e.data.test가 배열인 경우
    let tests = [];
    e.data.test.map((ip) => tests.push(ip.testtest)); // 배열 내 객체에서 'testtest' 필드만 추출
    e.data.test = tests.toString(); // 추출된 데이터를 문자열로 변환하여 다시 할당
  }
  this.updateRow(e.data, e.colDef.field); // 행 업데이트
}

이 코드는 e.data.test가 배열이고 그 안에 testtest라는 필드를 가진 객체들이 있을 때, 해당 필드들의 값을 추출하여 하나의 문자열로 변환한 뒤 다시 e.data.test에 할당하는 로직으로 보임.
이 과정을 통해 팝업창에서도 정상적으로 복호화된 데이터가 출력될 수 있도록 조치했음