[javascript] 자바스크립트 SHA-256 해시 생성, 문자열 인코딩

최근, 프로젝트에서 이니시스 본인인증 파트를 개발하면서
서버에 사용자가 본인인증을 거치며, 전자서명을 한 값을 서버로 보내야 하는 경우가 있었다.
전자서명을 클라이언트 -> 서버로 보낼 때 이미지 파일을 base64로 변환 후 보내는 과정에서 서버에서 터지는 경우가 발생하여,
여러 시행착오 끝에 base64를 다시 SHA-256로 암호화해서 보내는 방식으로 진행하게 되었고
SHA-256 암호화 방식에 대해 알게 된 내용들을 정리하려고 한다.

 

SHA-256이란?

SHA-256(Secure Hash Algorithm 256-bit)은 암호화 해시 함수로,

입력 데이터를 256비트(32바이트) 크기의 고유한 해시 값으로 변환하는 알고리즘.

SHA-256 해시 함수는 어떤 길이의 값을 입력하더라도 256비트의 고정된 결과값을 출력한다.

이 알고리즘은 암호화된 비밀번호 저장, 전자 서명, 블록체인 분야 등 실제로 가장 많이 사용되고 있음.

 

 

---

'crypto-js' 사용

'crypto-js'라는 라이브러리를 사용해서, 쉽게 데이터를 인코딩 할 수 있음.

하기의 라이브러리를 설치.

npm install crypto-js

 

간단하고 쉬는 예시.

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

 // 해시처리 할 문자열
 const message = 'Hello, World!';

 // SHA-256 해시 생성
 const hash = CryptoJS.SHA256(message).toString(CryptoJS.enc.Hex);

 console.log('SHA-256 Hash:', hash);

 

아래 이미지 처럼, 해시처리된 문자열을 확인 할 수 있다.

 

 

---

순수 자바스크립트로 구현

const sha256 = async (message: any) => {
  // 문자열을 Uint8Array(바이너리 데이터)로 변환
  const msgBuffer = new TextEncoder().encode(message);

  // SHA-256 해시 생성 (결과는 ArrayBuffer 형태)
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);

  // ArrayBuffer를 바이트 배열로 변환
  const hashArray = Array.from(new Uint8Array(hashBuffer));

  // 각 바이트를 16진수 문자열로 변환하여 연결
  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');

  return hashHex;
};

sha256('Hello, World!').then((hash) => console.log('SHA-256 해시:', hash));

 

자바스크립트로만 구현해도 동일한 해시 값을 생성할 수 있다.

 

 

 

 

 

그 외, 

바이너리 데이터(Binary Data)란?

바이너리 데이터란 0과 1로 이루어진 데이터
반적으로 사용하는 문자열, 이미지, 동영상, 오디오 파일 등은 내부적으로 모두 바이너리(0과 1) 데이터로 저장됨

const text = "Hello";  // 사람이 읽을 수 있는 문자열
const binary = new TextEncoder().encode(text);  // 바이너리 데이터 변환
console.log(binary);  // Uint8Array(5) [72, 101, 108, 108, 111]
// 각 숫자는 문자의 ASCII 코드 (H=72, e=101, l=108, l=108, o=111)

 

ArrayBuffer란?

ArrayBuffer는 고정된 크기의 바이너리 데이터를 저장하는 메모리 공간
일반 배열과 달리, ArrayBuffer 자체는 직접 데이터를 읽거나 수정할 수 없음.

const buffer = new ArrayBuffer(8);  // 8바이트 크기의 메모리 공간 생성
console.log(buffer.byteLength);  // 8 (8바이트 할당됨)
// ArrayBuffer(8)을 만들면 8바이트(64비트) 크기의 빈 메모리 공간이 생성

 

Uint8Array란?

Uint8Array는 ArrayBuffer의 데이터를 1바이트(0~255) 단위로 읽고 쓰는 배열
(Uint8 = Unsigned 8-bit Integer, 즉 부호 없는 8비트 정수)

const buffer = new ArrayBuffer(4);  // 4바이트 메모리 공간 생성
const uint8 = new Uint8Array(buffer);  // 1바이트씩 접근 가능한 배열 생성

uint8[0] = 10;
uint8[1] = 20;
uint8[2] = 30;
uint8[3] = 40;

console.log(uint8);  // Uint8Array(4) [10, 20, 30, 40]