SHA stands for Secure Hash Algorithm is a Cryptographic Hashing Algorithm. SHA-256 is the successor of the SHA-1 hash function. A Hash is not an encryption, it is a one-way cryptographic function which cannot be decrypted back. SHA-256 generates a 256-bit (32-byte) unique signature of a text. In this article, we will learn about SHA256 JavaScript using Forge and CryptoJS.
The Libraries such as Forge and CryptoJS contains all the complex code which is needed for hashing and exposes us a simple method which can be called for performing the hashing. Let’s dig into the code.
JavaScript 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 md = forge.md.sha256.create();
md.start();
md.update(plainText, "utf8");
var hashText = md.digest().toHex();
document.getElementById("hashText").innerHTML = hashText;
}
</script>
</head>
<body>
<h1>JavaScript SHA256 Hash Example Using Forge</h1>
<br><strong>Enter the Sample Text : </strong><input id='plainText' type='text' />
<br><br><strong>Hashed Text (SHA256) : </strong><span id='hashText'></span>
<br><br><button onclick="generateHash()">Calculate Hash</button>
</body>
</html>
- In order to use Forge for SHA-256 Hashing, we need to add the dependencies jquery.min.js and forge.all.min.js
- Get the sample text from the user which needs to be hashed
<br><strong>Enter the Sample Text : </strong><input id=’plainText’ type=’text’ />
- The “Calculate Hash” button calls the generateHash() javascript function.
<br><br><button onclick=“generateHash()”>Calculate Hash</button>
- Create the forge instance intialized for sha-256 by calling the create() method
- Pass the plainText received from the user to the update() method along with encoding (utf8)
- 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 in the textbox and click on the “Calculate Hash” button to calculate the hash of the text entered.
JavaScript 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/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9/sha256.js"></script>
<script type="text/Javascript">
function generateHash()
{
var plainText = document.getElementById('plainText').value;
var hashText = CryptoJS.SHA256(plainText);
document.getElementById("hashText").innerHTML = hashText;
}
</script>
</head>
<body>
<h1>JavaScript SHA256 Hash Example Using CryptoJS</h1>
<br><strong>Enter the Sample Text : </strong><input id='plainText' type='text' />
<br><br><strong>Hashed Text (SHA256) : </strong><span id='hashText'></span>
<br><br><button onclick="generateHash()">Calculate Hash</button>
</body>
</html>
- In order to use CryptoJS for SHA-256 Hashing, we will have to add the dependencies core.js and sha256.js
- Get the input text from the user
<br><strong>Enter the Sample Text : </strong><input id=’plainText’ type=’text’ />
- The “Calculate Hash” button calls the generateHash() javascript function.
<br><br><button onclick=“generateHash()”>Calculate Hash</button>
- Now call the SHA256() passing the plainText (input entered by the user), this method returns the hash of the text passed to it.
function generateHash()
{
var plainText = document.getElementById(‘plainText’).value;
var hashText = CryptoJS.SHA256(plainText);
document.getElementById(“hashText”).innerHTML = hashText;
}
Leave a Reply