21

Right now I am writing a client-side javascript app that makes a request to the USPS Price Calculator API. In order to make this request, I need to provide my API User ID in the xml of the request. The tag looks like this: <RateV4Request USERID="ThisIsWhereMyUserIdGoes">. My question is this: is there any way I can provide my user ID to the javascript, while still hiding it from users who look at the client-side files. Right now, the only solution I have is to create a PHP file in my server that has the User ID, then using an AJAX request in the client-side javascript to store it in a global variable. It looks like this:

var userID;
$.get("/secrets.php", function( data ) { 
       userID = data;
});

Is this an adequate way of keeping my API User ID from being seen by the users of my app? What else could I do?

Liam
  • 27,717
  • 28
  • 128
  • 190
Joshua E
  • 314
  • 1
  • 2
  • 10

3 Answers3

29

In short: No, you can't secure your API key in a client-side app.

This article goes into some more detail

Two options

  • Make the API calls server-side and then serve information to the client from there
  • Require the client use their own API keys
Jacob Mulquin
  • 3,458
  • 1
  • 19
  • 22
  • 2
    How to do 2nd option? Can someone describr it more detail? How client passes his/her own api key to called server-side so server can verify the api key? – Scott Chu Jan 11 '18 at 04:07
  • 1
    @Jacob Mulquin The article linked is a dead link now. Please update it. – ptrcao Jan 03 '23 at 10:15
7

If you are reading this page in 2020 and don’t want to develop server-side code for whatever reasons(saving hosting cost, etc), severless function might be the solution.

This also calls 3rd party API from the server-side, but you don’t have to develop a full-fledged server-side API proxy.

Netlify has documentation on this. I guess other providers like AWS lambda, Google cloud function offers similar things but not sure.

https://github.com/netlify/code-examples/tree/master/function_examples/token-hider

Pros No server management

Cons Vendor lock-in

ohkts11
  • 2,581
  • 2
  • 21
  • 17
  • Sorry, I hacked the Google Api key of your example in the link of the github: it starts with AIzaSyDrmriw_X // so it is not hidden, I just recreated the URL and accessed the hidden url in the javascript. – Nicolas Guérinet Nov 12 '21 at 23:12
  • I was not clear in previous comment. From the live demo of netifly, In order to see an API Key just type in your browser: https://hzdf-maps.netlify.app//.netlify/functions/getapi – Nicolas Guérinet Nov 14 '21 at 21:24
6

Even with your PHP solution you can't hide your userId. It can be easily printed in browser console by accessing console.log(userId);. As far as I know anything that is available to client-side is vulnerable and can easily be decoded. Even if you obfuscate your api key it can still be decoded from client side.

The right thing to do is to create a PHP wrapper around the API calls that require keys, and then call that wrapper from Javascript.

shivgre
  • 1,163
  • 2
  • 13
  • 29
  • 1
    Even so, client still needs to pass the api key to server side, right? Then the api key is still needed to put in somewhere in Javascript code in web page source, right? Do I have misconcept here? – Scott Chu Jan 11 '18 at 04:08
  • 3
    No, just use api key in server side only – shivgre Jan 11 '18 at 04:29