QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Home 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
    1 year 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

3 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
Freelance: I am available
@narayanprusty
Hi, I am a developer, speaker, writer and consultant - focusing on HTML5, JavaScript, WordPress, Blockchain and Cordova. You can outsource your website or mobile app development to me.





Will get back to you soon!!!
HTML5
CSS3
JS
PHP
WordPress
MySQL
Intel XDK
AngularJS
NodeJS
Let's get started
My Books


2014 - 2015 © QNimate
All tutorials MIT license