CODEWITHSUNDEEP
javascriptcryptographyshopifyhmacsubtlecrypto
Johannes Gontrum
Johannes Gontrum

Reputation: 1161

Wrong result with HMAC verification using SubtleCrypto in JavaScript

I am trying to verify a HMAC signature using the SubtleCrypto API. The whole thing is supposed to run in Cloudflare Workers and I am testing it locally using their wrangler tool.

This is my code so far, but it generates the wrong signature.

const message = "(query params from an url)";
const given_signature = "(extracted from the query params)";
const SECRET = "...";

const algorithm = { name: 'HMAC', hash: 'SHA-256' };
const encoder = new TextEncoder();

const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(SECRET),
    algorithm,
    false,
    ['sign', 'verify']
);

const signature = await crypto.subtle.sign(
    algorithm.name,
    key,
    encoder.encode(message)
);

const digest = btoa(String.fromCharCode(...new Uint8Array(signature)));
// The digest does not match the signature extracted from the query params

// If I, for example, want to verify the signature directly, the result is still false.
const verify = await crypto.subtle.verify(
    algorithm.name,
    key,
    encoder.encode(given_signature),
    encoder.encode(message)
);

If I am using the same secret and message in online HMAC testing tools, I am getting the correct results, so I am certain that there must be a bug in my code.

What I find interesting, is that the signature generated by my code is much shorter than the given one (e.g. 3fn0mhrebHTJMhtOyvRP5nZIhogX/M1OKQ5GojniZTM= vs ddf9f49a1ade6c74c9321b4ecaf44fe67648868817fccd4e290e46a239e26533).

Does anyone have an idea where I am going wrong?

Upvotes: 0

Views: 1105

Answers (1)

Johannes Gontrum
Johannes Gontrum

Reputation: 1161

Thanks to the helpful comments! The problem in a nutshell was that the provided signature was encoded as a HEX string, while the generated signature was a base64-encoded string.

To keep things clean, here is a working version that uses the crypto.subtle.verify function:

const message = "(query params from an url w/o the hmac signature)";
const given_signature = "(the given hmac signature extracted from the query params)";
const SECRET = "(my secret key)";

const hexToBuffer = (hex: string) => {
  const matches = hex.match(/[\da-f]{2}/gi) ?? [];
  const typedArray = new Uint8Array(
    matches.map(function (h) {
      return parseInt(h, 16);
    })
  );
  return typedArray.buffer;
};

const algorithm = { name: "HMAC", hash: "SHA-256" };
const encoder = new TextEncoder();

const key = await crypto.subtle.importKey(
  "raw",
  encoder.encode(SECRET),
  algorithm,
  false,
  ["sign", "verify"]
);

const result: boolean = await crypto.subtle.verify(
  algorithm.name,
  key,
  hexToBuffer(given_signature),
  encoder.encode(message)
);

Upvotes: 0

Related Questions