Module Middleware/Secure Headers

The secure headers middleware simplifies the setup of security headers. Inspired in part by the version from Hono secureHeaders middleware.

import { createSecureHeadersMiddleware } from "remix-utils/middleware/secure-headers";

export const [secureHeadersMiddleware] =
  createSecureHeadersMiddleware();
Copy

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

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

Now, every response will have the security header responses.

The secure headers middleware middleware can be customized by passing an options object to the createSecureHeadersMiddleware function.

The options let's you configure the headers key values. The middleware accepts the same options as the Hono Secure Headers Middleware.