How to protect an API Key when using JavaScript?

Question

So, I'm developing a small application just for my own use and perhaps an open source project on Git. I'm using an API from Envato Marketplaces, and as you all know there are some operations that don't require any keys, but in the same time there are some that do require.

I first made a nice API wrapper for the Envato API in PHP, but then I decided to experiment a little bit with JavaScript, so I'm developing the same wrapper with JavaScript. So far I have no problems with the public operations, but I now have to use the API Key.

My question would be if there's a way to protect the API Key in JavaScript. I cannot just put it there in plain text as it can then be used by others who see the code. So would there be an implementation where the API remains secret ? Maybe grabbing it from a JSON text file with XHR ?

Answer 1

Short answer: No

What ever you do to obfuscate the key, you still have to send it to make it available on the client somehow, and therefore it will be possible to extract it using fx. Firebug.

Even if you devise an awesome magical way to keep the key secret, at some point you would have to make the actual API-request, and as it would have to be sent from the browser, an attacker would be able to read out the key in plain text from Firebugs net tab.

The right thing to do is to create a PHP wrapper around the API calls that require keys, and then call that wrapper from Javascript.

Answer 2

My solution right now is to write a little wrapper in rust, and throw it in the /cgi-bin and make calls to that. That should keep the api-key, api creds and session data separate from the client.

Answer 3

The session context is a bit lost concept. However, if your Async request calls your server where your active session can be tracked then before the server makes an API call then the server can add a mapped API key for that request while sending the request to the service provider. The service provider can validate the domain from where the request is received and this will be a more effective way to protect API key and request spoofing.