[TIL]자바스크립트로 암호화 하기

평소 웹을 검색하다보면 로그인을 해야 하는 경우가 굉장히 많이 있습니다. 그때마다 우리가 꼭 입력해야하는 것이 바로 비밀번호인데요, 보통 사람들은 프론트에서 백으로 비밀번호를 넘겨 주면, 백엔드에서 알아서 암복호화 등의 과정을 거쳐 비밀번호를 관리해야 한다고 생각합니다. 하지만 이것은 굉장히 위험한 발상입니다. 이렇게 관리할 경우 실력있는 해커가 백엔드로 넘어가기 전의 비밀번호를 해킹할 수도 있고, 백엔드에 비밀번호가 1차적으로는 그대로 기록될 수 있기 때문에, 이 역시 해킹에 취약해집니다. 

이렇기 때문에 프론트엔드에서도 암복호화를 할 수 있는 것이 중요한데요, 오늘은 자바스크립트로 간단한 암호화를 하는 방법에 대해 알아보도록 하겠습니다. 

 

crypto-js 라이브러리 활용하여 암호화 하기

 

암복호화 라이브러리로는 crypto-js 라이브러리가 많이 활용됩니다. 이 라이브러리를 다운 받도록 합니다.

 

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

 

그리고 아래와 같이 함수를 설정해 줍니다.

import CryptoJS from "crypto-js";

const crypto = CryptoJS();

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

export const decrypt = (text, key) => {
	try {
    	const bytes = crypto.AES.decrypt(text, key);
    	return JSON.parse(bytes.toString(crypto.enc.Utf8));
	} catch (err) {
    console.log(err);
    return;
};
// 코드 출처: https://webruden.tistory.com/355

 

위의 코드 중 encrypt 함수의 return 값으로는 암호화된 문자열이 반환됩니다. 이 문자열은 쉽게 해독할 수 없으며, 암호화 할 때 사용한 key를 통해서만 해독할 수 있습니다.

 

위에서 정의한 함수를 아래와 같이 데이터화 해서 사용하면 됩니다.

import { encrypt, decrypt } from "위의 js 파일 경로"

const data = {
	name: "roy"
    age: 31,
    phone: "01000001111",
    id: "roydmlid",
 }
 
 const text = encrypt(data, "secret-key-1");
 
 //코드 출처: https://webruden.tistory.com/355

 

복호화 하기

 

이제는 암호화된 자료를 복호화 해보도록 하겠습니다. 우리가 사용한 key를 활용해서 decrypt 함수를 실행하면 맨처음 우리가 가지고 있던 데이터로 반환되는 것을 알 수 있습니다.

 

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

// 코드 출처:https://webruden.tistory.com/355 

만약 key 값이 달라진다면, 해당 코드는 제대로 복호화가 되지 않아 우리가 데이터를 제대로 알아볼 수 없게 됩니다. 

 

마무리

위의 예제는 라이브러리를 활용하여 간단하게 암호화 하는 방법을 설명한 것입니다. 암호화 및 복호화를 하는 원리에는 hash 방식과 encrypt 방식이 있는데요, 오늘은 encrypt 방식을 활용한 간단한 예제를 알아보았습니다. 다음 포스팅에서는 암호화의 방식에 대해 알아보는 시간을 가져보도록 하겠습니다.