How to override Fresh 2's default img-src directives?

[fredkzk]

When I want to enable images from firebase "img-src 'self' https://firebasestorage.googleapis.com data:", my directive becomes a duplicate of the default one "img-src 'self' data:" as seen in the headers.
And it refuses to be loaded: violates the following Content Security Policy directive: "img-src 'self' data:"
Is that a big beautiful bug?

[sunnypatell]

@fredkzk not a bug, but definitely a footgun. when the browser receives two separate Content-Security-Policy headers, it enforces both -- and the most restrictive one wins. so your custom img-src with the firebase domain gets blocked by fresh's default img-src 'self' data:.

the fix is to modify fresh's built-in CSP config instead of adding a separate header. use the useCSP hook to customize directives:

// routes/_app.tsx
import { useCSP } from "$fresh/runtime.ts";

export default function App(req: Request, ctx: FreshContext) {
  useCSP((csp) => {
    csp.directives.imgSrc = [
      "'self'",
      "https://firebasestorage.googleapis.com",
      "data:",
    ];
  });
  return <ctx.Component />;
}

this modifies the existing CSP header rather than creating a second one. the key takeaway: never set a raw Content-Security-Policy header alongside a framework-managed one -- always go through the framework's API to customize directives.

ref: fresh CSP docs

[fredkzk]

Hey, thanks for the insights.
Wanted to check the doc but your link is 404. And I believe import { useCSP } from "$fresh/runtime.ts"; is deprecated. Worked with Fresh 1.7, didn't it?

Did you mean this?
https://jsr.io/@fresh/core/doc/~/csp with import { csp } from "@fresh/core";?

[sunnypatell]

@fredkzk good catch, you're right. useCSP from $fresh/runtime.ts was the Fresh 1.x API and it's been removed in 2.x.

the new approach is middleware-based using csp() from @fresh/core (or just "fresh"):

import { App } from "fresh";
import { csp } from "fresh";

const app = new App()
  .use(csp({
    csp: [
      "default-src 'self'",
      "script-src 'self' 'unsafe-inline'",
    ],
  }));

it applies app-wide instead of per-route, and takes declarative string directives instead of the old callback-mutation style.

ref: Fresh CSP plugin docs | @fresh/core csp API

[MukundaKatta]

Yeah it's two separate CSP headers and the browser intersects them. Fresh 2's default CSP is emitted by the built-in middleware; override rather than extend. In your route/middleware, set the full Content-Security-Policy header yourself and Fresh will skip adding its default one when it detects you've set it. Alternatively, disable the default via the CSP plugin config and roll your own directives.

[devhorizon999]

I think this is happening because there are two CSP headers being sent.

Even though one of them allows Firebase, the other one from Fresh still has:

img-src 'self' data:

TypeScript Code

import { App, csp } from "fresh";

const app = new App()
  .use(csp({
    csp: [
      "img-src 'self' https://firebasestorage.googleapis.com data:",
    ],
  }));