QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Web Cryptography API Tutorial

Web Cryptography API Tutorial

web-cryptography-api

This post is a part 23 of Advanced JavaScript APIs post series.

Web Cryptography API provides JavaScript interfaces to perform cryptography operations like hashing, symmetric & asymmetric encryption and generating & verifying digital signatures.

In this tutorial I will introduce you to the fundamentals of cryptography and Web Cryptography API.

Uses of Web Cryptography API

There are many use cases of Web Cryptography API. Most common uses of Web Cryptography API are Multi-factor authentication, Protected document exchange, Cloud storage, Document signing, Data integrity protection and Secure messaging.

Secure Origin Policy

Web Cryptography API is accessible by JavaScript only if its running in an secure origin web page.

“Secure origins” are origins that match at least one of the following (scheme, host, port) patterns:

(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)

Supported Cryptography Algorithms

Web Cryptography API supports most of the popular and commonly used cryptography algorithms for hashing, encryption and digital signing.

Here is the list of algorithms supported by Web Cryptography API and what they are used for.

Screen Shot 2015-02-10 at 2.11.45 pm

window.crypto and window.crypto.subtle Objects

window.crypto is the main object of of web cryptography api. It exposes all properties and functions required for in browser cryptography. window.crypto is an asynchronous API.

window.crypto.subtle is the most important property of window.crypto object. window.crypto.subtle object exposes functions for hashing, encryption, decryption, signing, verifying, exporting key, importing key and generating keys.

Here is the window.crypto.subtle interface

enum KeyFormat { "raw", "spki", "pkcs8", "jwk" };

[Exposed=(Window,Worker)]
interface SubtleCrypto {
  Promise<any> encrypt(AlgorithmIdentifier algorithm,
                       CryptoKey key,
                       BufferSource data);
  Promise<any> decrypt(AlgorithmIdentifier algorithm,
                       CryptoKey key,
                       BufferSource data);
  Promise<any> sign(AlgorithmIdentifier algorithm,
                    CryptoKey key,
                    BufferSource data);
  Promise<any> verify(AlgorithmIdentifier algorithm,
                      CryptoKey key,
                      BufferSource signature,
                      BufferSource data);
  Promise<any> digest(AlgorithmIdentifier algorithm,
                      BufferSource data);

  Promise<any> generateKey(AlgorithmIdentifier algorithm,
                          boolean extractable,
                          sequence<KeyUsage> keyUsages );
  Promise<any> deriveKey(AlgorithmIdentifier algorithm,
                         CryptoKey baseKey,
                         AlgorithmIdentifier derivedKeyType,
                         boolean extractable,
                         sequence<KeyUsage> keyUsages );
  Promise<any> deriveBits(AlgorithmIdentifier algorithm,
                          CryptoKey baseKey,
                          unsigned long length);
 
  Promise<any> importKey(KeyFormat format,
                         (BufferSource or JsonWebKey) keyData,
                         AlgorithmIdentifier algorithm,
                         boolean extractable,
                         sequence<KeyUsage> keyUsages );
  Promise<any> exportKey(KeyFormat format, CryptoKey key);

  Promise<any> wrapKey(KeyFormat format,
                       CryptoKey key,
                       CryptoKey wrappingKey,
                       AlgorithmIdentifier wrapAlgorithm);
  Promise<any> unwrapKey(KeyFormat format,
                         BufferSource wrappedKey,
                         CryptoKey unwrappingKey,
                         AlgorithmIdentifier unwrapAlgorithm,
                         AlgorithmIdentifier unwrappedKeyAlgorithm,
                         boolean extractable,
                         sequence<KeyUsage> keyUsages );
};

Polyfill

Web Cryptography API was not there since time therefore many old browser don’t support it. So you can use NfWebCrypto polyfill library to support this API in old browsers.

  • Hashing 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 Arra ...Continue Reading

  • Symmetric Encryption using Web Cryptography API

    In this tutorial I will show you code example of how to generate public key of symmetric encryption and encrypt & decrypt data using the public key. ...Continue Reading

  • Asymmetric Encryption using Web Cryptography API

    In this tutorial I will show you code example of how to generate keys of asymmetric encryption and encrypt & decrypt data using the generated keys. ...Continue Reading

  • Digital Signature using Web Cryptography API

    Suppose person A sends a document to person B. Person A doesn't want Person B to alter the document but can read the document. In this case person A c ...Continue Reading

  • Passphrase Based Encryption using Web Cryptography API

    In this tutorial I will show you how create a symmetric key using a passphrase and then encrypt or decrypt data using that generated key. Convertin ...Continue Reading

Feb 10, 2015Narayan Prusty
Advanced JavaScript APIsIntel XDK Complete Tutorial
Comments: 6
  1. Dennis Yurkevich
    2 years ago

    Hey Narayan , good post!

    Could you possibly write an updated version?

    ReplyCancel
  2. Custom Foam
    3 years ago

    Greatly enjoyed this article :), keep up the great authorship and I’ll keep
    coming back for more. Will be sharing this with my twitter followers and I’m sure they’ll love
    it as well!

    ReplyCancel
  3. PSK
    4 years ago

    How to convert RSA private key to CryptoKey.

    ReplyCancel
  4. David Roon
    5 years ago

    Hi,
    I had problems with your converters ArrayBuffer String

    This saved my life: https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String

    ReplyCancel
  5. Juliano
    5 years ago

    Is possible list the available keys using the webcrypto api? I need to use/show a usb token certificate to one web application that need to use this usb to sign in another site. Tks

    ReplyCancel
    • Samir
      4 years ago

      I also interested in getting csp list. Have you found an answer?

      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.

6 years ago 8 Comments Web Security
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Uses of Web Cryptography API
  • Secure Origin Policy
  • Supported Cryptography Algorithms
  • window.crypto and window.crypto.subtle Objects
  • Polyfill
Related Articles
  • Digital Signature using Web Cryptography API
  • Asymmetric Encryption using Web Cryptography API
  • Symmetric Encryption using Web Cryptography API
  • Hashing using Web Cryptography API
  • Content Security Policy Tutorial with Examples
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license