[React.JS] Crypto-JS AES-256 암호화 PHP에서 복호화

암호화는 무지하게 쉬웠다.

https://jforj.tistory.com/291

[React] 브라우저에서 암호화를 사용할 경우 발생하는 문제점

 

암호화 단계

import cryptoJs from 'crypto-js';

const secretKey = '12345678901234567890123456789012'; // 32자리 비밀키
const iv = 'abcdefghijklmnop'; // 16자리 iv

// 암호화
export const encrypt = (text: string) => {
    const cipher = cryptoJs.AES.encrypt(text, cryptoJs.enc.Utf8.parse(secretKey), {
        iv: cryptoJs.enc.Utf8.parse(iv),
        padding: cryptoJs.pad.Pkcs7,
        mode: cryptoJs.mode.CBC,
    });

    return cipher.toString();
};

// 복호화
export const decrypt = (encryptedText: string) => {
    const decipher = cryptoJs.AES.decrypt(encryptedText, cryptoJs.enc.Utf8.parse(secretKey), {
        iv: cryptoJs.enc.Utf8.parse(iv),
        padding: cryptoJs.pad.Pkcs7,
        mode: cryptoJs.mode.CBC,
    });

    return decipher.toString(cryptoJs.enc.Utf8);
};

 

문제는 복호화였다.

 

아무리해도 이상한 값이 계속 나오는 것이 문제였다.

그래서 이를 어떻게 해결하나? 하고 PHP AES256, 복호화 PHP, crypto-js encrypto to php decrypto, aes-256-cbc 등등 엄청나게 검색했다.

 

그래도 안나오길래 어떻게해야하나 했더니,

JS단 제작자가 cipher로 export 했길래, 나도 php cipher 검색해보았다.

그러니 나오더라.

https://hinos.tistory.com/9

PHP AES 암호화 (Cipher)

 

해당 코드는 정확히 되긴하는데, aes-256이 아니라 작동되지 않는다.

그에 따라 하단의 코드로 수정하였다.

 

원래는 $pw, $iv를 바깥으로 빼내서 protected로 해야하는데, 귀찮아....

function decrypt($data) {
    $password = '12345678901234567890123456789012'; // 32자리 비밀키
    $iv = 'abcdefghijklmnop';

    $data = base64_decode($plainText);
    $endata = openssl_decrypt($data, "AES-256-CBC", $password, true, $iv);
    echo $data; 
}

 

React쪽에서 암호화 키 노출 이슈가 있긴한데, 이걸 어찌할것인지 좀 고민해봐야겠다.

고민해보니 방법이 없다.

.env는 환경변수라 보안이고 뭐고 의미가 없으니 header값에서 유저 유무를 체크해서

시간 + 변수를 버무려서 암호화 걸어 한개의 응답값으로 넘기면, 이를 다른 곳에서 복호화 하여,

시간 체크 진행하는 방법뿐인 듯.

build시에 시크릿키가 노출된다.

이에 대응해서 서버에서 가져오는 방법뿐인데, 시크릿키를 넘겨주는 방식으로 하면

응답값으로 받아올때 노출되어 문제발생하니

서버에서 만들어서 해당 값을 돌려주는 방식으로 가야겠다.