Securing API key used to make Web Api call

Question

I am making a Jquery Ajax web api call . That Api call requires me to pass the Api key. I have enabled CORS. Here is how my call looks currently

$.ajax({
  type: "POST",
  url: http://localhost:83/test/example1,
  data: { name: JSON.stringify(myObject), userId: UserId },
  dataType: "json",               
  headers: {
      'apikey': 'asdfee'
  });

My question is how do I securely pass this key? I don't want to directly expose the value.
Any directions please?

Answer 1

In short, you cannot secure the key on the client side. Anything on the client side is exposed and can be viewed by anyone.

This being said, there are ways you can attempt this.

1. Try to make it as hard as possible for anyone trying to get your key. This means store in something like local storage and minify your JavaScript code. This isn't 100% but it will make life harder for anyone trying to get it.

2. Introduce another layer in between. I have done something like this myself, this extra layer is another API. This is where you store the key and this is where you communicate with the other API. So basically you never expose the API key to the client side. Your front end call this new API and the new API calls the protected one. As I said, one extra layer in between but it does help keep the key secure.