Allow /api routes to be private to the client app

[stopyransky]

In docs we read :

API Routes do not specify CORS headers, meaning they are same-origin only by default.

and yet if i create POST route for /api/post-route it will be available publicly, so for example i can use tool like https://reqbin.com/ to make a request to the website and next server will pass my request further.

I saw example of using CORS but it is not useful - does not work when applying origin option setting and the server still passes the request

• is it possible to 'hide' or 'mask' an /api/route from public view ? and make internal request to server that would be only possible from client side app ? (only triggered by a user interacting with the website interface). In such case any other request made-not-from-the-app would land on 404 (even if it's a post request).

• in order to use cors am i forced to use custom server? How could i make mentioned example to work? I have tried below code.

Thanks for help.

// with cors 

import Cors from 'cors';

const cors = initMiddleware(
 Cors({
   origin: 'https://website.com',
   methods: ['GET', 'POST', 'OPTIONS'],
  })
);

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
): Promise<any> {

 await cors(req, res);

  switch (req.method) {
    case 'POST':
      return myapi.post(req, res); // <--- with different origin this still gets called.
    default:
      res.status(400).end('bad');
  }
}

function initMiddleware(middleware) {
  return (req, res) =>
    new Promise((resolve, reject) => {
      middleware(req, res, (result) => {
        if (result instanceof Error) {
          return reject(result);
        }
        return resolve(result);
      });
    });
}

[jpcafe10]

I'm having the exact same problem!
It is stated that by default vercel only allows same origin API requests but i'm able to postman my deployed API.

[jpcafe10]

API Routes do not specify CORS headers, meaning they are same-origin only by default. You can customize such behavior by wrapping the request handler with the cors middleware.

https://nextjs.org/docs/api-routes/introduction#caveats

[jpcafe10]

Also couldn't make this example to work.
https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors

[jpcafe10]

#17814 (comment)

[stopyransky]

thanks for referring the issue, here is quote:

CORS is a client-implemented protocol (e.g. Browsers). It does not block HTTP requests if you use curl / postman etc because those do not implement CORS.

then I think the question is: What can we do to make Next.js api work only with the client app? One idea is a httponly cookie with validation. Any other ideas?

I find it quite not-secure-by-design - I would rather prefer not even to expose the api paths outside of my app. Is it possible with next.js ? To have public and private API paths

[sawtell]

I would be interested in a solution to this.

The way that I have done it currently is to store an HttpOnly cookie on initial load, then validate any further API request against the cookie. I have also encrypted the cookie to ensure it was set by the app.

[stopyransky]

couldnt this be already the case for all the /api routes, by design?

[serdec]

This would be quite a useful feature

[md186]

Is there any solution yet? Im facing the exact same problem.

I want to restrict my api to the next.js application only and 2 more domains which are able to receive the data from the endpoints. For this I want to save the allowed domains as username with a generated token in my database. This would look like this:

username l token
NextJs Application l generated token
Domain1 l generated token
Domain2 l generated token

Then if somebody is requesting the endpoint, Im checking if the user and token is allowed.

Now for Domain1 and Domain2 I can just give them the username and token and on my api endpoint I can check if its true in the database. But how to do that with my own application? Since Im not able to use username or password in my application, because its printed to the public then. I could use env variables which I can read on the api endpoint, but how can I make sure that the request is coming from my own application?

Like youre already saying, with Postman and other requesting tools you can call the api from everywhere. In my approach I could restrict it in that wy perfectly fine, we would just need a smart idea to detect the application itself.

Any ideas? (Prefered with code if you like to, Im quite new to this topic and I cant find many useful stuff on the web)

[Ali-Parandeh]

I'm also interested in seeing a solution to this. Either using cookies or some kind of public private key solution. Is there a library out there that can help?

[fcpauldiaz]

any updates on this?

[bscaspar]

It looks like @leerob implemented something like this in the on-demand ISR demo in the pages/api/webhook.js file, check it out here: https://github.com/leerob/on-demand-isr/blob/main/pages/api/webhook.js

[flacial]

Here's the new file: https://github.com/leerob/on-demand-isr/blob/main/app/api/webhook/route.ts

[Crinchy]

@leerob how is your solution working, could you explain it in few sentences please, that would be great.
As i can see, its comparing signatures, one which gets created server side and one, which the user have in his headers right?, what if the user just copies this header into postman, he still could send requests to this api route then, or am i wrong?, thats the current point i am trying to prevent, that someone can send requests from postman.

[Namnp1521]

any update?

[mdzialo00]

here's example made by next.js with cors library to specify only acceptable request methods, but I guess it can be also configured to allow specific host to access your api - https://github.com/vercel/next.js/blob/canary/examples/api-routes-cors/pages/api/cors.ts

[thursoe]

Any update?