클라이언트에서 crypto 모듈 동작 안 할때 해결책

클라이언트에서 crypto 모듈 동작 안 할때 해결책

crypto 가 않되요,,,

crypto 모듈을 써서 항상 암호화를 진행해 왔는데, 클라이언트 (브라우저) 환경에서는 crypto 모듈을 찾지 못하더라

package.json을 수정해서 crypto를 억지로 끌어올 수는 있지만, 그렇게 되면 이번에는 createHash 함수가 작동을 안 한다 (못 찾는다고 나온다 🫠)

이유

https://nodejs.org/api/crypto.html

crypto 모듈은 node.js 빌트인 모듈이라 그렇다

당연히 브라우저 환경에서 돌아가는 클라이언트 단은 node.js를 쓰지 않기 때문에 crypto 모듈이 존재하지 않으므로 오류가 발생한다

해결법

1. SubtleCrypto 사용

https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto

웹 내장 Crypto API (Web Crypto) 인 SubtleCrypto를 사용하면 된다

기본적으로 비동기로 동작하기 때문에 async, await이 필수이다

crypto.subtle.메서드명 으로 메서드를 호출할 수 있다

 

crypto.subtle.encrypt로 암호화, crypto.subtle.decrypt로 복호화 및 crypto.subtle.digest로 해시화를 할 수 있다

단점은 단순 문자열을 넣어 바로 암호화할 수 있던 crypto 모듈과 다르게, 버퍼 배열 (ArrayBuffer) 을 인자로 받으므로 문자열의 비트화 전처리가 필수이다

또한 암호화한 값도 문자열이 아니라 버퍼 배열로 반환하기 때문에 16진수 해시로 변환을 또 해줘야 한다

 

const msgUint8 = new TextEncoder().encode(message); 
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');

https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest

 

위의 예시는 모질라의 crypto.subtle.digest 문서에 있는 예제이다

digest란? 해시 함수를 이용하여 암호화한 값을 의미한다

해시 함수가 메시지를 맛있게 먹고 소화시킨 결과물 (…) 이라고 생각하자…

1. 우선 message 문자열을 TextEncoder() 를 이용하여 uint8 버퍼 (Uint8Array) 로 인코딩 해야 한다
2. SHA-256 알고리즘을 사용하여 해시화하고, 반환값은 ArrayBuffer 형태이다
3. ArrayBuffer를 Uint8Array로 형변환 (생성자를 호출) 한 뒤, 배열로 만든다 (hashArray)
4. 이 배열을 map 메서드를 이용하여 한 글자씩 16진수로 변환한다 (toString(16))
5. 또한 16 미만의 수에 대하여 앞에 0을 넣어준다 (padStart(2, ‘0’))
6. join(’’) 을 통하여 16진수 값 배열을 하나의 문자열로 합친다

2. crypto-js 라이브러리 설치

$> npm install crypto-js
$> npm install -D @types/crypto-js

import { SHA256, enc } from 'crypto-js';

const hashedStr = SHA256(str).toString(enc.Hex);

crypto-js 라이브러리를 설치하면 암호화 해시를 간단하게 만들 수 있다고 한다

---

참고자료

https://stackoverflow.com/questions/67065644/nodejs-crypto-module-not-working-in-browser-after-bundling-with-webpack

https://stackoverflow.com/questions/51999812/node-module-aes256-crypto-createhash-is-not-a-function

https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest