자바스크립트에서 CryptoJS 및 JSEncrypt를 사용한 간편한 암호화

MNIII
4 min readSep 19, 2023

--

데이터 보안은 웹 개발에서 핵심적인 부분이며, 특히 결제 정보나 개인 정보와 같은 민감한 데이터를 처리할 때는 암호화가 필수적이다. JavaScript에서 CryptoJS와 JSEncrypt 라이브러리를 활용하여 데이터를 쉽게 암호화하는 방법 하나를 소개하고자 한다.

라이브러리 설치

먼저, 다음 라이브러리 설치가 필요하다.

npm install crypto-js jsencrypt

간단한 암호화 예제

1. 데이터 암호화 하기
encrypt 함수는 주어진 값을 암호화 한다.

import CryptoJS from 'crypto-js';
import JSEncrypt from 'jsencrypt';

function encrypt(values) {
const MI_CRYPT_KEY = "YOUR_PUBLIC_KEY";
const encrypt = new JSEncrypt();
encrypt.setPublicKey(MI_CRYPT_KEY);

const encrypted = CryptoJS.AES.encrypt(JSON.stringify(values), "YOUR_SECRET_KEY");
return encrypted.toString();
}

AES (Advanced Encryption Standard)

키의 용도와 필요성

  • YOUR_PUBLIC_KEY: RSA 암호화에서 사용 되는 공개 키이다. 이 키를 사용하여 데이터를 암호화하면, 해당 키와 쌍을 이루는 키를 가진 사람만이 데이터를 복호화 할 수 있다.
  • YOUR_SECRET_KEY: AES 암호화에서 사용 되는 비밀 키이다. 이 키는 데이터를 암호화하고 복호화 하는 데 사용된다. 이 키는 절대 외부에 노출 되어서는 안 되며, 안전한 곳에 보관해야 한다.

2. 데이터 복호화 하기
decrypt 함수는 암호화된 데이터를 원래의 상태로 되돌린다.

function decrypt(encryptedData) {
const decrypted = CryptoJS.AES.decrypt(encryptedData, "YOUR_SECRET_KEY");
return decrypted.toString(CryptoJS.enc.Utf8);
}

3. 활용 예제
사용자의 이름과 이메일 정보를 암호화하여 전송하는 예제.

const userInfo = {
userName: "John",
userEmail: "john@example.com"
};

const encryptedUserInfo = encrypt(userInfo);
console.log(encryptedUserInfo); // 암호화된 사용자 정보 출력

const decryptedUserInfo = decrypt(encryptedUserInfo);
console.log(decryptedUserInfo); // 복호화된 사용자 정보 출력

특히 웹에서는 다양한 사용자 정보가 주고 받아지기 때문에, 이러한 정보를 안전하게 보호하는 것이 중요하다. CryptoJS와 JSEncrypt를 활용하면 JavaScript에서 간단하게 데이터를 암호화하고 복호화 할 수 있다.

이를 통해 사용자의 중요한 정보를 안전하게 보호하는 기본적인 방법을 알게 되었지만, 실제 프로덕션 환경에서는 이외에도 더욱 다양한 보안 조치와 전략이 필요하다.

보안은 꾸준한 학습과 연구가 필요한 분야로 항상 최신 보안 기법과 트렌드를 잘 살피는 것이 중요 하겠다.

--

--