Create SHA-256 Hash in JavaScript

As a developer, I’m constantly amazed by the power and versatility that Javascript brings to the table. One such feature that never fails to impress me is its ability to create SHA-256 hashes. Today, I’m excited to take you on a journey where we’ll uncover how to generate a SHA-256 hash in Javascript. So, whether you’re just dipping your toes into the vast ocean of cryptography or you’re a seasoned sailor, this guide has got you covered.

Introduction to SHA-256 Hash

Encryption and hashing have served as the foundation for new security modules, among other network security developments. One of the most used hash algorithms is the Secure Hash Algorithm(SHA) with a digest size of 256 bits, or SHA-256. Although there are numerous variations, SHA 256 has been the most often used in practical applications.

SHA-256 is a part of the SHA 2 family of algorithms, where SHA stands for Secure Hash Algorithm. It was a joint effort between the NSA and NIST to introduce a successor to the weaker SHA 1 family. SHA2 was published in 2001 and has been effective ever since. There is also a successor to SHA2, called the SHA3 algorithms. Interested in knowing the difference between SHA1, SHA2 & SHA3?

The hash function generates the same output hash for the same input string. This means that, you can use this string to validate files or text or anything when you pass it across the network or even otherwise. SHA-256 can act as a stamp or for checking if the data is valid or not.

The 256 in the name SHA-256 refers to the final hash digest value, meaning that regardless of the amount of plaintext or cleartext, the hash value will always be 256 bits.

For example –

Input String	Output Hash
hi	8f434346648f6b96df89dda901c5176b10a6d83961dd3c1ac88b59b2dc327aa4
debugpointer	ce7a00e4bf3e576bceb605c846923a634051ca695ff8a3270af998959e72d265
computer science is amazing! I love it.	a3f2b30d5d6ef9006dd09741aa90d595d8a90666f3fc3c3ae4bf1c1e9a8e3042

Create SHA-256 Hash for Strings

The methods below are for creating it at client-side or browser. If you are looking to generate SHA-256 checksum in nodejs, please follow this article – Create SHA-256 Hash in Node.js and you can also create SHA-256 Hash of a file.

Method 1 – Using cryptography-js SHA-256 hash in HTML code

Here we will be using the above npm package directly in HTML code. We are using version 4.1.1 of the cryptography-js package. Let’s use the Cloudflare CDN links and use <script> tags to import core.min.js and sha256.js scripts.

After that, you can use it in your code as cryptographyJS.SHA256(yourString). Here is an example demonstrating cryptography-js and SHA-256 implementation-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SHA-256</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/sha256.js"></script>
    <script>
      var hash = cryptographyJS.SHA256("This works");
      console.log(hash);
      console.log(hash);
    </script>
  </body>
</html>

The output of the above code as an alert and in the logs will be-

e74358db452b245573586b48e96ab3504c019e79fbf15e8572c74370f37579c5

The above code just produced SHA256 hash of the string alone, but, to strengthen the security you can also generate SHA-256 hash with salt as well.

Creating SHA-256 hash of password in Javascript

You can create SHA-256 hash of a password in the front-end JavaScript by passing the password variable to the SHA256 function of cryptographyJS i.e., cryptographyJS.SHA256(password).

You might be looking for the nodejs implementation of SHA-256 hash using the cryptography library.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SHA256</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/sha256.js"></script>
    <script>
      var password = "Hello@123";
      var passhash = cryptographyJS.SHA256(password);
      console.log(passhash);
    </script>
  </body>
</html>

The output of the above script will be an SHA256 hash of password when you open the file in the browser-

99f2bdf9942653ab32d9dfa0b43c72c3fbbb9679450fd965c590c224897b848a

Method 2 : Using cryptography-js SHA-256 hash using ES6 and require

Let’s get into the modern approach first, using ES6 and cryptography-js module in the frontend. Here, can import the function SHA256 from the package. You can then use it directly to create an SHA-256 hash as shown in the example below-

First install the npm package-

$ bower install cryptography-js

Let’s configure it in require-

require.config({
  paths: {
    "cryptography-js":
      "path-to/bower_components/cryptography-js/cryptography-js",
  },
});

Then you can use it in your code-

require(["cryptography-js"], function (cryptographyJS) {
  console.log(cryptographyJS.SHA256("Hello All"));
});

The output of the above code in the console will be-

94733212265f28ec2d0213188aeeaaf3876a996cb94f13f49968bc414ca47f1f

It’s your choice, use what works best for you.

Prefer SHA-256 or SHA-512 or other superior cryptographic hash functions for creating a hash for passwords, integrity verification.

I’m glad that you found the content useful. And that, my friends, is how we create a SHA-256 hash in Javascript. I sincerely hope that you’ve found this journey both informative and enjoyable. By now, you should be equipped with the knowledge needed to wield this powerful cryptographic tool. Just remember, with great power comes great responsibility, so use your newfound skills wisely and ethically. Keep coding, keep exploring, and most importantly, keep secure! Happy Coding.

Subscribe to Updates

What's Hot