With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access.
In some cases, this is fine. For instance, some types of Firebase and FaunaDB keys are intended to be public; they have a permissions model where little harm can be done and no data can be exported. However, this is NOT the case for AWS access tokens! You’d definitely not want those details to be public or bad things can happen. There are plenty of horror stories of leaked authentication keys, like this one.
There are several things you can do to keep these keys secure at Netlify. One best practice is to never commit any sensitive keys/tokens to your git repository. If you just need a token during build, you can use our Environment Variables build settings to set a value for a $API_TOKEN environment variable, and reference it during build. Nearly all headless CMS’s use this pattern, for instance - Netlify knows how to access your data from Contentful or Sanity, and pulls it in during build. You may not need the token at browse time, and so it isn’t in your HTML output, and you’re safe! We even have a feature to require review on all PR’s from non-Netlify-team-members in case you do list your sensitive environment variables in our UI.
Using Functions is another great way to keep those keys secure. Here’s a project that I call ‘token hider’ that does just that - makes a request at BROWSE TIME, securely - the value is ONLY known to the function and is NOT in your HTML - and is a great example starting point for anyone wanting to do the same! If you don’t hardcore the function, you’ll want to put the variable in our UI (Deploy & Build settings, in the “Environment Variables” tab), from where it will be deployed with your function(s).