본문 바로가기
dev/javascript

[javascript] 자바스크립트 SHA-256 해시 생성하기

by 최연탄 2023. 4. 25.
728x90
반응형

참고: https://www.debugpointer.com/javascript/create-sha256-hash-in-javascript

암호화 및 해싱은 네트워크 보안 모듈의 기반 역할을 했습니다. 가장 많이 사용되는 해시 알고리즘은 다이제스트 크기가 256비트인 SHA(Secure Hash Algorithm) 또는 SHA 256 입니다. 다양한 변형이 있지만 SHA 256이 실제 응용 프로그램에서 가장 많이 사용되었습니다.

SHA-256은 SHA 2 알고리즘 제품군의 일부이며 SHA는 Secure Hash Algorithm을 나타냅니다. 이는 보다 쉽게 크랙되는 SHA 1 제품군의 후속으로 도입하기위해 NAS와 NIST의 공동 노력이 있었습니다. SHA 2는 2001년에 발표되었으며 그 이후로 계속 사용 가능합니다.

해시 함수는 동일한 입력 문자열에 대해 동일한 출력 해시를 생성합니다. 즉, 해시를 통해 네트워크 데이터나 파일, 텍스트 등을 검증할 수 있습니다. SHA-256은 스탬프 역할을 하거나 데이터가 유효한지 여부를 확인할 수 있습니다.

SHA-256이라는 이름의 256은 최종 해시 다이제스트 값을 의미합니다. 즉, 일반 텍스트 또는 크기에 관계없이 이 해시 결과 값은 항상 256 비트입니다.

다음의 글은 클라이언트나 브라우저에서 SHA-256 해시를 생성하는 방법입니다.

방법 1: HTML 코드에서 crypto-js를 사용해 SHA-256 해시 생성

여기에서는 npm 페키지를 HTML 코드에서 바로 사용합니다. crypto-js 패키지의 버전은 4.1.1을 사용합니다. Cloudflare CDN 링크를 사용하여 <script> 태그에서 core.min.js 및 sha256.js 스크립트를 가져오겠습니다.

그 다음 코드에서 CryptoJS.SHA256() 메소드를 사용할 수 있습니다. 다음은 crypto-js 및 SHA-256의 구현을 보여주는 예제입니다:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>SHA-256</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha256.js"></script>
  <script>
    const hash = CryptoJS.SHA256("This works");

    console.log(hash.toString(CryptoJS.enc.Hex));
  </script>
</body>

</html>

위의 코드를 실행하면 다음과 같은 로그를 볼 수 있습니다.

위의 코드는 문자열 SHA-256 해시만 생성했습니다.

JavaScript로 비밀번호의 SHA-256 해시 생성

password 변수를 CryptoJS의 SHA256 메소드, 즉 CryptoJS.SHA256(password)에 전달하여 프론트엔드 JavaScript에서 password의 SHA-256 해시를 생성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>SHA256</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha256.js"></script>
  <script>
    const password = "Hello@123"
    const passhash = CryptoJS.SHA256(password)

    console.log(passhash.toString(CryptoJS.enc.Hex))
  </script>
</body>

</html>

위 스크립트를 브라우저에서 열면 password의 SHA-256 해시를 확인할 수 있습니다.

99f2bdf9942653ab32d9dfa0b43c72c3fbbb9679450fd965c590c224897b848a

방법 2: ES6와 require로 SHA-256 해시 생성

프론트엔드에서 ES6 및 crypto-js 모듈을 사용하는 현대적인 접근 방식을 알아보겠습니다. 이는 패키지에서 함수 SHA256을 가져올 수 있습니다. 그런 다음 아래 예제와 같이 직접 사용하여 SHA-256 해시를 생성할 수 있습니다.

먼저 npm을 통해 패키지를 설치합니다:

npm install crypto-js

그 다음 js 스크립트 코드에서 다음과 같이 사용할 수 있습니다:

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

cryptoJs.SHA256("Hello All");

이를 실행하면 다음과 같은 해시 값을 얻을 수 있습니다:

94733212265f28ec2d0213188aeeaaf3876a996cb94f13f49968bc414ca47f1f

스크립트를 짤 때 프로젝트에 가장 적합한 알고리즘을 선택하는건 개발자의 선택입니다. 암호나 무결성 확인을 위한 해시를 생성하려면 SHA-256 또는 SHA-512 또는 기타 우수한 암호화 해시를 사용하는게 좋습니다.

관련 글

SHA 해시 알고리즘이란?

자바스크립트 MD5 해시 생성하기

반응형

댓글