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

Plain Text:

Hashed Text:


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



python Cryptography Topics
Topics
For Coffee/ Beer/ Amazon Bill and further development of the project Support by Purchasing, The Modern Cryptography CookBook for Just $9 Coupon Price

Kubernetes for DevOps

Hello Dockerfile

Cryptography for Python Developers

Cryptography for JavaScript Developers

Go lang ryptography for Developers

Here