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)

[Enalmada]

I am hoping that tanstack start can be updated to support nonce like nextjs does:
https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy

I think it may just be a change to Scripts component to take in a nonce parameter and render it in the script tags.

[kieranm]

I think the library really needs to prioritise proper support for this. It's very important in a production app to have a content security policy in place.

[viclafouch]

@tannerlinsley do you have any idea about this ?

[ebramanti]

Now that devinxi is in main, how can we handle CSP? Seems like #3028 (comment) is no longer an option

[viclafouch]

On my side, it works with this :

// src/server.ts
import type { RequestHandler } from '@tanstack/react-start/server'
import {
  createStartHandler,
  defaultStreamHandler
} from '@tanstack/react-start/server'
import { createRouter } from './router'

const handler = createStartHandler({
  createRouter
})(defaultStreamHandler)

const withHeaders: RequestHandler = async (context) => {
  const response = await handler(context)
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')
  response.headers.set('Cross-Origin-Resource-Policy', 'cross-origin')

  return response
}

export default withHeaders

[paularmstrong]

This is a great step, but doesn't solve the problem of adding a content-security policy that uses nonce values. It feels like a glaring omission in the framework to not have both basic security headers and nonces easy to configure.

I've dug around a bunch and it doesn't seem like it's possible in *-start to add nonce attributes to the generated <script> tags.

[Enalmada]

true. It will be impossible for any security conscious company to adopt tanstack start in production until a nonce can be passed through to the <script> tags.

[tannerlinsley]

This will be added in the next week-ish as we prepare for RC

[paularmstrong]

Amazing! Any issue or PR available to watch?