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?

There is no right solution for that. Any possible way to store the key can be read by browser = can be read by everyone with the access to your browser — Evgeny Gorbovoy
– Evgeny Gorbovoy, Commented Mar 21, 2018 at 16:52
how do I securely pass this key you can pass the key securely using SSL but that only secures the communication. There is no way to securely store that key in your code as it's openly visible to everyone. To secure keys like this is typical to use some flavour of OAuth though even this is no longer standardised. Basically this isn't security (full stop) — Liam
– Liam, Commented Mar 21, 2018 at 16:54
If you're concerned about this, you should use an AJAX post to a controller on your server and then your server can safely post to the API requiring the API key. — ethane
– ethane, Commented Mar 21, 2018 at 17:08

Andrei Dragotoniu · Accepted Answer · 2018-03-21 17:20:18Z

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.

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

answered Mar 21, 2018 at 17:20

Andrei Dragotoniu

6,3753 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1005310 Over a year ago

using option 1 and 2 both

Collectives™ on Stack Overflow

Securing API key used to make Web Api call

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related