9

I am new to JAM stack. The web applications in JAM stack (I am hosting my app in Netlify ) will be completely relied upon APIs for storing info and authentication, right?

So my concern is that I would have to expose all of my API keys publically in my JavaScript code. Anyone who knows how to open up the site source could see my API secrets and can be easily misused.

I was reading through an open issue in JAM stack repo here on Github

How can I secure my API Keys from eavesdropping and misuse?

What is the "best practice" in this case?

Thanks in advance

Anandhu
  • 807
  • 1
  • 9
  • 22
  • Not too sure why you are asking the question as the link ypu provided has many solutions on how to tacke this even an example when using Netlify https://www.netlify.com/blog/2016/10/04/access-local-environment-variables-using-webpack/ – Jacques Ramsden Nov 16 '18 at 07:19
  • I have been on that link too. Webpack variables can be viewed by the user right? so that is not a secure way? sorry if I'm wrong. – Anandhu Nov 16 '18 at 07:26
  • Good point and correct. Have you tried running the api calls server side. For example. Call to your server for data ensure the users session is valid. Let the server request using the API keys and return data – Jacques Ramsden Nov 16 '18 at 07:28
  • I guess that is not possible too. Since I am using JAM approach and no server-side code is running – Anandhu Nov 16 '18 at 07:31
  • So just to understand a bit better your client/site is being hosted somewhere right? Im guessing you are not going to go around to every person that wants this and setup a local server on their box? – Jacques Ramsden Nov 16 '18 at 07:37
  • I'm not too sure what your question is but, I have a static site deployed in Netlify and some external APIs for data storage like mLab, MongoDB cloud etc and finally for Authentication OAuth with google, facebook etc that is my initial setup – Anandhu Nov 16 '18 at 07:42
  • Ok cool with you now. I have not worked with Netlify yet so will go read some documents and come back to you if I find anything – Jacques Ramsden Nov 16 '18 at 07:44
  • Thank for your help – Anandhu Nov 16 '18 at 07:46
  • 1
    I work for Netlify and I agree that you don't want your env vars in your static content directly unless they are a public key or similar intended-to-be-seen variable. – fool Dec 26 '18 at 00:12

1 Answers1

7

Disclaimer: I work for Netlify

This is a frequent question and Netlify did develop some features to handle this without any additional services you have to run. Both are shown in this article, but I'll summarize here: https://www.netlify.com/docs/redirects/#structured-configuration

  1. you can proxy to other services with a special HTTP header using the headers directive to redirects in netlify.toml (only - not in _redirects!)

  2. Netlify will sign with a JWS your request if your remote service can verify the signature and reject unsigned requests, so nobody else can use your keys successfully. You can use the signed directive for your redirect (only in netlify.toml again, not in _redirects).

Both of these do require you to have some control over the API (or have it support requiring one of those configurations before accepting your API request).

If you can't control the API, you could consider using a function to add them into the API request, in effect proxying for you. Note this is a bit complicated and has a hard limitation that your code + the proxy + response must happen within 10s, which is as long as you have for a function invocation by default on Netlify.

fool
  • 3,044
  • 20
  • 28
  • I think I must go for the second option (as I do not have the control over Mlab or Stitch API ). So, I'm not sure whether I can implement that without failing too often. – Anandhu Jan 29 '19 at 08:59