Digest/Hashing using Web Cryptography API

by Anish

Posted on Sunday september 16, 2018

---

This sample chapter extracted from the book, Cryptography for JavaScript Developers.

---

The Crypto interface represents an interface to general purpose cryptographic functionality including a cryptographically strong pseudo-random number generator seeded with truly random values.

The SubtleCrypto.digest() method returns a Promise of a digest generated from the hash function and text given as parameters.

The Syntax

var hash = crypto.subtle.digest(algo, buffer);

web crypto digest api supports family of SHA algorithms, older hashing algorithms family like MD5 is not supported by this api

---

The Demo

---

The java script code for crypto.subtle.digest

 <script type="text/javascript">
    function SHA_256_HASH() {

        var str = document.getElementById("plainTextGCM").value;
        var buffer = new TextEncoder("utf-8").encode(str);
        return crypto.subtle.digest("SHA-256", buffer).then(
            function (hash) {
                document.getElementById("hashtext").value = hex(hash)
            }
        );
    }
    function SHA_512_HASH() {

        var str = document.getElementById("plainTextGCM").value;
        var buffer = new TextEncoder("utf-8").encode(str);
        return crypto.subtle.digest("SHA-512", buffer).then(
            function (hash) {
                document.getElementById("hashtext").value = hex(hash)
            }
        );
    }

    function SHA_1_HASH() {

        var str = document.getElementById("plainTextGCM").value;
        var buffer = new TextEncoder("utf-8").encode(str);
        return crypto.subtle.digest("SHA-1", buffer).then(
            function (hash) {
                document.getElementById("hashtext").value = hex(hash)
            }
        );
    }

function hex(buffer) {
    var hexCodes = [];
    var view = new DataView(buffer);
    for (var i = 0; i < view.byteLength; i += 4) {
        // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
        var value = view.getUint32(i)
        // toString(16) will give the hex representation of the number without padding
        var stringValue = value.toString(16)
        // We use concatenation and slice for padding
        var padding = '00000000'
        var paddedValue = (padding + stringValue).slice(-padding.length)
        hexCodes.push(paddedValue);
    }
    // Join all the hex strings into one

    return hexCodes.join("");
}
</script>

The HTML

 <div>
    Plain Text: <input type="text" id="plainTextGCM" value="Hello 8gwifi.org">
    <button type="button" onclick="SHA_1_HASH()">sha1</button>
    <button type="button" onclick="SHA_256_HASH()">sha256</button>
    <button type="button" onclick="SHA_512_HASH()">sha512</button>
    

</div>
<div>
    Hashed Text: <input type="text" id="hashtext" size="120">
</div>

---

Download the sample code here

---

Thanku for reading !!! Give a Share for Support

Asking for donation sound bad to me, so i'm raising fund from by offering all my Nine book for just $9

---

---