Hiding API keys with Netlify and conceal Netlify functions

Support
1

I’m using a vanilla JS script to interact with the Airtable API.

The API and the base are stored in this short Netlify function:

exports.handler = function(event, context, callback) {
  const secret = [process.env.AIRTABLE_API, process.env.BASE_ID];
  callback(null, {
    statusCode: 200,
    body: JSON.stringify(secret)
  });
};

It works great when invoked via fetch in my frontend js file. However, I can still see my function if I try to access /functions/ directly. How can I protect it from everything but my main .js file?

2

hey there. We’ve been a little short staffed this week, but we’ll get you an answer from a functions expert as soon as we can. thanks for your patience!

3

When you say you can “see your function directly”, what do you mean exactly? You shouldn’t be able to download the source code from the deployed functions, but we definitely don’t block you from hitting https://yoursite.com/.netlify/functions/funcname directly.

Perhaps your functions folder is INSIDE of your dist folder? That WOULD deploy your functions’ source code in a way you could download, so try moving it outside, if that’s what’s happening :slight_smile: