Module Middleware/CSRF

The CSRF middleware protects your application from Cross-Site Request Forgery attacks by validating that requests originate from trusted sources.

import { createCsrfMiddleware } from "remix-utils/middleware/csrf";

export const csrf = createCsrfMiddleware();
Copy

To use it, you need to add it to the middleware array in your app/root.tsx file.

import { csrf } from "~/middleware/csrf.server";
export const middleware: Route.MiddlewareFunction[] = [csrf];
Copy

Now, every non-safe request will be validated against CSRF attacks.

Note: If you add this middleware to the root route, it will apply to every route in your application. If your app has API routes that should accept cross-site requests (e.g., for webhooks or third-party integrations), you should move the CSRF middleware to a layout route that wraps only your UI routes, leaving API routes unprotected by CSRF validation.

The middleware uses the Sec-Fetch-Site header to determine request origin. Requests from same-origin or same-site are automatically allowed. For cross-site requests, you can specify trusted origins to allow.

The request origin is determined by checking (in order):

1. The Origin header
2. The Referer header
3. The request.referrer property

The CSRF middleware can be customized by passing an options object to the createCsrfMiddleware function.

You can allow cross-site requests from specific origins using a string:

let csrf = createCsrfMiddleware({
  origin: "https://trusted.com",
});
Copy

Or using a RegExp for pattern matching:

let csrf = createCsrfMiddleware({
  origin: /\.trusted\.com$/,
});
Copy

Or using an array of strings and RegExps:

let csrf = createCsrfMiddleware({
  origin: ["https://trusted1.com", "https://trusted2.com", /\.trusted\.com$/],
});
Copy

Or using a function for dynamic validation:

let csrf = createCsrfMiddleware({
  origin: (origin, request, context) => origin === "https://trusted.com",
});
Copy

The function can also be async:

let csrf = createCsrfMiddleware({
  origin: async (origin, request, context) => {
    return await checkOriginInDatabase(origin);
  },
});
Copy

You can customize which HTTP methods skip CSRF validation:

let csrf = createCsrfMiddleware({
  safeMethods: ["GET", "HEAD", "OPTIONS", "POST"],
});
Copy

You can allow requests with missing or invalid origin headers:

let csrf = createCsrfMiddleware({
  origin: "https://trusted.com",
  allowMissingOrigin: true,
});
Copy

You can provide a custom handler for untrusted requests:

let csrf = createCsrfMiddleware({
  onUntrustedRequest(request, context) {
    return new Response("Custom forbidden", { status: 418 });
  },
});
Copy

By default, untrusted requests will receive a 403 Forbidden response.