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>

Thanku for reading !!! Give a Share for Support

Your Support Matters!

Instead of directly asking for donations, I'm thrilled to offer you all nine of my books for just $9 on leanpub By grabbing this bundle you not only help cover my coffee, beer, and Amazon bills but also play a crucial role in advancing and refining this project. Your contribution is indispensable, and I'm genuinely grateful for your involvement in this journey!

Any private key value that you enter or we generate is not stored on this site, this tool is provided via an HTTPS URL to ensure that private keys cannot be stolen, for extra security run this software on your network, no cloud dependency