The Web Crypto API: How Browsers Generate Cryptographically Secure Randomness
If you've ever wondered why a browser-based password generator is actually secure, the answer is the Web Crypto API — a standard interface that gives JavaScript direct access to the operating system's cryptographic random number generator. Understanding it is worthwhile for any developer building security-sensitive tooling.
The Problem with Math.random()
Math.random() is a pseudorandom number generator (PRNG). It produces numbers that appear random but are generated from a deterministic algorithm seeded by a small initial value. JavaScript engines don't guarantee a cryptographically strong seed.
In practice this means:
- An attacker who can observe enough output values may be able to predict future values.
- The initial seed may be derived from something predictable like the current time in milliseconds.
- It was never designed for security — it's designed for speed and distribution uniformity in games and simulations.
For password generation, predictable randomness is a critical vulnerability. A password generated with Math.random() could, in principle, be reconstructed by an attacker who understands the RNG state.
The Web Crypto API
The Web Crypto API (specified in the W3C Web Cryptography API standard) exposes cryptographic primitives to JavaScript. It is available in all modern browsers via the global crypto object and covers:
- Cryptographically secure random number generation
- Hashing (SHA-256, SHA-384, SHA-512)
- Key generation, derivation, and management
- Encryption and decryption (AES-GCM, RSA-OAEP, etc.)
- Digital signatures (ECDSA, RSA-PSS)
For password generators, the relevant function is crypto.getRandomValues().
crypto.getRandomValues()
This method fills a typed array with cryptographically secure random values sourced from the OS-level CSPRNG — /dev/urandom on Linux/macOS, BCryptGenRandom on Windows. The same source used to generate TLS keys.
// Fill a 32-byte array with random values
const array = new Uint8Array(32);
crypto.getRandomValues(array);
// Unbiased random integer in range [0, max)
function randomInt(max) {
const range = 2 ** 32;
const limit = range - (range % max);
let r;
do {
const buf = new Uint32Array(1);
crypto.getRandomValues(buf);
r = buf[0];
} while (r >= limit); // rejection sampling to avoid modulo bias
return r % max;
}The rejection sampling loop matters: naive modulo (r % max) introduces a slight bias toward lower values when the range doesn't divide evenly into 2³². For security-critical applications, sample until the value falls within an unbiased range.
How passwordgenai Uses It
Our password generator calls crypto.getRandomValues() for every character selection. No server is involved — the entire operation happens in your browser tab. The generated password is written to the DOM and stays there. No network requests, no logging, no analytics on the output values.
When you click "Regenerate", a new buffer is filled via the OS CSPRNG and mapped to your selected character set. The entropy of the output matches the entropy of the source — for a 20-character password using all character types (95 printable ASCII characters), that is approximately 131 bits. That exceeds current brute-force feasibility by a substantial margin.
Browser Support and the SubtleCrypto Interface
crypto.getRandomValues() has been available in all major browsers since 2013. For more advanced operations like key derivation and encryption, the SubtleCrypto interface (crypto.subtle) exposes the full suite of cryptographic algorithms. All SubtleCrypto methods return Promises and operate on ArrayBuffers.
The Web Crypto API is only available in secure contexts — pages served over HTTPS or from localhost. This is intentional; exposing cryptographic operations to non-secure origins would undermine their value.