Having web client do requests with User's 3rd party API key?

Question

I am trying to figure out the best way to do this. I have done some searching and all I have found is about storing API keys in a back end, nothing like my use-case where there is no back end.

Background:

I am writing a web app which only runs client side, no back end. In essence the app is a visualizer for the responses from a 3rd party API. Each user would provide their own API key and the app would make the API calls on their behalf, then visualize the responses client side.

There is no logging in by the user into anything. The site is an SPA in React which runs totally client side. The only calls the app makes to the wider net is to this 3rd party API (not counting calls to CDNs for resources when the app is first loaded).

Question:

How do I store the API key for the user? I also asked this on r/webdev and the answer I got was in plain text in localStorage which does not feel like a good idea.

Since the keys are not leaving the client except when making API calls which are HTTPS I would assume the only way to get the keys would be via an XSS attack?

Answer 1

Generally browser's local storage and cookies are considered safe, since if user's machine is compromised we can't do anything. However you can (somewhat) increase the security of data at rest with a layer of encryption.

To store the keys securely on user's machine you can request a password from user, which (after passing it through KDF, for example PBKDF2) would decrypt an encrypted container with API credentials (AES+MAC, something like SecretBox from libsodium) which is stored in localStorage.

Any other way I can think of requires you to store encryption key somewhere on the user's device, which only obfuscates the data.

the only way to get the keys would be via an XSS attack

Also check if your site needs to be iframe-able and if not - deny it in server headers. Iframes should be safe, but they have been abused many times in weird and wonderful ways.