Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

deriveKey(algorithm, baseKey, derivedKeyType, extractable, keyUsages)

Note:You cantry the working examples on GitHub.

/*Derive an AES key, given:- our ECDH private key- their ECDH public key*/function deriveSecretKey(privateKey, publicKey) {  return window.crypto.subtle.deriveKey(    {      name: "ECDH",      public: publicKey,    },    privateKey,    {      name: "AES-GCM",      length: 256,    },    false,    ["encrypt", "decrypt"],  );}async function agreeSharedSecretKey() {  // Generate 2 ECDH key pairs: one for Alice and one for Bob  // In more normal usage, they would generate their key pairs  // separately and exchange public keys securely  let aliceKeyPair = await window.crypto.subtle.generateKey(    {      name: "ECDH",      namedCurve: "P-384",    },    false,    ["deriveKey"],  );  let bobKeyPair = await window.crypto.subtle.generateKey(    {      name: "ECDH",      namedCurve: "P-384",    },    false,    ["deriveKey"],  );  // Alice then generates a secret key using her private key and Bob's public key.  let aliceSecretKey = await deriveSecretKey(    aliceKeyPair.privateKey,    bobKeyPair.publicKey,  );  // Bob generates the same secret key using his private key and Alice's public key.  let bobSecretKey = await deriveSecretKey(    bobKeyPair.privateKey,    aliceKeyPair.publicKey,  );  // Alice can then use her copy of the secret key to encrypt a message to Bob.  let encryptButton = document.querySelector(".ecdh .encrypt-button");  encryptButton.addEventListener("click", () => {    encrypt(aliceSecretKey);  });  // Bob can use his copy to decrypt the message.  let decryptButton = document.querySelector(".ecdh .decrypt-button");  decryptButton.addEventListener("click", () => {    decrypt(bobSecretKey);  });}

<label for="message">Plaintext message from Alice (Enter):</label><input  type="text"   name="message"  size="50"  value="The lion roars near dawn" /><input type="button" value="Encrypt" />

<div>  <label for="encrypted">Encrypted (Alice)</label>  <input    type="text"       name="encrypted"    size="30"    value=""    readonly />  <label for="results">Decrypted (Bob)</label>  <input    type="text"       name="decrypted"    size="50"    value=""    readonly /></div>

<pre></pre>

input {  display: block;  margin: 5px 0px;}#results {  margin-top: 20px;}#log {  height: 150px;  width: 90%;  white-space: pre-wrap; /* wrap pre blocks */  overflow-wrap: break-word; /* break on words */  overflow-y: auto;  padding: 0.5rem;  border: 1px solid black;  margin-top: 20px;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

/*Derive an AES-GCM key, given:- our X25519 private key- their X25519 public key*/function deriveSecretKey(privateKey, publicKey) {  return window.crypto.subtle.deriveKey(    {      name: "X25519",      public: publicKey,    },    privateKey,    {      name: "AES-GCM",      length: 256,    },    false,    ["encrypt", "decrypt"],  );}

async function encryptMessage(key, initializationVector, message) {  try {    const encoder = new TextEncoder();    encodedMessage = encoder.encode(message);    // iv will be needed for decryption    return await window.crypto.subtle.encrypt(      { name: "AES-GCM", iv: initializationVector },      key,      encodedMessage,    );  } catch (e) {    console.log(e);    return `Encoding error`;  }}async function decryptMessage(key, initializationVector, ciphertext) {  try {    const decryptedText = await window.crypto.subtle.decrypt(      // The iv value must be the same as that used for encryption      { name: "AES-GCM", iv: initializationVector },      key,      ciphertext,    );    const utf8Decoder = new TextDecoder();    return utf8Decoder.decode(decryptedText);  } catch (e) {    console.log(e);    return "Decryption error";  }}

async function agreeSharedSecretKey() {  try {    // Generate 2 X25519 key pairs: one for Alice and one for Bob    // In more normal usage, they would generate their key pairs    // separately and exchange public keys securely    const aliceKeyPair = await window.crypto.subtle.generateKey(      {        name: "X25519",      },      false,      ["deriveKey"],    );    log(      `Created Alice's key pair: (algorithm: ${JSON.stringify(        aliceKeyPair.privateKey.algorithm,      )}, usages: ${aliceKeyPair.privateKey.usages})`,    );    const bobKeyPair = await window.crypto.subtle.generateKey(      {        name: "X25519",      },      false,      ["deriveKey"],    );    log(      `Created Bob's key pair: (algorithm: ${JSON.stringify(        bobKeyPair.privateKey.algorithm,      )}, usages: ${bobKeyPair.privateKey.usages})`,    );    // Alice then generates a secret key using her private key and Bob's public key.    const aliceSecretKey = await deriveSecretKey(      aliceKeyPair.privateKey,      bobKeyPair.publicKey,    );    log(      `aliceSecretKey: ${aliceSecretKey.type} (algorithm: ${JSON.stringify(        aliceSecretKey.algorithm,      )}, usages: ${aliceSecretKey.usages}), `,    );    // Bob generates the same secret key using his private key and Alice's public key.    const bobSecretKey = await deriveSecretKey(      bobKeyPair.privateKey,      aliceKeyPair.publicKey,    );    log(      `bobSecretKey: ${bobSecretKey.type} (algorithm: ${JSON.stringify(        bobSecretKey.algorithm,      )}, usages: ${bobSecretKey.usages}), \n`,    );    // Get access for the encrypt button and the three inputs    const encryptButton = document.querySelector("#encrypt-button");    const messageInput = document.querySelector("#message");    const encryptedInput = document.querySelector("#encrypted");    const decryptedInput = document.querySelector("#decrypted");    encryptButton.addEventListener("click", async () => {      log(`Plaintext: ${messageInput.value}`);      // Define the initialization vector used when encrypting and decrypting.      // This must be regenerated for every message!      const initializationVector = window.crypto.getRandomValues(        new Uint8Array(8),      );      // Alice can use her copy of the shared key to encrypt the message.      const encryptedMessage = await encryptMessage(        aliceSecretKey,        initializationVector,        messageInput.value,      );      // We then display part of the encrypted buffer and log the encrypted message      let buffer = new Uint8Array(encryptedMessage, 0, 5);      encryptedInput.value = `${buffer}...[${encryptedMessage.byteLength} bytes total]`;      log(        `encryptedMessage: ${buffer}...[${encryptedMessage.byteLength} bytes total]`,      );      // Bob uses his shared secret key to decrypt the message.      const decryptedCiphertext = await decryptMessage(        bobSecretKey,        initializationVector,        encryptedMessage,      );      decryptedInput.value = decryptedCiphertext;      log(`decryptedCiphertext: ${decryptedCiphertext}\n`);    });  } catch (e) {    log(e);  }}// Finally we call the method to set the example running.agreeSharedSecretKey();

/*Get some key material to use as input to the deriveKey method.The key material is a password supplied by the user.*/function getKeyMaterial() {  const password = window.prompt("Enter your password");  const enc = new TextEncoder();  return window.crypto.subtle.importKey(    "raw",    enc.encode(password),    "PBKDF2",    false,    ["deriveBits", "deriveKey"],  );}async function encrypt(plaintext, salt, iv) {  const keyMaterial = await getKeyMaterial();  const key = await window.crypto.subtle.deriveKey(    {      name: "PBKDF2",      salt,      iterations: 100000,      hash: "SHA-256",    },    keyMaterial,    { name: "AES-GCM", length: 256 },    true,    ["encrypt", "decrypt"],  );  return window.crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, plaintext);}

/*  Given some key material and some random salt,  derive an AES-GCM key using HKDF.  */function getKey(keyMaterial, salt) {  return window.crypto.subtle.deriveKey(    {      name: "HKDF",      salt,      info: new TextEncoder().encode("Encryption example"),      hash: "SHA-256",    },    keyMaterial,    { name: "AES-GCM", length: 256 },    true,    ["encrypt", "decrypt"],  );}async function encrypt(secret, plainText) {  const message = {    salt: window.crypto.getRandomValues(new Uint8Array(16)),    iv: window.crypto.getRandomValues(new Uint8Array(12)),  };  const key = await getKey(secret, message.salt);  message.ciphertext = await window.crypto.subtle.encrypt(    {      name: "AES-GCM",      iv: message.iv,    },    key,    plainText,  );  return message;}

Help improve MDN

This page was last modified on⁨Sep 17, 2025⁩ byMDN contributors.