Support easily using a CSP across more than one route at a time

[kevingorski]

Per this Discord thread:

KG: Is there a way to apply a CSP to more than a single route at a time?
MH: It should be doable via a middleware and add these headers. I'm not too happy about the hook we have for that at the moment. Would be great to have a GH issue and come up with a better way (likely middlewares)

[adamgreg]

It doesn't seem to be possible to set this via a middleware currently, but I have a (somewhat unpleasant) workaround, in case it helps anyone else too lazy to configure their routes individually 😜 .

In main.ts, before running start(), I modify the route modules in the manifest, making it as if they all exported a config with csp: true:

// Modify routes here to enable CSP for every route without exception.
// @ts-ignore: Manifest route types must be changed by this operation
manifest.routes = Object.fromEntries(
  Object.entries(manifest.routes).map(([k, v]) => {
    const config = { ...((v as { config?: RouteConfig }).config), csp: true };
    return [k, { ...v, config }];
  }),
);

Then call the useCSP() hook in the layout / app wrapper. It took me some trial & error to find directives that worked. In particular the way Fresh handles islands caused me some trouble - it uses a script tag (including a nonce that gets added to the header by Fresh), but within that script it ESM imports that I had to allow using 'strict-dynamic'. Also watch out for the quote marks that are required inside the directive strings. Here's what works for me:

// Allow static content from this host
csp.directives.defaultSrc = ["'self'"];

// Allow inline styles
csp.directives.styleSrc = ["'self'", "'unsafe-inline'"];

// Allow ESM imports in scripts (scripts tags have a nonce, added later)
csp.directives.scriptSrc = ["'strict-dynamic'"];

[marvinhagemeister]

Resolved by #3421