Can CompactEncrypt be used in browsers?

[AsaAyers]

#263

I see there is a ticket that seems like it added browser support, but I haven't been able to get it to work for the scenario I'm looking to build.

Using this function I can encrypt a message in Node, but it seems to crash in each browser.

• Chrome/Edge: Cannot create a key using the specified key usages.
• Firefox: An invalid or illegal string was specified

import * as jose from "jose";

export const encode = TextEncoder.prototype.encode.bind(new TextEncoder());
const testEncryption = async () => {
  const pair = await jose.generateKeyPair("ES256", {
    extractable: true,
  });
  const encoded = encode('Hello World')
  const e = new jose.CompactEncrypt(encoded);
  const alg = "ECDH-ES+A256KW";
  const h = e.setProtectedHeader({ alg, enc: "A256GCM" });
  // This crashes in every browser
  // Chrome/Edge: Cannot create a key using the specified key usages.
  // Firefox: An invalid or illegal string was specified
  const encrypted = await h.encrypt(pair.publicKey);
  return encrypted
};


console.log('Encrypting:')
testEncryption().then((encrypted) => {
  console.log('Encrypted:')
  console.log(encrypted)
}).catch((err) => {
  console.log('Error:')
  console.log(err)
})

w3c/webcrypto#82 (comment)
In my searching I found this message about the WebCrypto not implementing secp256k1. Is that the problem? If it is, do you know if there is a way I can bundle the crypto I need for jose to run in a browser?

[panva]

You just need to generate a key for the correct algorithm. ES256 !== ECDH-ES+A256KW

[AsaAyers]

It's really feeling like something is broken. I'm not aiming for a specific number, so P-256 is fine once I get all the pieces lined up correctly.

Running this in Node produces the output you would expect, but each browser I've tried has crashed. I don't want to waste your time, so hopefully there's a good place to just copy/paste this to try it.

import * as jose from "jose";
const nestedJwt = async () => {
  const crv = "P-256";
  const generateAlg = 'ES256'
  const signAlg = 'ES256'

  // ECDH-ES: DOMException: Cannot create a key using the specified key usages
  const encryptAlg = "ECDH-ES";
  const enc = "A256GCM";


  const encode = TextEncoder.prototype.encode.bind(new TextEncoder());
  const pair = await jose.generateKeyPair(generateAlg, {
    extractable: true,
    crv,
  });
  const privateKey = pair.privateKey;

  const jwt = await new jose.SignJWT({})
    .setSubject("alice")
    .setIssuedAt()
    .setIssuer("https://op.example.com")
    .setProtectedHeader({
      alg: signAlg,
    })
    .sign(privateKey);

  const recipient = await jose.generateKeyPair(generateAlg, {
    extractable: true,
    crv,
  });
  const recipientPublicKey = recipient.publicKey;

  console.log('jwt', jwt)

  const jwe = await new jose.CompactEncrypt(encode(jwt))
    .setProtectedHeader({
      alg: encryptAlg,
      enc,
    })
    .encrypt(recipientPublicKey);

  return jwe;
};

nestedJwt().then((jwe) => {
  console.log("JWE:");
  console.log(jwe);
});

[panva]

I don't know why you insist on generating two key pairs with ES256... the encrypt keypair must have the same alg as the alg you intend the JWE to have.

[AsaAyers]

I don't know why I "inist" on that either. I've just been working on a personal project for a couple weeks, and I'm no closer to understanding what I'm doing wrong than when I started. I'm trying to provide you with a minimal amount of code where you can see the error I get. But instead of any assistance in understanding WHY there is something mismatched or HOW to fix the mismatch, you seem to simply keep confirming that I'm doing it wrong. Thanks, the exception told me that, which is why I'm here.

I kind of thought if 2 people are communicating then you need 2 pairs of keys. So I'd like me to have a key pair, and then my recipient to have a key pair.

Answer: Deleted my project, so I don't care whether jose works in the browser or not anymore

[panva]

I don't get where your frustration comes from, you got very straight answers on what to change to get your ever changing code to work.

Your last just needed the second keypair generate alg to match the jwe alg it is used for, something you already had right after my very first answer so I assumed you learned.

https://jsfiddle.net/njqa18yL/1/

[AsaAyers]

There are clearly some kind of crypto things going on here that I just don't understand. Why do I need a separate signing key and encrypting key? I want the sender to have a key pair and the recipient to have a key pair. But if they need different kinds of keys for signing and encrypting, then each side has to manage 2 pairs of keys.

Why in the world does it work fine in node and crash with a mysterious error in the browser? Everything seems like it matches in the JSFiddle, so I don't know what was mis-matched. What I know for sure is when I try to run my project with npm run dev I can't make this code work. I was looking for some confirmation that you can run the code and verified it's a problem with my setup, or let me know that encAlg is wrong for this senario, it needs to be (X) becasue (Y).

I also had this prototype using node's CLI where I already proved out all my message passing to make sure I could use jose before I spend a bunch of time building out UI components. But the whole premise of my project is that encryption is happening literally on the machine the user is on, so if I need to manage 2 pairs of keys to make this work, I don't care to continue the project.