How to setup csp and global headers with tanstack start?

[discoverlance-com]

This has been asked before in the discussion, #2476 but since there's no reply I am asking once more and with respect to tanstack start if anyone has an idea.

I want to configure some default http security headers like x-frame-options and such globally and also setup csp with a nonce if possible.

How can I approach this and has anyone done it before?

[PeterMylemans]

@discoverlance-com I'm using a vinxi middleware to do this.

Any feedback from the community is appreciated.

./app.config.ts

import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },
  routers: {
    ssr: {
      middleware: "./app/middleware/ssr.ts",
    },
  },
});

./app/middleware/ssr.ts

import { defineMiddleware, setResponseHeaders } from "vinxi/http";

export default defineMiddleware({
  onBeforeResponse: (event) => {
    setResponseHeaders(event, {
      "X-Frame-Options": "DENY",
      "X-Content-Type-Options": "nosniff",
      "Referrer-Policy": "strict-origin-when-cross-origin",
      "Permissions-Policy": "geolocation=(), camera=(), microphone=()",
      "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline'"
    });
  },
});

Don't have a solution for nonce's yet but probably it is a post-processing somewhere in the SSR handler, provided a request attribute is set with the correct nonce (pretty similar to the nextjs solution):

1. generate a nonce for an incoming SSR request and add the nonce in the request headers to store it in the request memory (typically in a middleware)
2. add the nonce to generated link and style refs once the HTML is generated (middleware or as feature of tanstack/start)
3. add the nonce to the right spot in your CSP header (typically in a middleware)