search

nibtime / next-safe-middleware

Strict CSP (Content-Security-Policy) for Next.js hybrid apps https://web.dev/strict-csp/
https://next-safe-middleware.vercel.app
MIT License
78 stars 20 forks source link

Compatibility with next.config.js #73

Closed tinleym closed 2 years ago

tinleym commented 2 years ago

I'm getting errors when trying to use next-safe-config-middleware with headers in next.config.js.

For example, the following configuration...

  async headers() {
    return [
      {
        key: "Strict-Transport-Security",
        value: "max-age=63072000; includeSubDomains; preload",
      }
    ];
  }

... yields the following error:

source is missing, headers field must be an array, invalid fields: key,value for route {"key":"Strict-Transport-Security","value":"max-age=63072000; includeSubDomains; preload"}

I see that the docs recommend using next-safe to add additional headers. However, there are many headers (like the one above) that next-safe doesn't cover.

How should one add an arbitrary header with next-safe-middleware?

tinleym commented 2 years ago

There's a simple fix for this. Using the example above, just put this in your _document:

<Head>
  <meta
    httpEquiv="Strict-Transport-Security"
    content={"max-age=63072000; includeSubDomains; preload"}
  />
</Head>