Securing Next.js API Proxy
Unanswered
Satin posted this in #help-forum
SatinOP
I have Next.js 14 app that use middleware as proxy. Every client request will go through that middleware proxy. The security problem is, how do I secure that middleware proxy so that only my Next.js client can request and get data from it? The data behind the proxy is a public API tho, but i want to make sure only my app can fetch from the proxy.
Several researches I've done:
- Using HMAC Authentication: there's concern because we need to store the API Key needed to access the proxy in client env variable (which is public)
- Doing all in server request: not possible because my app need to do client request
Is there any reference or best practices to secure client-to-proxy request in Next.js? Thank you
Several researches I've done:
- Using HMAC Authentication: there's concern because we need to store the API Key needed to access the proxy in client env variable (which is public)
- Doing all in server request: not possible because my app need to do client request
Is there any reference or best practices to secure client-to-proxy request in Next.js? Thank you
6 Replies
Kurilian Bobtail
you need to authenticate the request at some point, and that point should not be at the client side of course — otherwise it can be circumvented. you should have a user login (or a similar mechanism) where you issue server-maintained tokens, then any subsequent request uses that token, which your proxy-layer (middleware) confirms and proceeds to fetch the upstream data and pass it on, or deny the requset otherwise.
@Kurilian Bobtail you need to authenticate the request at some point, and that point should not be at the client side of course — otherwise it can be circumvented. you should have a user login (or a similar mechanism) where you issue server-maintained tokens, then any subsequent request uses that token, which your proxy-layer (middleware) confirms and proceeds to fetch the upstream data and pass it on, or deny the requset otherwise.
SatinOP
I might missing some details, but my app is like blogspot so it doesn't have user or need to login to access the content
Kurilian Bobtail
then the request will be anonymous, and thus can be replicated by anyone. so yeah basically you are missing something, namely authentication! your best bet is to set up sane per-ip request limiting or something like strong cloudflare protection against automated requests or so.
SatinOP
so the conclusion is the api proxy would still can be accessed publicly but we can add some limitation like rate limit and cloudflare protection. It is not possible to make it private only can be accessed to specific client. Actually, I'm just worried if someone can replicate my website and consume my api proxy since its publicly available like blogspot
Kurilian Bobtail
it is public by your definition and design (any visitor with no credentials can retrieve data). so yeah unless you change model best approach is to deter those who may consume your api in a pattern that does not match a normal user visitor consumption.
but then think about it, if someone is doing what you describe, they are basically just providing an alternative interface for your app. is that that bad?
but then think about it, if someone is doing what you describe, they are basically just providing an alternative interface for your app. is that that bad?
@Kurilian Bobtail it is public by your definition and design (any visitor with no credentials can retrieve data). so yeah unless you change model best approach is to deter those who may consume your api in a pattern that does not match a normal user visitor consumption.
but then think about it, if someone is doing what you describe, they are basically just providing an alternative interface for your app. is that _that_ bad?
SatinOP
of course if many ppl can host website on their own and those webs consume my api for the data, i should limit it tho. It's kinda like ppl scrapping my website but this one if ppl can access my api publicly then it will exhaust my server