DEV Community


Posted on

Are your keys secure on the JAMstack?

If you use an API in your JAMstack site, chances are you’ll need an API key to access that service. When invoked at build time, API requests can be kept secure since keys are stored server side. For more dynamic functionality like comments however, API requests need to be made in the browser. This poses the risk of exposed API tokens since traffic can be easily analyzed and requests can be traced back to the initial requester. In some unique cases (e.g. Firebase and Mapbox), keys simply identify your project and keeping them public is par for the course. In most, API keys must be kept private. A simple way to keep keys secure when making requests client side is to proxy your request or use an API gateway to sign requests so it passes through an authentication process before returning successfully.

Many CDN providers like Netlify provide proxying services so requests to an API can properly be verified. In Netlify, an API request can be proxied by adding an {X-From = "Netlify"} header attribute in your redirects configuration. Requests can also be signed with a JSON Web Signature (JWS) so that a remote service can properly verify the origin of the requester. In either of these instances, access to an end server is verified at the edge nodes and doesn’t require a full round trip to authentication servers. This means that requests can be made secure without the burden of extra load time. While this is an incredibly easy and efficient way to secure a service from malicious users, it does require having control over that endpoint. An alternative to proxying and signing requests, is to pass an request through a serverless function. Under the hood, serverless functions proxy requests on your behalf and save you the extra configuration time needed to set up proxying. The downside to this is of course that serverless functions often come with hard limitations on response times so ensuring that the API adheres to that is key.

Contrary to popular opinion, securing API keys and requests on the JAMstack is not impossible. For more tips and tricks on securing your API keys on the JAMstack (using Netlify), check out these resources:

Netlify Docs on proxying requests
Stack Overflow post on securing API keys on JAMstack
Keeping API keys safe with serverless functions

Top comments (1)

andrzejwp profile image

Hey @Divya, here's a tip on how to secure the keys using Cloudflare workers: