csrf - not working

[Bobetti]

What version of Hono are you using?

^4.5.1

What runtime/platform is your app running on?

cloudflare worker, npm

What steps can reproduce the bug?

Right now, I don't get it - do I do something wrong, or it's really not working?

I have a sveltekit app - running on: http://localhost:5001/ I have a Cloudflare worker, npm - based on hono running on: http://127.0.0.1:8787

To test csrf I have such a code on a server side:

const app = new Hono();
app.use(csrf({ origin: "localhost:5002" }));   // port is not 5001 but 5002 for testing

Also, I have an admin route:

adminRouter.post("/admin", async (c) => {	
    return c.json({ success: true });
});

As I understand the csrf - /admin route should never be hit, because the client origin, which is localhost:5001 is not the same as specified with Hono: localhost:5002

Am I wrong, or something is not working here?

What is the expected behavior?

/admin route should never be hit

What do you see instead?

fetch from client side gets json: { success: true }

Additional information

Thank you in advance

P.S. Also have cors middleware:

app.use("/*", async (c, next) => {
    const { ALLOWED_ORIGIN } = c.env as Env;
    const corsMiddleware = cors({
        origin: [ALLOWED_ORIGIN],
        allowHeaders: [
            "Origin",
            "Content-Type",
            "Authorization",
            "Access-Control-Allow-Headers",
            "Set-Cookie",
        ],
        allowMethods: ["OPTIONS", "GET", "POST"],
        credentials: true,
    });
    return await corsMiddleware(c, next);
});

[yusukebe]

Hi @Bobetti

I wonder if this is not a bug, but it's hard to prepare a project to reproduce it. If you provide a minimal project to reproduce this issue, I can investigate it.

[Bobetti]

@yusukebe Here is the link to the test projects: https://www.dropbox.com/scl/fi/r9mfetdyckyeysxhdh2zd/csrf_test.zip?rlkey=o564q7ipnt5bnd54nbmlzkkof&dl=0

See the download icon on the top right.

In both projects I cleared node-modules folder.

Client project is sveltekit project, i used npm as described here:

• https://kit.svelte.dev/docs/creating-a-project
• added tailwind: https://tailwindcss.com/docs/guides/sveltekit
• and button, toaster components from https://www.shadcn-svelte.com/

Backend project is honojs for cloudflare worker using npm: https://hono.dev/docs/getting-started/cloudflare-workers

Added cors, because without it requests from client throwing cors exception. My client was working on http://localhost:5173

And specifically added wrong origin for csrf to test this protection:

app.use(csrf({ origin: "localhost:5002" }));

But all clients' POST requests were getting data without any problem:

So I don't understand how csrf protection should work.

[usualoma]

Hi @Bobetti, Thank you for reporting.

The csrf middleware checks the origin for "requests that can be sent using the form element." "Requests that can be sent using the form element" correspond to "Simple requests" when using the fetch API. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests

If the request in your app is a "request that will not succeed without permission in the cors middleware", then that means that it is not a Simple request. In that case, the csrf middleware does not check the origin, so you should configure your cors middleware only to allow the appropriate origins.

[yusukebe]

I think we can close this issue now. Thanks!