[Javascript] HmacSHA1 암호화

■ HMAC-SHA1 알고리즘을 이용하여 암호화하는 이유?

HMAC-SHA1 알고리즘은 메시지 인증 코드(Message Authentication Code, MAC)의 일종으로, 무결성과 인증성을 동시에 보장하는 알고리즘입니다.

데이터의 무결성	데이터가 전송 중에 손상되지 않았는지를 검증
인증성	데이터가 전송 중에 위,변조되지 않았는지를 검증

HMAC-SHA1 알고리즘은 SHA-1 해시 함수와 메시지 인증 코드(Keyed-Hash Message Authentication Code, HMAC)의 조합으로 이루어져 있습니다. 이 알고리즘은 입력값으로 데이터와 비밀키를 받아, 먼저 비밀키와 패딩값을 이용하여 내부 키를 생성합니다. 이후, 데이터와 내부 키를 SHA-1 해시 함수에 입력하여 해시 값을 계산하고, 다시 내부 키와 해시 값을 조합하여 최종적인 메시지 인증 코드를 생성합니다.

따라서, HMAC-SHA1 알고리즘은 데이터의 무결성과 인증성을 보장하는 안전하고 신뢰성 높은 알고리즘이며, 데이터 보호 및 인증 관련 기술에서 널리 사용되고 있습니다.

 

 

 

1. CryptoJS모듈 설치

npm install crypto-js

2. CryptoJS 모듈 선언

  const CryptoJS = require("crypto-js");

3. 입력값 받기

  const data = inputValue;

 

4. key값을 ByteArray 형태로 변환

  (1) key값을 ByteArray로 변환하는 이유?

- HMAC 알고리즘은 입력 데이터를 비밀키와 함께 해시 함수에 입력하여, 그 결과값을 다시 비밀키와 함께 해시 함수에 입력하여 최종적으로 암호화된 값을 생성합니다. 이때, 비밀키는 반드시 랜덤하고 예측 불가능해야 합니다. 또한, 같은 비밀키로 암호화된 데이터는 같은 결과를 만들어내므로, 다른 사용자와 공유할 때는 반드시 비밀키를 암호화하여 전송해야 합니다.
위와 같은 이유로, 보안 목적으로 비밀키를 생성하거나 전송할 때는 반드시 바이트 배열 형태로 변환해야 합니다. 이를 통해 데이터의 비트 값을 변환하여 더욱 예측 불가능하게 만들고, 데이터를 보호할 수 있습니다. 

 

  const key = CryptoJS.enc.Hex.parse("key값");

5. data와 key값을 이용하여 HMAC-SHA1 알고리즘으로 데이터 암호화

  const hmacSha1 = CryptoJS.HmacSHA1(data, key);

 

■ 최종 코드

import React, { useState } from 'react';

// mui
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';

function Logout() {

  const [inputValue, setInputValue] = useState('');
  const [keyValue, setKeyValue] = useState('');

  // 1-1. CryptoJS 모듈 가져오기
  const CryptoJS = require("crypto-js");
  // 1-2. input값 받기
  const data = inputValue;
  // 1-3. key를 바이트 배열 형태로 변환
  const key = CryptoJS.enc.Hex.parse(keyValue);
  // 1-4. data와 key를 이용하여 HMAC-SHA1 알고리즘으로 데이터 암호화
  const hmacSha1 = CryptoJS.HmacSHA1(data, key);

  const handleHMAC = () => {
    alert(hmacSha1);
  }
  
  function HAMCButton() {
    return <Button
      onClick={handleHMAC}
      variant="outlined"
      >HMAC SHA1</Button>
  }

  return (
    
    <Box>
      <form>
        <Box>
          <TextField
            type="text"
            label="Input"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            variant="standard"
            />
        </Box>

        <Box>
          <TextField
            type="text"
            label="Key"
            value={keyValue}
            onChange={(e) => setKeyValue(e.target.value)}
            variant="standard"
            />
        </Box>
        <HAMCButton />
      </form>
    </Box>

    );
}

export default Logout;

 

 

▶ HAMC Generator

https://www.liavaag.org/English/SHA-Generator/HMAC/