0

How can I mask API Keys and tokens (in JS code and in the http calls headers) so that a person using fire bug or developer tools won't be able to extract it and use it? for example google maps API keys.

Google API key is in my HTML file.

Tokens are in the headers of http requests, or a parameter in the URL.

Tlink
  • 875
  • 2
  • 14
  • 30
  • If this question did _not apply to Google_ would it still be a duplicate? Most of the advice from the linked duplicate (and others I found from there) applies specifically to Google and is not a general solution to protecting API keys. – Stephen P May 24 '19 at 19:12

2 Answers2

2

APIs in any platform can use an unrestricted API key. However, you have the option to add a restriction to the API key. Once restricted, the key will only work on platforms that support that type of restriction.

To add restrictions for an API key, do the following:

  1. Go to the Google Cloud Platform Console.
  2. From the Project drop-down menu, select the project that contains the API key you want to secure.
  3. From the Navigation menu, select APIs & Services > Credentials.
  4. On the Credentials page, click the name of the API key that you want to secure.
  5. On the API key page, under Key restrictions, set the Application restrictions.
    • Select HTTP referrers (web sites).
    • Add the referrers (follow the instructions).
    • Click Save.

For more information check Google Documentation

Leonardo Correa
  • 170
  • 5
  • Thanks, I see how this could work great for Google, but what about the other APIs which does not allow restrictions? – Tlink May 24 '19 at 17:36
  • If you are asking about Man-in-the-Middle Attack, then your requests must be over HTTPS. Here is a little explanation: [https://securebox.comodo.com/ssl-sniffing/man-in-the-middle-attack/](https://securebox.comodo.com/ssl-sniffing/man-in-the-middle-attack/). – Leonardo Correa May 24 '19 at 18:18
2

Google outlines their API Key Best Practices. I'll highlight two of their recommendations:

  • Restrict the API so it can only be used from your domain. Even if someone else sees your key, they won't be able to use it unless the web page the request is coming from is your on server/domain. (However, someone might be able to spoof the request as if it's coming from your domain.) You can also restrict which APIs can be called, which makes it less useful for attackers.
  • Use a proxy-server so your keys are never exposed. Instead of calling Google APIs directly, you make a request to your server, which then calls the Google API and sends the data back. Since your proxy server already knows your keys, private information never needs to be transmitted to the user's browser.
Leftium
  • 16,497
  • 6
  • 64
  • 99
  • 1
    But what prevent others from making the same call to my server. If it's not protected by a key they can, if it is protected by a key (which I can pass in the header or pass in the header or as a parameter) what prevent others from using that key and calling my server. – Tlink May 24 '19 at 17:34
  • @Tlink great question. I have the same situation. If the client app sends a req to the proxy server with some sort of auth key to access the proxy, this is visible in the browser console...so how do we ensure the data/endpoints in the proxy server are actually protected? – CodeConnoisseur Jul 07 '23 at 21:37