[Next.js, Node.js] 토큰 암호화 (crypto-js)

본 글은 Next.js에서 crypto-js 사용해 AccessToken, Refreshoken을 암호화 및 복호화 하는 방법에 대해 다룬 내용입니다. 

목차
1. 도입 이유
2. crypto-js란?
3. 사용 방법

 

1. 도입 이유

SessionStorage에 AccessToken, Refreshoken을 저장했던 이유는 Cookie에 비해 보안성이 높았기 때문이다.

하지만, 탭별로 데이터가 관리되다 보니 사용자가 매번 새로운 로그인을 해야 하는 번거로움이 발생했다.

 

보안도 중요하지만 사용자 경험 개선이 우선이라 판단되어 AccessToken, Refreshoken을 Cookie에 저장하기로 했다.

이때, 그냥 저장하는 게 아닌 crypto-js를 활용해 암호화해 사용자 정보가 직접적으로 노출되지 않도록 하기로 했다.

 

2. crypto-js란?

JS로 구현된 암호화 라이브러리이다.  

 

이 라이브러리는 다양한 암호화 기능을 제고하여 데이터를 안전하게 암호화하고 복호화할 수 있도록 지원한다.

(AES, TripleDES, RC4, Rabbit, HMAC, SHA 등)

• AES: 가장 널리 사용되는 대칭키 암호화 알고리즘, 안정성과 효율성이 뛰어나며, 토큰 암호화에 많이 사용
• HMAC: 해시 함수를 사용해 메시지 인증 코드를 생성하는 인증 메커니즘, 메시지의 무결성을 보호하는데 사용
• SHA: 단방향 해시 함수, 데이터를 고정 크기의 해시 값으로 변환하는 데 사용, 주로 메시지 무결성, 데이터 일방향 암호화에 사용
• TripleDES: DES 알고리즘을 세 번 반복하여 강화된 대칭키 암호화를 제공, 보안성은 높지만 AES보다 성능이 낮을 수 있음
• Rabbit: 스트림 암호화 알고리즘, 빠른 속도와 안전한 암호화를 제공, AES 보다는 상대적으로 덜 사용

더 자세히 알고 싶다면 공식 문서를 참고하면 되겠다.

 

3. 사용 방법

나는 AES 알고리즘을 선택했다. 

 

다양한 알고리즘들이 존재하니 검색 후 본인에게 맞는 걸로 사용하면 좋을 거 같다!

 

1. 설치하기

나는 타입스크립트를 사용하고 있다.

yarn add --dev @types/crypto-js
npm install --save-dev @types/crypto-js

 

2. 암호화 하기 (encrypt(값, 암호화 키))

cryptoKey는 각자 본인이 원하는 값을 넣어주면 된다. 

(나는 cryptoKey 값이 외부에 노출되지 않도록 .env 파일에 넣어줬다.)

cryptoKey = process.env.CRYPTO_KEY || ""; // 암호화, 복호화 key

export function setCookie(key: string, token: string) {
	if (key.trim() === "" || token.trim() === "") return false;
    
	// 암호화
	const encryptedToken = CryptoJS.AES.encrypt(token, cryptoKey).toString();
        Cookies.set(key, encryptedToken);
    
	return true;
}

 

3. 복호화 하기 (decrypt(값, 복호화 키))

const cryptoKey = process.env.CRYPTO_KEY || ""; // 암호화, 복호화 key

export function getCookie(key: string){
	if (key.trim() === "") return "";

	const encryptedToken = Cookies.get(key);

	// 복호화
	const bytes = CryptoJS.AES.decrypt(encryptedToken || "", cryptoKey);
	const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
   
	return decryptedToken;
}