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, *, —)
(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.
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 );
};
[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
