Securing API Keys In JAM Stack

Question

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

Answer 1

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.