QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Hashing using Web Cryptography API

Hashing using Web Cryptography API

This post is a part 1 of Web Cryptography API Tutorial post series.
⎘ Next: Symmetric Encryption using Web Cryptography API.

In this tutorial I will show you code example of how to produce hash of data using Web Cryptography API.

Converting String to Array Buffer and Array Buffer to Hexadecimal String

If you need to produce hash value of text or binary data you first need to convert it to an array buffer type so that Web Cryptography API can hash it.

Here is an function to convert string/text to an array buffer type

function convertStringToArrayBufferView(str)
{
    var bytes = new Uint8Array(str.length);
    for (var iii = 0; iii < str.length; iii++)
    {
        bytes[iii] = str.charCodeAt(iii);
    }

    return bytes;
}

After conversion Web Cryptography API returns hash value as hexadecimal in an array buffer. So we need to convert the array buffer to an hexadecimal string.

function convertArrayBufferToHexaDecimal(buffer)
{
    var data_view = new DataView(buffer)
    var iii, len, hex = '', c;

    for(iii = 0, len = data_view.byteLength; iii < len; iii += 1)
    {
        c = data_view.getUint8(iii).toString(16);
        if(c.length < 2)
        {
            c = '0' + c;
        }
   
        hex += c;
    }

    return hex;
}

Generating Hash Value of a String

Here is the code to generate hash value of a string

var data = "QNimate";

var crypto = window.crypto || window.msCrypto;

if(crypto.subtle)
{
    alert("Cryptography API Supported");
   
    var promise = crypto.subtle.digest({name: "SHA-256"}, convertStringToArrayBufferView(data));  
   
    promise.then(function(result){
        var hash_value = convertArrayBufferToHexaDecimal(result);
    });
}
else
{
    alert("Cryptography API not Supported");
}

Here we are using SHA-256 hash function. There are many other hashing functions supported such as SHA-1, SHA-512 etc.

Feb 10, 2015Narayan Prusty
Retrieve MySQL Queries Programatically in WordPressSymmetric Encryption using Web Cryptography API
Comments: 1
  1. ari
    6 years ago

    where I can get the input from the variable str??

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago 1 Comment Web Security
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Converting String to Array Buffer and Array Buffer to Hexadecimal String
  • Generating Hash Value of a String
Related Articles
  • Symmetric Encryption using Web Cryptography API
  • Asymmetric Encryption using Web Cryptography API
  • Passphrase Based Encryption using Web Cryptography API
  • Digital Signature using Web Cryptography API
  • Introduction to Subresource Integrity
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license