Proxy wrapping CryptoKey parameters makes them unusable with SubtleCrypto

[joeythomaschaske]

Description

When passing a CryptoKey object from a parent component to a child component the LWC engine wraps these in Proxy objects. When using the proxy wrapped crypto keys with SubtleCrypto they are no longer useable and SubtleCrypto throws the error

TypeError: Failed to execute 'encrypt' on 'SubtleCrypto': parameter 2 is not of type 'CryptoKey'.

Steps to Reproduce

Create 2 components, a parent and a child component. In the parent component create a CryptoKey. From the parent component, pass this key to the child component. Attempt to use the passed in crypto key.

Everything works in this example but that is because the keys are not being wrapped in proxy objects. Inside salesforce, this will throw an error.

https://webcomponents.dev/edit/1wfSgCBD8VCyNSdt01yc/src/app.css?p=stories

Expected Results

Crypto keys work when passed as parameters to other components, like in the given example.

Actual Results

Crypto key is wrapped in a proxy and unuseable by SubtleCrypto.

Browsers Affected

Chrome

[pmdartus]

I am not sure if it is related to the LWC engine wrapping the CryptoKey in a proxy object.

Here is a fork from your example. The only difference is that the keyPair property is marked as @track. The track property forces the CryptoKey to be wrapped inside a proxy and it appears to work as expected.

[joeythomaschaske]

@pmdartus in your fork, if you open the browser dev tools console the child component logs out the keys as a CryptoKey and not a proxy.

Is it possible for you to spin up a scratch org and try my example within salesforce, or for me to give you credentials to a scratch org where this is setup?

I tried to make a new fork with @track properties for the privateKey and publicKey but they aren't being wrapped in proxies like the keyPair. Why does keyPair get wrapped but not the individual CryptoKeys?