How can you protect JavaScript application API calls?

Question

I have a JavaScript application.

It is built using jQuery.

It uses $.get() to pull JSON data from the server and uses the data to load the puzzle.

I want to distribute a JavaScript application for clients and simplify their installation.

I would just like to provide them with a JavaScript block that they can put on their page, and it will interact with my API.

I do not transmit sensitive data, any of my API protects the database from SQL injection, etc.

I just want to try to prevent unauthorized use of my API, and I can’t figure out how to do this with JavaScript, since anyone with a DOM inspector can clear any credentials from any variables or control any POST or GET server traffic ...

Can the referrer be authenticated on the other hand?

I know that it is not bulletproof, but this is not sensitive data. I just want to reduce unauthorized use as little as possible.

Any ideas?

note : I know confusing an API key or something is useless, I wonder what other controls I could use instead of a regular key to identify the calling API. I have full control over the API itself, so I can do something from this side ...

Answer 1

With JavaScript, almost any authentication system will have holes, simply because the code runs directly in the browser and can be noticed by anyone (how the network can do this). So there are a few things you can try, depending on your situation.

If you are distributing this application to a small subset of clients, and you know exactly what they will be accessing, you can use the IP whitelist. This is truly the only way to fully protect the API. However, this method is very cumbersome, because with each new client you need to update the whitelist of the API, and given what you are talking about, it’s probably not what you are looking for (but I mention it only because it is an opportunity).

Another method is access tokens. This is a common method used by sites like Facebook. There are two methods for this. One of them is just to give each client a secret key. You may have the same secret key for everyone, but it is not very secure. The presence of another secret key for everyone allows not only to track usage, but also to cancel access if necessary, if necessary.

The first method for access tokens is simply to give it inside the JS client. However, this means that anyone looking at the source will be able to access your key and make requests using it.

The second method is to keep the secret key somewhere on the SERVER server on the website where your client is working. This server can then make a server-to-server call using this key to obtain a temporary session token. People will still be able to access the session token through the interface, but they must first access this site in order to get it (this allows you to give up responsibility for processing this website operator) and the token will eventually expire. However, this means that there must be some kind of server code, and the application will not just drag and drop.

In the above method, you can also look at things like OAuth to avoid re-creating the wheel.

Another possible thing using IP addresses is to set a limit on how often or how many times a day a particular IP address can be whitelisted. Although you may run into problems with users who REALLY love puzzles, this will prevent some of the potential abuse.