Receiving an error of "CryptoKey does not support this operation, its algorithm.name must be AES-KW"

[dalegacusan]

What happened?

I am receiving an error of CryptoKey does not support this operation, its algorithm.name must be AES-KW when using the importJWK method for creating Symmetric JWE Tokens.

For background, I am building a Javascript SDK using Typescript, which then eventually gets compiled to vanilla Javascript using webpack. The vanilla javascript is then hosted on a URL and used in a <script src=""></script> element.

The code snippet below has been used multiple times, but using ReactJS (v17.0.2) and jose (v4.12.0), which works as intended. Just now that when I did not use ReactJS, the error is received. I've tried using the same jose version (v4.12.0) to my existing project, but receiving errors related to the WebAPI Crypto)

This is the code that executes the functions provided below:

    const jweTokenSecretKey: KeyLike | Uint8Array = await createSecretKey(
      secretKey
    );

    const jweToken: string = await createAccessToken(
      JSON.stringify({...}),
      jweTokenSecretKey
    );

Version

^4.12.0

Runtime

Browser

Runtime Details

Node v16.14.2

Code to reproduce

import {
  CompactEncrypt,
  compactDecrypt,
  CompactDecryptResult,
  KeyLike,
  importJWK,
} from 'jose';

export const createSecretKey = async (
  secretKey?: string
): Promise<KeyLike | Uint8Array> => {
  const JWK_ALGORITHM = 'HS256';
  const JWE_DECRYPT_KEY =
    secretKey || '...';

  return importJWK(
    {
      kty: 'oct',
      use: 'enc',
      k: JWE_DECRYPT_KEY,
    },
    JWK_ALGORITHM
  );
};

export const createAccessToken = async (
  payload: any,
  secretKey: KeyLike | Uint8Array
): Promise<string> => {
  const JWE_ALGORITHM = 'A256KW';
  const JWE_ENCRYPTION_ALGORITHM = 'A256CBC-HS512';
  const encoder = new TextEncoder();

  return new CompactEncrypt(encoder.encode(payload))
    .setProtectedHeader({
      alg: JWE_ALGORITHM,
      enc: JWE_ENCRYPTION_ALGORITHM,
    })
    .encrypt(secretKey);
};

export const decryptAccessToken = async (
  token: string,
  secretKey: KeyLike | Uint8Array
): Promise<string> => {
  const decoder = new TextDecoder();
  const { plaintext }: CompactDecryptResult = await compactDecrypt(
    token,
    secretKey
  );

  return decoder.decode(plaintext);
};

Required

• I have searched the issues tracker and discussions for similar topics and couldn't find anything related.
• I agree to follow this project's Code of Conduct

[panva]

Use the JWE_ALGORITHM value instead of JWK_ALGORITHM in importJWK.

[dalegacusan]

That worked, thank you! Just want to ask why suddenly HS256 did not work for importJWK anymore? or was it not suppose to be HS256 in the first place?

[panva]

Why did you put HS256 in there in the first place?

The reason why it works in node and not in webcrypto based runtimes is that node's keyobject has no intended algorithm concept on the KeyObject class. WebCrypto's CryptoKey does.

[panva]

That key import is flawed anyway. You're not importing a JWK, you have a string value you try to represent as jwk.

Just get the raw baseurl-decoded Uint8Array value and use that as your symmetric secret