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

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.


Solution 1:

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).

Solution 2:

I haven't done this myself, but I know that the kind of attack you are worried about is called Cross-site Request Forgery (CSRF). The Wikipedia article on that gives some hints on how to prevent it.