Limit access to endpoints when using Nuxt + Functions

Support
, , ,
#1

Hello Netlify Community,

I’m building a static Nuxt app that gets some data from a third-party API. It does this via Functions.
The Nuxt app uses Fetch to do a GET call with a query parameter to a Function.

The secret for the third-party API is set as an Environment variable and used by the function to get the data and return it to Nuxt. This all works great!

However these functions can also be called directly, publicly. I would really like to restrict this so that only my Nuxt app can reach these functions. How can I manage this? I found a forum post that shows how to do it by limiting GET request and only allow POST. This would not prevent Curl or Postman type requests from still getting the data.

I also saw examples of how to use Identity in Netlify to only allow authorised users to access data. This would work however my application doesn’t use Identity or any form of user accounts. So how can I make sure the Functions endpoints are only accessible to my Nuxt application?

I tried setting CORS headers but this doesn’t seem to prevent anything in Postman or when visiting the function directly. When trying to use fetch in the browser console on any other site however, the request is blocked by CORS.

What are my options?

#2

Hey @jwktje

I think you may have a bit of a fundamental issue here. You want a Function that can only be called from your Nuxt interface, but you don’t have any sort of individual user-authentication built in, and your Nuxt interface is served on the public web.

From a high level, if you want to restrict some code from running but for a subset of people, you have to be able to authenticate that that subset of people are who they say they are. If your Nuxt interface doesn’t have the ability (or you don’t want to force people) to authenticate themselves as authorized users, then inherently your site and Function must be publicly available.

You can’t really have a publicly accessible HTML interface and a non-public Function… even if you embedded a token into your HTML that had to be sent to the Function in order to run, still anybody could just load your HTML and get the token.

I hope that helps a bit :confused:

–
Jon

#3

Hey @jonsully
Thank you for your response. I think I understand what you are saying. If something is public inherently then the function endpoint would be too.

However I feel there must be some way to prevent direct access without using a user Auth system. I keep thinking my Nuxt client could send some kind of token that the Function could check.

But I understand your point that if this is generated client side and is static, it could be copied and used for direct access. And if that token would not be generated client side but dynamic, then that function itself would be a public endpoint for the client to ingest, so it wouldn’t really solve anything.

I think only a server side secret that generates something like an access token that is served with the client would work. Like a form nonce kinda. But even then, if this is not based somehow on a session authenticated with user credentials a script would just fetch my site and pick out the “nonce” and use that.

The more I think about it the more I understand your point.

My end goal is mostly to run this application for certain companies. Would IP filtering be an option in that case? So to rephrase my question; How can my Netlify application only be accessed by certain companies/people/public IP’s without a standard user Auth system?

#4

It’s sort of a tough question.

Could IP filtering work? Perhaps, although Netlify doesn’t natively support it as a site-wide protection measure. You could potentially build it into a Function but it may be a little complex. This would only work if the company you’re attempting to filter for has employees / computers all on the same network all the time and that network has a static IP. Otherwise the company’s network might change IPs and/or the employees therein will have different employees (my teammates in a different part of Columbus have very different IPs than I do!).

Ultimately what you’re describing is a need for people to authenticate themselves - this is what authentication is, fundamentally. Proving that you are who you say you are. There’s no real way around that when hosting something on the public internet. One of the better options could be to use Netlify Identity with External Providers - allowing folks to ‘login with Google’ that way they don’t need to make their own account on your site/app, they can just use their existing Google account. You could setup a Function to filter those too - only allowing new users with emails from a particular domain (only allow ____@netlify.com, for example)… but ultimately you are going to need to find a way to auth your users if you want to protect any values or keys.

–
Jon