[모듈 없을 시 설치]

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 : 부족한 값 채우는 방식

+ Recent posts