[모듈 없을 시 설치]
npm install crypto-js
import crypto from 'crypto-js';
import { useState } from 'react';
const CryptoAES256 = () => {
const [encrypt, setEncrypt] = useState('');
const [decrypt, setDecrypt] = useState('');
const Go = () => {
const key = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456'; //32자리
const initVector = key.substr(0, 16); //16자리
const dataObject = {
value1: 'v1',
value2: 'v2',
value3: 'v3',
};
const data = JSON.stringify(dataObject);
console.log(data);
//암호화
let cipher = crypto.AES.encrypt(data, crypto.enc.Utf8.parse(key), {
iv: crypto.enc.Utf8.parse(initVector),
padding: crypto.pad.Pkcs7,
mode: crypto.mode.CBC,
});
console.log('Encrypt cipher : ', cipher);
const encryptResult = cipher.toString();
setEncrypt(encryptResult);
//복호화
cipher = crypto.AES.decrypt(encryptResult, crypto.enc.Utf8.parse(key), {
iv: crypto.enc.Utf8.parse(initVector),
padding: crypto.pad.Pkcs7,
mode: crypto.mode.CBC,
});
console.log('Decrypt cipher : ', cipher);
const decryptResult = cipher.toString(crypto.enc.Utf8); //★복호화 후 인코딩 지정!
setDecrypt(decryptResult);
};
return (
<div>
<div>
<button onClick={Go}>암/복호화</button>
<div>암호화 : {encrypt}</div>
<div>복호화 : {decrypt}</div>
</div>
</div>
);
};
export default CryptoAES256;
클라이언트/서버 대칭 키 알고리즘입니다. (암/복호화에 같은 키 사용)
사용할 일이 있어 간단히 정리해봅니다.
AES ( Advanced Encryption Standard ) 128, 192, 256 숫자는 bit를 의미하며 key의 길이가 결정 됩니다.
128 = 128 / 8 = 16 (byte)
192 = 192 / 8 = 24 (byte)
256 = 256 / 8 = 32 (byte)
mode :
1. ECB (Electronic Code Block) : 각 블록 단위 별개로 나눠서 암호화.
2. CBC (Cipher Block Chaining) : 앞 뒤 값에 대해 XOR 연산하여 모든 블록이 연관 (iv 개념 필요!)
iv (Initialize Vector) : CBC에서 첫 자리에 대해 XOR 연산을 할 값을 의미합니다. (길이가 맞아야 합니다.)
padding : 부족한 값 채우는 방식
'React > 문법' 카테고리의 다른 글
[React] DeepCopy 직접 구현 (깊은 복사) (1) | 2023.12.30 |
---|---|
[React] 웹페이지 간의 통신 (window.open, window.opener.postMessage) (0) | 2023.11.05 |