How to keep API keys secret when using client side Javascript?

javascript authentication client-side
Finglas picture Finglas · Oct 21, 2011 · Viewed 19.6k times · Source

For example, check out this Facebook plugin.

In the client side the API key is clearly visible. What is stopping another user from obtaining this key and using this feature on a different site?

I figured a very naive implementation would be to check the domain the request comes from but things like this are easy to fake.

If I were to create something similar, how would I go about securing the authentication process?

I want as much of this work to be client side, though some form of server authentication will be required surely? Any links or advice would be greatly appreciated.

Update

Similar question about API keys that I found useful.

Answer

Piskvor left the building picture Piskvor left the building · Oct 21, 2011

In three words: server-side validation. FB itself will throw an error when you use a key that's incorrect for the given site. The API key is not supposed to be secret (as opposed to the secret key).

Related questions

Use basic authentication with jQuery and Ajax

I am trying to create a basic authentication through the browser, but I can't really get there. If this script won't be here the browser authentication will take over, but I want to tell the browser that the user is …

Read More
How do I remove documents using Node.js Mongoose?

FBFriendModel.find({ id: 333 }, function (err, docs) { docs.remove(); //Remove all the documents that match! }); The above doesn't seem to work. The records are still there. Can someone fix?

Read More
AngularJS: Basic example to use authentication in Single Page Application

I am new to AngularJS and gone through their tutorial and got a feel for it. I have a backend for my project ready where each of the REST endpoints needs to be authenticated. What I want to do a.) …

Read More