자바스크립트로 텍스트 암호화 복호화 하는 방법 (JavaScript string encryption and decryption)

자바스크립트로 개발을 하다보면 텍스트를 암호화해야되는 순간이 찾아올 경우가 생깁니다. 이번 포스팅에서는 자바스크립트로 텍스트를 암호화, 복호화하는 방법에 대해서 소개해드리도록 하겠습니다.

라이브러리 설치

암호화, 복호화 라이브러리 crypto-js를 설치합니다. 제가 개인적으로 텍스트를 암호화할 때 편하게 사용한 경험이 있어서 저는 crypto-js를 사용합니다.

npm install crypto-js
// or
yarn add crypto-js

암호화 복호화 헬퍼함수는 아래와 같습니다. encrypt, decrypt 헬퍼함수의 key는 process.env.PRIVATE_KEY처럼 환경변수로 처리하면 됩니다.

import CryptoJS from "crypto-js";

export const encrypt = (data, key) => {
  return CryptoJS.AES.encrypt(JSON.stringify(data), key).toString();
};

export const decrypt = (text, key) => {
  try {
    const bytes = CryptoJS.AES.decrypt(text, key);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  } catch (err) {
    console.error(err);
    return;
  }
};

encrypt 헬퍼함수를 활용해서 샘플 데이터를 암호화해보겠습니다. 샘플 데이터는 보안에 민감한 유저 데이터라고 가정하고 보시면 될 것 같습니다. encrypt 헬퍼함수의 return 값으로 암호화된 문자열을 반환합니다. 이 문자열은 우리가 암호화할 때 사용했던 private key로만 해독할 수 있습니다.

import { encrypt, decrypt } from "./helpers/crypto";

const data = {
  name: "박경두",
  age: 30,
  phone: "01012345678",
  id: "ruden91",
  company: "Google",
};

const text = encrypt(data, "secret-key-1");
// U2FsdGVkX1/btZ59SlJiGwrxyteNX/dNFJn4XTvcMCIKFo6fDsdSLtPdNqzVA6jzGTw57u0Ozd0gL/RRZuJngl81jnSp8YCkxGLiNjB1woKZ+CWz4p8qcvEREPOmL2E/p60YpmRYhrf9q3xgWvuWGg==

우리가 암호화한 샘플데이터를 복호화해보겠습니다. 우리가 사용했던 private key를 활용해서 decrypt 헬퍼함수를 실행하면 면 리턴값으로 우리가 처음 가지고 있던 샘플데이터를 반환해주는 것을 확인할 수 있습니다.

const text = encrypt(data, "secret-key-1"); // 암호화 
const decryptedData = decrypt(text, "secret-key-1"); // 복호화

복호화의 결과로 샘플데이터 양식 그대로 반환한 모습

만약 private key를 다르게 넣고 복호화한다면 어떻게 될까요?

    const text = encrypt(data, "secret-key-1");
    const decryptedData = decrypt(text, "hello"); // key를 다르게
    console.log(decryptedData);

당연히 복호화에 실패하는 모습

당연히 암호화한 키와 다르기 때문에 복호화에 실패하게 됩니다.