CryptoJS를 활용한 RefreshToken 암호화 및 복호화 - 안전한 로그인 토큰 관리 방법

로그인시 서버에서 주는 AccessToken과 RefreshToken을 세션스토리지에 저장하여 관리하였다. 

하지만, 이는 토큰을 그대로 저장하는 것은 보안적으로 취약할 수 있다는 문제점을 가지고 있어 이를 해결하기위해 CryptoJS를 사용하기로 결정했다.

 

🎀 CryptoJS란?

JavaScript에서 암호화와 해시 기능을 제공하는 라이브러리로, JavaScript에서 암호화 및 해시 기능을 수행하기 위해 사용됨.

 

🎀 crypto-js 설치

yarn add crypto-js

 

🎀 crypto-js 암호화 방식

1. 대칭키 (Symmetric Encryption) : 암호화 - 복호화 할 때 같은 키값을 이용

2. 비대칭키 (Asymmetric Encryption) : 암호화 - 복호화 할 때 다른 키값을 이용 

3. 해싱 (hashing) : 단방향으로 암호화만 가능하고 복호화 할 수 없다. 비밀번호 등에 이용. 

알고리즘	종류	비고
대칭키	DES, 3-DES, AES(128bit, 256bit), SEED, ARIA	AES가 가장 보편적으로 이용
비대칭키	RSA, ECC, DSS
해싱	MD5, SHA-0, SHA-1, SHA-2

 

🎀 crypto-js 사용

import CryptoJS from "crypto-js";

// 암호화
export function encrypt(data) {
  const secretKey = `${process.env.REACT_APP_SECRETKEY}`;
  return CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();
}

// 복호화
export function decrypt(data) {
  const secretKey = `${process.env.REACT_APP_SECRETKEY}`;
  const bytes = CryptoJS.AES.decrypt(data, secretKey);
  const decryptedString = bytes.toString(CryptoJS.enc.Utf8);

// 디코딩된 문자열을 JSON.parse()에 전달하여 파싱
  const parsedData = JSON.parse(decryptedString);

  return parsedData;
}

 

아래와 같이 RefreshToken이 암호화되어 세션스토리지에 저장된 것을 확인할 수 있다.