Hash based Message Authentication Code (HMAC) is a mechanism for calculating a Message Authentication Code (MAC) involving hash function in combination with a Secret key. HMAC can be used to verify both the data integrity and the authenticity of the message. In this article, we will learn about JavaScript HMAC SHA256 Hash using Forge and CryptoJS.
HMACs are almost similar to Digital Signatures. They both use cryptographic keys and employ hash functions. The main difference is that Digital Signatures use asymmetric keys, while HMACs use symmetric keys.
HMAC can be used to determine whether a message sent over an insecure channel has been tampered or not, with the condition that the sender and receiver share a secret key. The sender calculate the hash value for the data and sends both the original data and hash value as a single message.On the receiving end, the receiver recalculates the hash value of message which is received and validate whether the HMAC transmitted matches the HMAC which is received.
Any injection or modification to the original data will result in error, as the secret key should be known to reproduce the exact hash value and hence, if the original and computed hash values match, then the message is authentic.
Let’s dig into the code
JavaScript HMAC SHA256 Hash Example Using Forge
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/forge/0.8.2/forge.all.min.js"></script>
<script type="text/Javascript">
function generateHash()
{
var plainText = document.getElementById('plainText').value;
var secretKey = document.getElementById('secretKey').value;
var hmac = forge.hmac.create();
hmac.start('sha256', secretKey);
hmac.update(plainText);
var hashText = hmac.digest().toHex();
document.getElementById("hashText").innerHTML = hashText;
}
</script>
</head>
<body>
<h1>JavaScript HMAC SHA256 Hash Example Using Forge</h1>
<br><strong>Enter the Sample Text : </strong><input id='plainText' type='text' />
<br><br><strong>Enter the Secret Key : </strong><input id='secretKey' type='text' />
<br><br><strong>Hashed Text (HMAC SHA256) : </strong><span id='hashText'></span>
<br><br><button onclick="generateHash()">Calculate Hash</button>
</body>
</html>
- In order to use Forge for HMAC SHA-256 Hashing, we need to add the dependencies jquery.min.js and forge.all.min.js
- Get the data which needs to be hashed and the secret key from the user
<strong>Enter the Sample Text : </strong><input id=’plainText’ type=’text’ />
<strong>Enter the Secret Key : </strong><input id=’secretKey’ type=’text’ />
- The generateHash() method performs the HMAC SHA256 hashing, this method will be called when the user clicks on the “Calculate Hash” button
<button onclick=“generateHash()”>Calculate Hash</button>
- Now create the forge instance initialized for HMAC by calling the create() method
- Call the start() method passing Cryptographic Hash Algorithm which is sha256 in our case and the secret key.
- Pass the plainText which is received from the user to the update()
- The digest() method performs the actual hashing and returns the hashed version of the text passed to it.
- Copy the above code to the text editor and save it with a html extension and open the file in the browser
- Enter the sample text and secret key and click on the “Calculate Hash” button to calculate the hash of the text entered.
JavaScript HMAC SHA256 Hash Example Using CryptoJS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9/hmac-sha256.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9/enc-base64.min.js"></script>
<script type="text/Javascript">
function generateHash()
{
var plainText = document.getElementById('plainText').value;
var secretKey = document.getElementById('secretKey').value;
var hashText = CryptoJS.HmacSHA256(plainText, secretKey);
//document.getElementById("hashText").innerHTML = CryptoJS.enc.Base64.stringify(hashText);
document.getElementById("hashText").innerHTML = hashText;
}
</script>
</head>
<body>
<h1>JavaScript HMAC SHA256 Hash Example Using CryptoJS</h1>
<br><strong>Enter the Sample Text : </strong><input id='plainText' type='text' />
<br><br><strong>Enter the Secret Key : </strong><input id='secretKey' type='text' />
<br><br><strong>Hashed Text (HMAC SHA256) : </strong><span id='hashText'></span>
<br><br><button onclick="generateHash()">Calculate Hash</button>
</body>
</html>
- In order to use CryptoJS for HMAC SHA-256 Hashing, we will have to add the dependencies crypto-js.min.js, hmac-sha256.min.js and enc-base64.min.js
- Get the data which needs to be hashed and the secret key from the user
<strong>Enter the Sample Text : </strong><input id=’plainText’ type=’text’ />
<strong>Enter the Secret Key : </strong><input id=’secretKey’ type=’text’ />
- The generateHash() method will be called when the user clicks on “Calculate Hash” button
<button onclick=“generateHash()”>Calculate Hash</button>
- Pass the plainText (entered by the user) and the secret key to the HmacSHA256(), to perform the hashing
function generateHash()
{
var plainText = document.getElementById(‘plainText’).value;
var secretKey = document.getElementById(‘secretKey’).value;
var hashText = CryptoJS.HmacSHA256(plainText, secretKey);
document.getElementById(“hashText”).innerHTML = hashText;
}
Leave a Reply