[SOLVED] WebauthN and Yubikey to generate keys for symmetric encryption in a browser. Is this hack secure?

WebauthN and Yubikey to generate keys for symmetric encryption in a browser. Is this hack secure?

I understand that WebauthN is designed to perform authentication, but I'd like to use my Yubikey to create symmetric encryption keys to encrypt content on my web browser without relying on a backend server.

Here's my approach:

During the assertion challange ( navigator.credentials.get({ publicKey }) ) the Yubikey signs a challenge string that the client sends to the authenticator.
I extract the signed challenge, hash it with SHA256 and use it as my new symmetric encryption key for AES256 encryption.
As long as the same challenge string is sent to the Yubikey, the encryption key will always be the same.

In order to be able to decrypt the content on the web browser. I would have to be in possession of the Yubikey and the challenge string for 2 factor authentication.

Is there anything wrong with this approach?

Solution

Why don't you use the Web Crypto API?

This API is designed for cypher operations on client side and is suitable for your use case (client side encryption). It is supported by all recent browsers.

Note that the main concern you may have is that this API does not supports hardware devices (smartcards, security tokens...).

However, your Yubikey is certainly capable of generating a secured static password you can use as a master key you will derive to encrypt/decrypt your data.