Signing a string with HMAC using the Web Crypto API

Below, you can type a plaintext string, and enter a secret key. It will print the signature resulting from signing the plaintext with your secret key.

This is implemented with the Web Cryptography API. Specifically, it uses window.crypto.subtle.sign("HMAC", CryptoKey, ArrayBuffer):

function buf2hex(buf) {
  return Array.prototype.map.call(new Uint8Array(buf), x=>(('00'+x.toString(16)).slice(-2))).join('');
}
async function hmacSha256(key, str) {
  const buf = new TextEncoder("utf-8").encode(str);
  const sig = await window.crypto.subtle.sign("HMAC", key, buf);
  return buf2hex(sig);
}

Your secret key is generated when this page loads. The key is in “JSON Web Key” format. It was generated with window.crypto.subtle.generateKey and exported with window.crypto.subtle.exportKey, like so:

const key = await window.crypto.subtle.generateKey(
  {name:"HMAC","hash":"SHA-256"},
  true,
  ["sign", "verify"]);
secretKeyEl.value = JSON.stringify(
  await window.crypto.subtle.exportKey("jwk", key));

You can edit your key in the textarea, or copy-paste a new one. The key is imported from the textarea with window.crypto.subtle.importKey:

const jwk = JSON.parse(secretKeyEl.value);
const key = await window.crypto.subtle.importKey(
  "jwk",
  jwk,
  {name:"HMAC","hash":"SHA-256"},
  true,
  ["sign", "verify"]);

Tagged #programming, #crypto, #javascript. All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.