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 { unstable_createSecureHeadersMiddleware } from "remix-utils/middleware/secure-headers";

export const [secureHeadersMiddleware] =
  unstable_createSecureHeadersMiddleware();
Copy

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

import { secureHeadersMiddleware } from "~/middleware/secure-headers.server";
export const unstable_middleware = [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 unstable_createSecureHeadersMiddleware function.

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