- Published on
Create SHA3-256 Hash in Javascript
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-3 (Secure Hash Algorithm 3) is the latest member of the Secure Hash Algorithm family of standards. Although part of the same series of standards, SHA-3 is internally different from the MD5-like structure of SHA-1 and SHA-2. SHA-3 instances are drop-in replacements for SHA-2, intended to have identical security properties. The SHA-3 family consists of six hash functions with digests (hash values) that are 128, 224, 256, 384 or 512 bits: SHA3-224, SHA3-256, SHA3-384, SHA3-512, SHAKE128, SHAKE256.
The SHA-3 or Keccak algorithm is one of the most secure and efficient hashing algorithms and some claim that it won’t be cracked in the next 20 - 30 years. Developments in the quantum computing world might decrease that time frame but it is still one of the best hashing algorithm we have got right now.
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. SHA3-256 can act as a stamp or for checking if the data is valid or not.
The 256 in the name SHA3-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 | b39c14c8da3b23811f6415b7e0b33526d7e07a46f2cf0484179435767e4a8804 |
debugpointer | 5bd28b8b5e1c0c8355362e581d0c478842ee79840adfe0307139179a2ff5d5de |
computer science is amazing! I love it. | 9d9c88852fed897f23a898f0994b325cff9c70b629c96eff3739c4ffb1459edf |
The methods below are for creating it at client-side or browser. If you are looking to generate SHA3-256 checksum in nodejs, please follow this article - Create SHA3-256 Hash in Node.js and if you are looking to create SHA3-256 Hash of a file you can check this article.
Method 1 - Using crypto-js SHA3 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 crypto-js
package. Let's use the Cloudflare CDN links and use <script>
tags to import core.min.js
and sha3.js
scripts.
After that, you can use it in your code as CryptoJS.SHA3(yourString, { outputLength: hashLength })
. Here is an example demonstrating crypto-js
and SHA256
implementation-
<!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/crypto-js/4.1.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha3.js"></script>
<script>
var hash = CryptoJS.SHA3("This works", { outputLength: 256 })
console.log(hash)
console.log(hash)
</script>
</body>
</html>
The output of the above code as an alert and in the logs will be-
bf883cb919f2b643ed34916e9c639080befd410671692ffafc1a8578e82cd1ad
Creating SHA3-256 hash of password in Javascript
You can create SHA3-256 hash of a password in the front-end JavaScript by passing the password
variable to the SHA3
function of CryptoJS by passing outputLength
with value 256 i.e., CryptoJS.SHA3(password, { outputLength: 256 })
.
You might be looking for the nodejs implementation of SHA3-256 hash using the crypto library.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SHA3 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/sha3.js"></script>
<script>
var password = "Hello@123"
var passhash = CryptoJS.SHA3(password, { outputLength: 256 })
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-
714ccbeba702689dde4aaf7aa9982c2d72fddbad837f443846b1f6dc649ceb62
Method 2 : Using crypto-js SHA3 hash using ES6 and require
Let's get into the modern approach first, using ES6 and crypto-js
module in the frontend. Here, can import the function SHA256
from the package. You can then use it directly to create an SHA256 hash as shown in the example below-
First install the npm package-
$ bower install crypto-js
Let's configure it in require-
require.config({
paths: {
"crypto-js": "path-to/bower_components/crypto-js/crypto-js",
},
})
Then you can use it in your code-
require(["crypto-js"], function (CryptoJS) {
console.log(CryptoJS.SHA3("Hello All", { outputLength: 256 }))
})
The output of the above code in the console will be-
93a40473c170b526fdd4be43056a89d9460c20c01dbbef781a968b6e9ee965be
It's your choice, use what works best for you.
Prefer SHA3-256 or SHA3-512 or other superior cryptographic hash functions for creating a hash for passwords, integrity verification.
I'm glad that you found the content useful. Happy Coding.