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