Securing API Keys In JAM Stack
Asked Answered
R

1

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

Rotow answered 16/11, 2018 at 7:7 Comment(9)
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 netlify.com/blog/2016/10/04/…Prototherian
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.Rotow
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 dataPrototherian
I guess that is not possible too. Since I am using JAM approach and no server-side code is runningRotow
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?Prototherian
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 setupRotow
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 anythingPrototherian
Thank for your helpRotow
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.Pyles
P
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.

Pyles answered 26/12, 2018 at 0:17 Comment(1)
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.Rotow

© 2022 - 2024 — McMap. All rights reserved.