AES Encryption in the Browser — JavaScript 2026

✓ Last tested: June 2026 · Verified against W3C Web Crypto API Spec & Chrome 124+

1. Field Notes: The Dependency That Almost Sank Our Audit

During a routine security audit for a client's healthcare portal, we found a critical flaw. They were building an end-to-end encrypted chat feature, which was a great idea. However, they were using a highly outdated, unmaintained version of a popular JavaScript cryptography library to handle their AES encryption.

Worse, to save on bundle size, a previous developer had hardcoded a static Initialization Vector (IV) for all messages.

// DO NOT DO THIS
const iv = CryptoJS.enc.Utf8.parse('1234567890123456'); 

By reusing the IV in a stream cipher mode, they had completely nullified the encryption. Any network eavesdropper could trivially XOR two ciphertexts together to read the plain text of the patients' messages.

We ripped out the 300kb library and replaced it with just 40 lines of native Web Crypto API code. We switched them to AES-GCM (which authenticates the ciphertext) and ensured a cryptographically secure random IV was generated for every single message. Not only did we pass the compliance audit, but the site loaded faster and encrypted payloads in a fraction of the time due to the browser's hardware acceleration.

In 2026, there is zero reason to use external libraries for standard AES encryption in the browser. The tools are already built in.

---

2. What Is AES Encryption and Which Mode Should You Use in 2026?

Advanced Encryption Standard (AES) is a symmetric encryption algorithm. "Symmetric" means you use the exact same key to encrypt the data as you do to decrypt it.

When you use AES, you must choose a "Mode of Operation"—essentially the algorithm's strategy for encrypting data longer than a standard 128-bit block.

Mode	Security	Authenticated?	Use Case	Winner
AES-CBC	Moderate	❌ No	Legacy systems	❌
AES-CTR	Moderate	❌ No	Fast streaming	❌
AES-GCM	High	✅ Yes	Modern web & APIs	🏆

Why AES-GCM? GCM (Galois/Counter Mode) provides Authenticated Encryption with Associated Data (AEAD). If an attacker intercepts your AES-CBC ciphertext and flips a few bits, your decryption algorithm will process it, resulting in corrupted (but potentially dangerous) data. If an attacker tampers with AES-GCM ciphertext, the decryption process will instantly throw an error because the built-in authentication tag won't match.

---

3. How to Encrypt Data in the Browser With Web Crypto API

Let's write the exact JavaScript code needed to encrypt a string using AES-256-GCM.

Step 1 — Generate a Cryptographic Key

The Web Crypto API uses CryptoKey objects, not raw strings, for security.

async function generateAesKey() {
  return await window.crypto.subtle.generateKey(
    {
      name: "AES-GCM",
      length: 256 // AES-256
    },
    true, // extractable (can be exported later)
    ["encrypt", "decrypt"]
  );
}

Step 2 — Create a Random IV (Initialization Vector)

An IV ensures that encrypting the same message twice produces completely different ciphertexts. It does not need to be kept secret, but it must be unique for every encryption.

// AES-GCM requires a 12-byte (96-bit) IV
const iv = window.crypto.getRandomValues(new Uint8Array(12));

Step 3 — Encrypt the Data

The Web Crypto API only works with ArrayBuffer objects, so we need to encode our string first.

async function encryptMessage(message, key, iv) {
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);

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

  return new Uint8Array(ciphertext);
}

Step 4 — Store Key and IV Safely

To send the encrypted data over the network, you usually bundle the IV with the ciphertext (e.g., iv + ciphertext).

// Example usage:
const key = await generateAesKey();
const iv = window.crypto.getRandomValues(new Uint8Array(12));
const encrypted = await encryptMessage("Secret Data", key, iv);

// Combine IV and Ciphertext for storage/transmission
const payload = new Uint8Array(iv.length + encrypted.length);
payload.set(iv);
payload.set(encrypted, iv.length);

---

4. How to Decrypt AES-Encrypted Data

To decrypt, we reverse the process: extract the IV, extract the ciphertext, and decrypt it back into a string.

async function decryptMessage(payload, key) {
  // 1. Extract the 12-byte IV
  const iv = payload.slice(0, 12);
  
  // 2. Extract the ciphertext
  const ciphertext = payload.slice(12);

  try {
    // 3. Decrypt
    const decryptedBuffer = await window.crypto.subtle.decrypt(
      {
        name: "AES-GCM",
        iv: iv
      },
      key,
      ciphertext
    );

    // 4. Decode to string
    const decoder = new TextDecoder();
    return decoder.decode(decryptedBuffer);
  } catch (e) {
    throw new Error("Decryption failed. Incorrect key or tampered data.");
  }
}

---

5. AES Key Management — The Part Most Guides Skip

Generating a random key is easy. But what if you want to encrypt a file using a user's password?

You cannot use a password directly as an AES key. You must use a Key Derivation Function (KDF) like PBKDF2 to stretch the password into a secure CryptoKey.

async function deriveKeyFromPassword(password, salt) {
  const encoder = new TextEncoder();
  
  // 1. Import password as raw key material
  const keyMaterial = await window.crypto.subtle.importKey(
    "raw",
    encoder.encode(password),
    { name: "PBKDF2" },
    false,
    ["deriveBits", "deriveKey"]
  );

  // 2. Derive the AES-GCM key
  return await window.crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: salt, // Must be random and stored with the ciphertext!
      iterations: 600000, // OWASP recommended minimum for 2026
      hash: "SHA-256"
    },
    keyMaterial,
    { name: "AES-GCM", length: 256 },
    false, // non-extractable for better security
    ["encrypt", "decrypt"]
  );
}

---

6. Common AES Encryption Mistakes in JavaScript

After reviewing hundreds of frontend implementations, here is what I see break most often:

• Using AES-ECB: Electronic Codebook mode is highly insecure because identical blocks of plain text produce identical blocks of ciphertext (the famous "ECB Penguin" vulnerability).
• Hardcoding the IV: Reusing an IV in GCM mode allows attackers to instantly crack your encryption.
• Storing keys in localStorage: If your site has a single XSS vulnerability, the attacker can extract the AES keys and decrypt everything. Keep keys in memory, or use IndexedDB and set extractable: false when generating them.
• Using Math.random() for cryptography: Never use Math.random(). Always use window.crypto.getRandomValues().

---

7. AES vs RSA — Which to Use and When?

Developers often confuse symmetric (AES) and asymmetric (RSA/ECC) encryption.

Feature	AES (Symmetric)	RSA / ECC (Asymmetric)
Keys	One key (Shared secret)	Two keys (Public + Private)
Speed	Extremely Fast	Very Slow
Data Size limit	Unlimited (Terabytes)	Extremely small (A few kilobytes)
Best For	Encrypting files, databases, chat messages.	Encrypting AES keys to share them safely over a network.

The 2026 Hybrid Approach: Use RSA to safely share an AES key between two users. Then, use that AES key to encrypt the actual massive payloads.

---

Frequently Asked Questions

Q: Does Web Crypto API work offline? A: Yes! It relies entirely on the browser's local execution environment. No data is sent to a server.

Q: Can I decrypt Web Crypto API AES data in Node.js or Python? A: Yes. AES is an international standard. As long as you share the Key, the IV, and the Ciphertext, you can decrypt the payload in Node.js (crypto module), Python (cryptography package), or PHP.

---

Test your encryption knowledge directly in your browser. Use our free AES Encryption Tool to encrypt strings offline using the Web Crypto API, or try our Hash Generator to see one-way cryptography in action →

---

External Sources

• W3C Web Cryptography API Specification
• MDN Web Docs: window.crypto.subtle
• OWASP Cryptographic Storage Cheat Sheet

---

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro Github

Last updated: June 2026