JavaScript Crypto: A Complete Overview and Practical Guide

JavaScript provides a library called Crypto API, designed to securely manage operations such as:

random number generation
hash creation
data encryption and decryption
cryptographic key management

This library has nothing to do with cryptocurrencies.
It is used exclusively to protect information in web applications.

The aim of this article is:

understanding what the Crypto API is
understanding what is crypto.subtle
seeing what problems it solves
learning how to use it with simple examples and concrete

🔗 Do you like Techelopment? Take a look at the website for all the details!

1. What is the JavaScript Crypto API (overview)?

The Crypto API is a browser-integrated library (and Node.js) accessible via the global object:

crypto

This library is divided into two main parts:

Part	What is it for?
`crypto.getRandomValues()`	Secure random numbers
`crypto.subtle`	All operations Cryptographic

📌 This is the key point of the article:
Everything about real cryptography is in crypto.subtle

2. Why `crypto.subtle`

exists

Cryptography:

is complex
uses advanced mathematics
must be extremely secure

Therefore, JavaScript:

does not expose simple algorithms
forces the use of a controlled API
makes operations asynchronous

The name subtle indicates that:

Cryptography is “thin,” delicate, and must be used with care.

3. What you can do with `crypto.subtle`

crypto.subtle is an object that contains several methods.

Overview of main functions

Function	Used for
`digest()`	Create hashes
`generateKey()`	Create keys
`encrypt()`	Encrypt data
`decrypt()`	Decrypt data
`sign()`	Sign data
`verify()`	Verify signatures

In this article we will focus on:

digest
generateKey
encrypt
decrypt

4. Before you begin: text and binary data

The Crypto API does not work with strings.
It works with bytes.

Why?

Computers only understand numbers.

Converting a string to bytes

const encoder = new TextEncoder();
const data = encoder.encode("Hello World");

Converting bytes to string

const decoder = new TextDecoder();
const text = decoder.decode(data);

This conversion is required in all subsequent examples.

5. `crypto.subtle.digest`: create a hash

What is a hash (in brief)

transforms a text into a fixed string
It is irreversible
is mostly used for passwords

Practical example: SHA-256 hash

async function createHash(text) { 
  const encoder = new TextEncoder(); 
  const data = encoder.encode(text); 
  
  const hashBuffer = await crypto.subtle.digest( 
    "SHA-256", 
    data 
  ); 
  
  const hashArray = Array.from(new Uint8Array(hashBuffer)); 
  return hashArray 
  .map(b => b.toString(16).padStart(2, "0")) 
  .join("");
}

Usage

createHash("password123").then(console.log);

6. `crypto.subtle.generateKey`: Create a key

Encryption and decryption require cryptographic keys.

Example: AES key

const key = await crypto.subtle.generateKey(
  {
    name: "AES-GCM",
    length: 256
  },
  true,
  ["encrypt", "decrypt"]
);

What we're doing

Choose the algorithm
Define security
Say what the key can do

7. `crypto.subtle.encrypt`: Encrypt a message

What is encryption?

hides the content
can be reversed
requires a key

Complete example

const iv = crypto.getRandomValues(new Uint8Array(12));

const encoder = new TextEncoder();

const message = encoder.encode("Secret message");

const encrypted = await crypto.subtle.encrypt(
  { name: "AES-GCM", iv },
  key,
  message
);

The result is binary data, not text.

8. `crypto.subtle.decrypt`: Decrypt the message

const decrypted = await crypto.subtle.decrypt(
  { name: "AES-GCM", iv },
  key,
  encrypted
);

const decoder = new TextDecoder();
console.log(decoder.decode(decrypted));

If:

key
iv
encrypted data

are correct → the original text is recovered.

9. Role of `crypto.getRandomValues`

Outside crypto.subtle we find:

crypto.getRandomValues()

Used for:

iv
token
secure random values

const random = new Uint8Array(1);
crypto.getRandomValues(random);

10. Final Summary (Logic)

crypto is the core library
crypto.subtle is the heart of cryptography
works only with bytes
digest → hash
generateKey → keys
encrypt / decrypt → data protection

Conclusion – General Recap

In this article, we've seen in a progressive and orderly fashion how the JavaScript Crypto API works and what problem it solves.

We started with a general overview, clarifying that:

crypto is the main object provided by JavaScript
The real cryptography is concentrated in crypto.subtle
This library is used to protect data; it has nothing to do with cryptocurrencies.

Next, we delved into the library's practical operation, learning that:

The Crypto API only works with binary data, not strings.
Strings must be converted to bytes before being processed.
All cryptographic operations are asynchronous.

We then analyzed the main functions of crypto.subtle through concrete examples:

digest() to create hashes (like those used for passwords)
generateKey() to create secure cryptographic keys
encrypt() to encryptdata
decrypt() to securely recover it

Finally, we saw the fundamental role of crypto.getRandomValues(), essential for generating secure random values such as IVs, tokens, and temporary keys.

Understanding these concepts and using them in the correct order allows you to write more secure, professional, and reliable web applications, avoiding common errors and bad practices.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog