2

So, as usual, something new is buzzing around - JAMstack. My experience of buzzy new ideas is that they may or may not be useful, but generally not for the reasons the proponent gives, sorry to be a pessimist. Serving static website from a CDN instead of maintaining a server - seems like a good idea, now I don't need to support my own server and it's no longer a fullstack app. However, let's assume that the app needs to access google maps for instance to show users directions to their business. How does the JAMstack app secure the api key ? Lets assume this is an app for a small business

The simplest answer is that you do support a server which sends an api key to the app on load. For a static app the hosting company will have a mechanism for setting unix local variables that can be read or passed into the app when it is sent to the browser. This is the usually recommended method for securing api keys. Now the app can no longer be served from a cdn.

One answer I found is that for some apis, an api key can have a restriction that it can only be used from a specific domain. I think this would be set when the api key is generated. The referring domain could be spoofed however.

Another answer would be to have a function/lambda server that allows the previous mechanism to work - checks the domain of the caller and issues api key if it matches. No maintenance, or very little because Murphy's law always applies.

I am assuming that third party api supports cors (i.e. browser can access third party sites)

I would like to hear other ideas.

John Webster
  • 39
  • 5
  • If I understand your question, a solution could be to use envionment variables to pass things like API keys no ? https://docs.netlify.com/configure-builds/environment-variables/#declare-variables – Zooly Nov 27 '19 at 08:25
  • Are you asking for opinions here on what's best, or just alternatives? I think you listed the most relevant ones - either restrict the hosts that can use the key or use a serverless function. Only thing I'd add is that some JAMStack services have severless built in, like Netlify and Zeit. This makes it simpler to use. – Raymond Camden Nov 27 '19 at 14:50
  • I am not sure if I understand the solutions really. > "support a server which sends an api key to the app on load" Would the API key not end up in the front-end still? No matter how the API key gets into the JS, anybody visiting your site could extract the API via the console. No? – tbrlpld May 05 '20 at 23:07
  • Regarding the domain limitation: Wouldn't this require the request to the API being done on the server side (because once the site is send to the client, requests that it is making are not coming from the domain anymore)? – tbrlpld May 05 '20 at 23:15
  • Is there any way that avoids having the API key available in the front end while the requests to the API are made from the client side? I don't really see how that would be possible. Anything that your front end is accessing, could be accessed by anybody else too, because these requests happen from the client. Please let me know if I am wrong. – tbrlpld May 05 '20 at 23:18
  • Does this answer your question? [Securing API Keys In JAM Stack](https://stackoverflow.com/questions/53333018/securing-api-keys-in-jam-stack) – tbrlpld May 05 '20 at 23:26

0 Answers0