[React] 암호화 AES CryptoJS 사용하여 암호화/복호화 하기

id값을 암호화시켜 url에 넣어 호출하는 예제

아이디값이 단순 숫자인 경우

보안에 상당히 취약함으로 암호화가 필요하다.

 

 

나는 암호화 = 리액트 / 복호화 = nestJS를 사용하였다.

 

 

😎 install

npm i crypto-js

 

😎 import

import CryptoJS from 'crypto-js';

 

 

😎crypto.js

import CryptoJS from 'crypto-js';

const secretKey = process.env.REACT_APP_AES_SECRETKEY

//암호화
export const encrypt = (val) => {
    let text = val.toString();
    
    const data = {
        id:text
    };

    const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), secretKey);

    let result = encrypted.toString()
    
    return encodeURIComponent(result)
} 


//복호화
export const decrypt = (encrypted) => {

    var decrypted = CryptoJS.AES.decrypt(encrypted, key);

    return decrypted;
}

주의 1 )

암호화할 값이 Number값 이라면 String 화 시켜줘야한다.

 

주의 2 )

난 Id값 하나를 넘겨서 Json화 시키지 않고 id값 : string 그대로 암호화 시켜주었다.

nest 에서 값을 받지 못해서 한~~~참 헤맸는데 json 화 시켜주니 된다 ㅠㅠ

 

주의 3 )

또한 랜덤적으로 호출이 되어 한참 찾았는데

엄호화를 하면서 암호화결과값에 슬래쉬(/)가  붙은것

ex) api/image/13f3f5g%/ewf#fewe22

 

api url에 넣어 호출할 경우

자바스크립트 기본 내장 함수 encodeURIComponent를 사용하여 url인코딩을 해서 넘겨주어야한다.

 

 

import { encrypt } from '../../utiles/crypto';

.
.
.

encrypt(id)

해당 함수를 사용할시, import 해주고 편히 사용가능

 

 

---

암호화된 값을 받는 서버단 코드 - Nest JS 사용

 

😎install

npm i crypto-js

-- Typescript에서 사용시 추가 설치
npm i --save-dev @types/crypto-js

타입스크립드의 경우 crypto사용시 2개 설치

 

 

crypto.ts

import * as CryptoJS from 'crypto-js'

export default class Crypto {
    private static instance: Crypto;
    private secretKey : string = process.env.AES_SECRETKEY;

    //singleton api
    public static getInstance = () => this.instance || (this.instance = new this());

    private constructor() {}
    
    public getDecrypto = (text:string) => {
        
        var bytes = CryptoJS.AES.decrypt(text, this.secretKey);
        var decrypted = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
        
        return decrypted;
    };

}

 

import Crypto from '../libraries/Crypto';

해당 함수 사용할 위치에서 임포트 해주고

 

private crypto: Crypto = Crypto.getInstance();

let encrypto = 암호화된값
let decrypt = this.crypto.getDecrypto(encrypto)

복호화되어 실제 값 decrypt을 받을수 있다.

 

 

---

crypto-js의 필요성

javascript를 이용한 서비스에서, 여러가지 정보(ex:비밀번호)를 안전하게 암호화 할 수 있다.

 

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

 

해당 코드는 공통된 시크릿키를 사용하여 복화하하는 방식이다,

해당 키는 프론트개발자와 서버개발자가 서로 소통하여 공유 해야한다.

(난 프론트 서버 혼자 하니까 나자신과의 소통 ^^ )

 

해당 키는 절대! 노출되서 안되고 

통상적으로 .env파일에서 관리한다.