kubetail-org / edge-csrf

CSRF protection library for JavaScript that runs on the edge runtime (with Next.js, SvelteKit, Express, Node-HTTP integrations)
MIT License
140 stars 7 forks source link

Does it work with Next.js 14.1.0? #22

Closed maps82 closed 6 months ago

maps82 commented 6 months ago

Can some confirm edge-csrf is working with the current Next.js 14.1.0?

This is my middleware.js:

const csrfProtect = csrf({
  cookie: {
    secure: false,
  },
});

export async function middleware(request) {
  const response = NextResponse.next();

  console.log(`MIDDLEWARE: ${request.method} ${request.url}`);

  const csrfError = await csrfProtect(request, response);

  console.log(csrfError);

  return response;
}

When posting a form via a server actions I get this error:

MIDDLEWARE: POST http://localhost:3000/users/410
 ⨯ Error [TypeError]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received type number (410)
    at Function.from (node:buffer:324:9)
    at atob (file:///app/node_modules/next/dist/compiled/edge-runtime/index.js:1:657096)
    at atou (webpack-internal:///(middleware)/./node_modules/edge-csrf/dist/esm/util.js:34:13)
    at eval (webpack-internal:///(middleware)/./node_modules/edge-csrf/dist/esm/index.js:34:118)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.middleware [as handler] (webpack-internal:///(middleware)/./src/middleware.js:20:23)
    at async adapter (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/adapter.js:176:16)
    at async runWithTaggedErrors (file:///app/node_modules/next/dist/server/web/sandbox/sandbox.js:99:24)
    at async DevServer.runMiddleware (file:///app/node_modules/next/dist/server/next-server.js:1039:24)
    at async DevServer.runMiddleware (file:///app/node_modules/next/dist/server/dev/next-dev-server.js:261:28)
    at async NextNodeServer.handleCatchallMiddlewareRequest (file:///app/node_modules/next/dist/server/next-server.js:323:26)
    at async DevServer.handleRequestImpl (file:///app/node_modules/next/dist/server/base-server.js:813:28)
    at async (file:///app/node_modules/next/dist/server/dev/next-dev-server.js:331:20)
    at async Span.traceAsyncFn (file:///app/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (file:///app/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async handleRoute (file:///app/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:319:33)
    at async resolveRoutes (file:///app/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:539:28)
    at async handleRequest (file:///app/node_modules/next/dist/server/lib/router-server.js:200:96)
    at async requestHandlerImpl (file:///app/node_modules/next/dist/server/lib/router-server.js:366:13)
    at async Server.requestListener (file:///app/node_modules/next/dist/server/lib/start-server.js:140:13) {
  middleware: true
}
 POST /users/410 404 in 57ms
 POST /users/410 404 in 2ms
Error: Failed to find Server Action "e18922f36d5036b5f7f6212614582d6e60b7cdd6". This request might be from an older or newer deployment. Original error: Invariant: Couldn't find action module ID from module map.
    at t3 (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:1693)
    at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:7079
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at t4 (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:6387)
    at rk (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:25940)
    at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:28648
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at Object.wrap (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:16172)
    at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:28536
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at Object.wrap (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:15420)
    at r_ (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:28463)
    at rW.render (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:32559)
    at doRender (/app/node_modules/next/dist/server/base-server.js:1394:44)
    at cacheEntry.responseCache.get.routeKind (/app/node_modules/next/dist/server/base-server.js:1555:34)
    at ResponseCache.get (/app/node_modules/next/dist/server/response-cache/index.js:49:26)
    at DevServer.renderToResponseWithComponentsImpl (/app/node_modules/next/dist/server/base-server.js:1463:53)
    at /app/node_modules/next/dist/server/base-server.js:992:121
    at NextTracerImpl.trace (/app/node_modules/next/dist/server/lib/trace/tracer.js:104:20)
    at DevServer.renderToResponseWithComponents (/app/node_modules/next/dist/server/base-server.js:992:41)
    at DevServer.renderErrorToResponseImpl (/app/node_modules/next/dist/server/base-server.js:2114:35)
    at async pipe.req.req (/app/node_modules/next/dist/server/base-server.js:1988:30)
    at async DevServer.pipeImpl (/app/node_modules/next/dist/server/base-server.js:911:25)
    at async /app/node_modules/next/dist/server/dev/next-dev-server.js:331:20
    at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (/app/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async invokeRender (/app/node_modules/next/dist/server/lib/router-server.js:163:21)
    at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:357:24)
    at async requestHandlerImpl (/app/node_modules/next/dist/server/lib/router-server.js:366:13)
    at async Server.requestListener (/app/node_modules/next/dist/server/lib/start-server.js:140:13)

See also Issue #21

maps82 commented 6 months ago

Sorry. It works. I just didn't understand that the token must be passed as the first argument to the server action

amorey commented 6 months ago

No worries! Sorry you ran into trouble. I added an example of how to use Edge-CSRF with server actions to the README so it will be easier to set up for others: https://github.com/kubetail-org/edge-csrf