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.