Understanding End-to-End Encryption in Web Apps

·8 min read
encryptionsecurityweb crypto

End-to-End Encryption (E2EE) is often treated as a buzzword, but it's fundamentally changing how we build secure web applications. Unlike traditional encryption where the server can read your data, E2EE ensures that only you and your intended recipients can decipher the information.

Symmetric vs. Asymmetric Encryption

To understand E2EE, we need to understand the two main types of encryption:

  • Symmetric Encryption: The same key is used to lock (encrypt) and unlock (decrypt) the data. It's fast and efficient, perfect for encrypting large amounts of data like notes or files. AES (Advanced Encryption Standard) is the most common algorithm here.
  • Asymmetric Encryption: Uses a pair of keys—a public key to encrypt, and a private key to decrypt. This is crucial for securely sharing data or establishing secure connections.

Web Crypto API in Action

Modern browsers have powerful encryption capabilities built-in via the Web Crypto API. Here's a simplified example of how you might derive a key and encrypt some data, similar to how Justwrite secures your notes:

// 1. Derive an AES-GCM key from a password using PBKDF2
const deriveKey = async (password, salt) => {
  const enc = new TextEncoder();
  const keyMaterial = await crypto.subtle.importKey(
    "raw", enc.encode(password), { name: "PBKDF2" }, false, ["deriveKey"]
  );
  return crypto.subtle.deriveKey(
    { name: "PBKDF2", salt, iterations: 100000, hash: "SHA-256" },
    keyMaterial,
    { name: "AES-GCM", length: 256 },
    false,
    ["encrypt", "decrypt"]
  );
};

// 2. Encrypt the note content
const encryptNote = async (key, text) => {
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encoded = new TextEncoder().encode(text);
  const ciphertext = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv }, key, encoded
  );
  return { iv, ciphertext };
};

The Magic of URL Hash Fragments

When sharing an encrypted note in Justwrite, we use URL hash fragments (e.g., https://justwrite.sbs/s/note#key=secret). This is a crucial security feature. Browsers do not send the part of the URL after the # to the server. The server only sees /s/note. The browser downloads the encrypted data, extracts the key from the hash, and decrypts the note locally. The server remains completely blind to the contents.

E2EE in the browser empowers developers to build applications that genuinely respect user privacy, shifting the trust from the service provider to the cryptography itself.

Advertisement