From 0a9d7af2bf48c71eecdb87bb3493a01efa3afc33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Thu, 26 Mar 2026 18:11:02 +0100
Subject: [PATCH 1/5] feat: add nonce support for inline style and script tags
 in CSP

- Auto-inject nonce attribute onto inline <script> and <style> tags
  during server rendering (preact_hooks.ts vnode hook)
- Expose render nonce via X-Fresh-Nonce response header (context.ts)
- Add useNonce option to CSP middleware that replaces 'unsafe-inline'
  with nonce-based directives per request
- Existing explicit nonce attributes on tags are preserved
- Non-rendered responses (API routes) fall back to unsafe-inline

Supersedes #1787.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/fresh/src/context.ts                 |   3 +
 packages/fresh/src/middlewares/csp.ts         |  61 +++++-
 packages/fresh/src/middlewares/csp_test.ts    |  58 ------
 packages/fresh/src/middlewares/csp_test.tsx   | 186 ++++++++++++++++++
 .../fresh/src/runtime/server/preact_hooks.ts  |  12 ++
 5 files changed, 257 insertions(+), 63 deletions(-)
 delete mode 100644 packages/fresh/src/middlewares/csp_test.ts
 create mode 100644 packages/fresh/src/middlewares/csp_test.tsx

diff --git a/packages/fresh/src/context.ts b/packages/fresh/src/context.ts
index abc94082a63..cf65bf86a0b 100644
--- a/packages/fresh/src/context.ts
+++ b/packages/fresh/src/context.ts
@@ -366,6 +366,9 @@ export class Context<State> {
           headers.append("Link", link);
         }
 
+        // Expose the nonce so CSP middleware can use it
+        headers.set("X-Fresh-Nonce", state.nonce);
+
         state.clear();
         setRenderState(null);
 
diff --git a/packages/fresh/src/middlewares/csp.ts b/packages/fresh/src/middlewares/csp.ts
index 6fd91c734f8..f583bb5de59 100644
--- a/packages/fresh/src/middlewares/csp.ts
+++ b/packages/fresh/src/middlewares/csp.ts
@@ -10,8 +10,19 @@ export interface CSPOptions {
 
   /** Additional CSP directives to add or override the defaults */
   csp?: string[];
+
+  /**
+   * If true, replaces 'unsafe-inline' with a nonce-based policy for
+   * script-src and style-src directives. Fresh automatically injects
+   * nonce attributes on inline `<script>` and `<style>` tags during
+   * server rendering, so this option locks down the policy to only
+   * allow those Fresh-rendered inline elements.
+   */
+  useNonce?: boolean;
 }
 
+const NONCE_HEADER = "X-Fresh-Nonce";
+
 /**
  * Middleware to set Content-Security-Policy headers
  *
@@ -27,12 +38,18 @@ export interface CSPOptions {
  *   ],
  * }));
  * ```
+ *
+ * @example Nonce-based CSP
+ * ```ts
+ * app.use(csp({ useNonce: true }));
+ * ```
  */
 export function csp<State>(options: CSPOptions = {}): Middleware<State> {
   const {
     reportOnly = false,
     reportTo,
     csp = [],
+    useNonce = false,
   } = options;
 
   const defaultCsp = [
@@ -56,14 +73,48 @@ export function csp<State>(options: CSPOptions = {}): Middleware<State> {
     cspDirectives.push(`report-to csp-endpoint`);
     cspDirectives.push(`report-uri ${reportTo}`); // deprecated but some browsers still use it
   }
-  const cspString = cspDirectives.join("; ");
 
+  const headerName = reportOnly
+    ? "Content-Security-Policy-Report-Only"
+    : "Content-Security-Policy";
+
+  if (!useNonce) {
+    // Static CSP — no per-request nonce
+    const cspString = cspDirectives.join("; ");
+    return async (ctx) => {
+      const res = await ctx.next();
+      res.headers.set(headerName, cspString);
+      if (reportTo) {
+        res.headers.set("Reporting-Endpoints", `csp-endpoint="${reportTo}"`);
+      }
+      return res;
+    };
+  }
+
+  // Nonce-based CSP — replace 'unsafe-inline' with nonce per request
   return async (ctx) => {
     const res = await ctx.next();
-    const headerName = reportOnly
-      ? "Content-Security-Policy-Report-Only"
-      : "Content-Security-Policy";
-    res.headers.set(headerName, cspString);
+    const nonce = res.headers.get(NONCE_HEADER);
+
+    let directives: string[];
+    if (nonce) {
+      // Remove the internal header so it's not exposed to clients
+      res.headers.delete(NONCE_HEADER);
+
+      directives = cspDirectives.map((d) => {
+        if (
+          (d.startsWith("script-src ") || d.startsWith("style-src ")) &&
+          d.includes("'unsafe-inline'")
+        ) {
+          return d.replace("'unsafe-inline'", `'nonce-${nonce}'`);
+        }
+        return d;
+      });
+    } else {
+      directives = cspDirectives;
+    }
+
+    res.headers.set(headerName, directives.join("; "));
     if (reportTo) {
       res.headers.set("Reporting-Endpoints", `csp-endpoint="${reportTo}"`);
     }
diff --git a/packages/fresh/src/middlewares/csp_test.ts b/packages/fresh/src/middlewares/csp_test.ts
deleted file mode 100644
index bdaa9738068..00000000000
--- a/packages/fresh/src/middlewares/csp_test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { expect } from "@std/expect/expect";
-import { App } from "../app.ts";
-import { csp } from "./csp.ts";
-
-Deno.test("CSP - GET default", async () => {
-  const handler = new App()
-    .use(csp())
-    .get("/", () => new Response("ok"))
-    .handler();
-  const res = await handler(new Request("https://localhost/"));
-  expect(res.status).toBe(200);
-  expect(res.headers.get("Content-Security-Policy")).toBeDefined();
-  expect(res.headers.get("Content-Security-Policy")).toContain(
-    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; media-src 'self' data: blob:; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests",
-  );
-});
-
-Deno.test("CSP - GET with override options", async () => {
-  const handler = new App()
-    .use(csp({
-      reportTo: "/api/csp-reports",
-      csp: [
-        "font-src 'self' 'https://fonts.gstatic.com'",
-        "style-src 'self' 'https://fonts.googleapis.com'",
-      ],
-    }))
-    .get("/", () => new Response("ok"))
-    .handler();
-
-  const res = await handler(new Request("https://localhost/"));
-
-  expect(res.status).toBe(200);
-  expect(res.headers.get("Content-Security-Policy")).toContain(
-    "font-src 'self' 'https://fonts.gstatic.com'; style-src 'self' 'https://fonts.googleapis.com'",
-  );
-  expect(res.headers.get("Content-Security-Policy")).toContain(
-    "report-uri /api/csp-reports",
-  );
-  expect(res.headers.get("Reporting-Endpoints")).toBe(
-    'csp-endpoint="/api/csp-reports"',
-  );
-});
-
-Deno.test("CSP - GET report only", async () => {
-  const handler = new App()
-    .use(csp({
-      reportOnly: true,
-    }))
-    .get("/", () => new Response("ok"))
-    .handler();
-
-  const res = await handler(new Request("https://localhost/"));
-  expect(res.status).toBe(200);
-  expect(res.headers.get("Content-Security-Policy-Report-Only")).toBeDefined();
-  expect(res.headers.get("Content-Security-Policy-Report-Only")).toContain(
-    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; media-src 'self' data: blob:; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests",
-  );
-});
diff --git a/packages/fresh/src/middlewares/csp_test.tsx b/packages/fresh/src/middlewares/csp_test.tsx
new file mode 100644
index 00000000000..bc4194f5aeb
--- /dev/null
+++ b/packages/fresh/src/middlewares/csp_test.tsx
@@ -0,0 +1,186 @@
+import { expect } from "@std/expect/expect";
+import { App } from "../app.ts";
+import { csp } from "./csp.ts";
+import { FakeServer } from "../test_utils.ts";
+
+Deno.test("CSP - GET default", async () => {
+  const handler = new App()
+    .use(csp())
+    .get("/", () => new Response("ok"))
+    .handler();
+  const res = await handler(new Request("https://localhost/"));
+  expect(res.status).toBe(200);
+  expect(res.headers.get("Content-Security-Policy")).toBeDefined();
+  expect(res.headers.get("Content-Security-Policy")).toContain(
+    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; media-src 'self' data: blob:; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests",
+  );
+});
+
+Deno.test("CSP - GET with override options", async () => {
+  const handler = new App()
+    .use(csp({
+      reportTo: "/api/csp-reports",
+      csp: [
+        "font-src 'self' 'https://fonts.gstatic.com'",
+        "style-src 'self' 'https://fonts.googleapis.com'",
+      ],
+    }))
+    .get("/", () => new Response("ok"))
+    .handler();
+
+  const res = await handler(new Request("https://localhost/"));
+
+  expect(res.status).toBe(200);
+  expect(res.headers.get("Content-Security-Policy")).toContain(
+    "font-src 'self' 'https://fonts.gstatic.com'; style-src 'self' 'https://fonts.googleapis.com'",
+  );
+  expect(res.headers.get("Content-Security-Policy")).toContain(
+    "report-uri /api/csp-reports",
+  );
+  expect(res.headers.get("Reporting-Endpoints")).toBe(
+    'csp-endpoint="/api/csp-reports"',
+  );
+});
+
+Deno.test("CSP - GET report only", async () => {
+  const handler = new App()
+    .use(csp({
+      reportOnly: true,
+    }))
+    .get("/", () => new Response("ok"))
+    .handler();
+
+  const res = await handler(new Request("https://localhost/"));
+  expect(res.status).toBe(200);
+  expect(res.headers.get("Content-Security-Policy-Report-Only")).toBeDefined();
+  expect(res.headers.get("Content-Security-Policy-Report-Only")).toContain(
+    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; media-src 'self' data: blob:; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests",
+  );
+});
+
+Deno.test("CSP - useNonce replaces unsafe-inline with nonce", async () => {
+  const app = new App()
+    .use(csp({ useNonce: true }))
+    .get("/", (ctx) => {
+      return ctx.render(
+        <html>
+          <head>
+            <style>{"body { color: red; }"}</style>
+          </head>
+          <body>
+            <h1>hello</h1>
+          </body>
+        </html>,
+      );
+    });
+
+  const server = new FakeServer(app.handler());
+  const res = await server.get("/");
+  const html = await res.text();
+  const cspHeader = res.headers.get("Content-Security-Policy")!;
+
+  // Should contain nonce directive, not unsafe-inline
+  expect(cspHeader).not.toContain("'unsafe-inline'");
+  expect(cspHeader).toMatch(/script-src 'self' 'nonce-[a-f0-9]+'/);
+  expect(cspHeader).toMatch(/style-src 'self' 'nonce-[a-f0-9]+'/);
+
+  // Nonce header should be removed from response
+  expect(res.headers.get("X-Fresh-Nonce")).toBeNull();
+
+  // HTML should contain nonce on the style tag
+  const nonceMatch = cspHeader.match(/nonce-([a-f0-9]+)/);
+  expect(nonceMatch).not.toBeNull();
+  const nonce = nonceMatch![1];
+  expect(html).toContain(`nonce="${nonce}"`);
+});
+
+Deno.test("CSP - useNonce injects nonce on inline script tags", async () => {
+  const app = new App()
+    .use(csp({ useNonce: true }))
+    .get("/", (ctx) => {
+      return ctx.render(
+        <html>
+          <head />
+          <body>
+            <script>console.log('hello')</script>
+          </body>
+        </html>,
+      );
+    });
+
+  const server = new FakeServer(app.handler());
+  const res = await server.get("/");
+  const html = await res.text();
+  const cspHeader = res.headers.get("Content-Security-Policy")!;
+
+  const nonceMatch = cspHeader.match(/nonce-([a-f0-9]+)/);
+  expect(nonceMatch).not.toBeNull();
+  const nonce = nonceMatch![1];
+
+  // Inline script should have the nonce
+  expect(html).toContain(`nonce="${nonce}"`);
+});
+
+Deno.test("CSP - useNonce with non-rendered response falls back to unsafe-inline", async () => {
+  const app = new App()
+    .use(csp({ useNonce: true }))
+    .get("/api", () => new Response(JSON.stringify({ ok: true })));
+
+  const server = new FakeServer(app.handler());
+  const res = await server.get("/api");
+  await res.body?.cancel();
+  const cspHeader = res.headers.get("Content-Security-Policy")!;
+
+  // Non-rendered response has no nonce, so unsafe-inline stays
+  expect(cspHeader).toContain("'unsafe-inline'");
+});
+
+Deno.test("CSP - useNonce generates unique nonce per request", async () => {
+  const app = new App()
+    .use(csp({ useNonce: true }))
+    .get("/", (ctx) => {
+      return ctx.render(
+        <html>
+          <head />
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+  const server = new FakeServer(app.handler());
+  const res1 = await server.get("/");
+  await res1.body?.cancel();
+  const res2 = await server.get("/");
+  await res2.body?.cancel();
+
+  const nonce1 = res1.headers.get("Content-Security-Policy")!.match(
+    /nonce-([a-f0-9]+)/,
+  )![1];
+  const nonce2 = res2.headers.get("Content-Security-Policy")!.match(
+    /nonce-([a-f0-9]+)/,
+  )![1];
+
+  expect(nonce1).not.toEqual(nonce2);
+});
+
+Deno.test("CSP - existing nonce on tag is preserved", async () => {
+  const app = new App()
+    .use(csp({ useNonce: true }))
+    .get("/", (ctx) => {
+      return ctx.render(
+        <html>
+          <head>
+            <script nonce="custom-nonce">alert(1)</script>
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+  const server = new FakeServer(app.handler());
+  const res = await server.get("/");
+  const html = await res.text();
+
+  // The explicit nonce should be preserved, not overwritten
+  expect(html).toContain('nonce="custom-nonce"');
+});
diff --git a/packages/fresh/src/runtime/server/preact_hooks.ts b/packages/fresh/src/runtime/server/preact_hooks.ts
index 320439bb97e..77213206904 100644
--- a/packages/fresh/src/runtime/server/preact_hooks.ts
+++ b/packages/fresh/src/runtime/server/preact_hooks.ts
@@ -132,6 +132,18 @@ options[OptionsType.VNODE] = (vnode) => {
       );
     }
   } else if (typeof vnode.type === "string") {
+    // Auto-inject nonce onto inline script/style tags
+    if (
+      RENDER_STATE !== null &&
+      (vnode.type === "script" || vnode.type === "style")
+    ) {
+      // deno-lint-ignore no-explicit-any
+      const props = vnode.props as any;
+      if (!props.nonce) {
+        props.nonce = RENDER_STATE.nonce;
+      }
+    }
+
     if (vnode.type === "body") {
       const scripts = h(FreshScripts, null);
       if (vnode.props.children == null) {

From 1ccd7d326d06939b97f130a230cc29bb912c5126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Thu, 26 Mar 2026 19:52:25 +0100
Subject: [PATCH 2/5] docs: document nonce-based CSP

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/latest/plugins/csp.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/docs/latest/plugins/csp.md b/docs/latest/plugins/csp.md
index 5ef1b6e5dc9..a904c89621c 100644
--- a/docs/latest/plugins/csp.md
+++ b/docs/latest/plugins/csp.md
@@ -25,6 +25,43 @@ const app = new App()
   .get("/", () => new Response("hello"));
 ```
 
+## Nonce-based CSP
+
+For stricter security, you can use nonce-based CSP instead of
+`'unsafe-inline'`. This ensures only inline `<script>` and `<style>` tags
+rendered by Fresh are allowed to execute.
+
+```ts main.ts
+import { csp } from "fresh";
+
+const app = new App()
+  .use(csp({ useNonce: true }))
+  .get("/", (ctx) => {
+    return ctx.render(
+      <html>
+        <head>
+          <style>{"body { color: red; }"}</style>
+        </head>
+        <body>
+          <h1>Hello</h1>
+        </body>
+      </html>,
+    );
+  });
+```
+
+When `useNonce` is enabled:
+
+- Fresh automatically injects a unique `nonce` attribute onto every inline
+  `<script>` and `<style>` tag during server rendering.
+- The CSP header replaces `'unsafe-inline'` with `'nonce-{value}'` in both
+  `script-src` and `style-src` directives.
+- Each request gets a fresh nonce, so the value cannot be predicted by an
+  attacker.
+- If a tag already has an explicit `nonce` attribute, it is preserved.
+- Non-rendered responses (e.g. API routes returning JSON) fall back to
+  `'unsafe-inline'` since there is no rendering step to generate a nonce.
+
 ## Options
 
 See the [API docs](https://jsr.io/@fresh/core/doc/~/csp) for a list of all

From d6e620ffbd60cb660090ae9873fb4b46b9bb5b7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Thu, 26 Mar 2026 19:53:22 +0100
Subject: [PATCH 3/5] chore: format csp docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/latest/plugins/csp.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/latest/plugins/csp.md b/docs/latest/plugins/csp.md
index a904c89621c..4e7851558c9 100644
--- a/docs/latest/plugins/csp.md
+++ b/docs/latest/plugins/csp.md
@@ -27,9 +27,9 @@ const app = new App()
 
 ## Nonce-based CSP
 
-For stricter security, you can use nonce-based CSP instead of
-`'unsafe-inline'`. This ensures only inline `<script>` and `<style>` tags
-rendered by Fresh are allowed to execute.
+For stricter security, you can use nonce-based CSP instead of `'unsafe-inline'`.
+This ensures only inline `<script>` and `<style>` tags rendered by Fresh are
+allowed to execute.
 
 ```ts main.ts
 import { csp } from "fresh";

From 1ad5e9591ba8c9e917cedd51a8d39ca0d78df4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Sun, 29 Mar 2026 20:38:36 +0200
Subject: [PATCH 4/5] fix: address CSP nonce review feedback

- Replace X-Fresh-Nonce header with a Symbol property on the Response
  object so the nonce never leaks when CSP middleware is absent
- Use replaceAll instead of replace for 'unsafe-inline' substitution
- Handle unsafe-inline in default-src, script-src-elem, style-src-elem,
  and style-src-attr directives (not just script-src and style-src)
- Document that explicit nonce attributes on tags will be blocked by
  the CSP header (which only contains the Fresh-generated nonce)
- Add tests for nonce non-leakage and default-src replacement

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/latest/plugins/csp.md                  | 12 +++--
 packages/fresh/src/context.ts               | 13 ++++--
 packages/fresh/src/middlewares/csp.ts       | 31 ++++++++-----
 packages/fresh/src/middlewares/csp_test.tsx | 49 ++++++++++++++++++++-
 4 files changed, 87 insertions(+), 18 deletions(-)

diff --git a/docs/latest/plugins/csp.md b/docs/latest/plugins/csp.md
index 4e7851558c9..e228da36320 100644
--- a/docs/latest/plugins/csp.md
+++ b/docs/latest/plugins/csp.md
@@ -54,14 +54,20 @@ When `useNonce` is enabled:
 
 - Fresh automatically injects a unique `nonce` attribute onto every inline
   `<script>` and `<style>` tag during server rendering.
-- The CSP header replaces `'unsafe-inline'` with `'nonce-{value}'` in both
-  `script-src` and `style-src` directives.
+- The CSP header replaces `'unsafe-inline'` with `'nonce-{value}'` in
+  `script-src`, `style-src`, `default-src`, `script-src-elem`,
+  `style-src-elem`, and `style-src-attr` directives.
 - Each request gets a fresh nonce, so the value cannot be predicted by an
   attacker.
-- If a tag already has an explicit `nonce` attribute, it is preserved.
 - Non-rendered responses (e.g. API routes returning JSON) fall back to
   `'unsafe-inline'` since there is no rendering step to generate a nonce.
 
+> [warn]: If you set an explicit `nonce` attribute on a tag, it will be
+> preserved in the HTML, but the CSP header will only contain the
+> Fresh-generated nonce. The browser will block the tag unless its nonce
+> matches the one in the CSP header. To avoid this, let Fresh manage nonces
+> automatically.
+
 ## Options
 
 See the [API docs](https://jsr.io/@fresh/core/doc/~/csp) for a list of all
diff --git a/packages/fresh/src/context.ts b/packages/fresh/src/context.ts
index 523a7423aa2..0586288bce4 100644
--- a/packages/fresh/src/context.ts
+++ b/packages/fresh/src/context.ts
@@ -17,6 +17,7 @@ import {
   RenderState,
   setRenderState,
 } from "./runtime/server/preact_hooks.ts";
+import { NONCE_SYMBOL } from "./middlewares/csp.ts";
 import { DEV_ERROR_OVERLAY_URL, PARTIAL_SEARCH_PARAM } from "./constants.ts";
 import { tracer } from "./otel.ts";
 import {
@@ -285,6 +286,7 @@ export class Context<State> {
       headers.set("X-Fresh-Id", partialId);
     }
 
+    let renderNonce = "";
     const html = tracer.startActiveSpan("render", (span) => {
       span.setAttribute("fresh.span_type", "render");
       const state = new RenderState(
@@ -376,16 +378,19 @@ export class Context<State> {
           headers.append("Link", link);
         }
 
-        // Expose the nonce so CSP middleware can use it
-        headers.set("X-Fresh-Nonce", state.nonce);
-
+        renderNonce = state.nonce;
         state.clear();
         setRenderState(null);
 
         span.end();
       }
     });
-    return new Response(html, responseInit);
+    const response = new Response(html, responseInit);
+    // Expose the nonce to CSP middleware via a symbol so it never
+    // leaks as a response header.
+    // deno-lint-ignore no-explicit-any
+    (response as any)[NONCE_SYMBOL] = renderNonce;
+    return response;
   }
 
   /**
diff --git a/packages/fresh/src/middlewares/csp.ts b/packages/fresh/src/middlewares/csp.ts
index f583bb5de59..b7eb8eed76d 100644
--- a/packages/fresh/src/middlewares/csp.ts
+++ b/packages/fresh/src/middlewares/csp.ts
@@ -21,7 +21,21 @@ export interface CSPOptions {
   useNonce?: boolean;
 }
 
-const NONCE_HEADER = "X-Fresh-Nonce";
+/**
+ * Symbol used to pass the render nonce from ctx.render() to the CSP
+ * middleware without exposing it as a response header.
+ */
+export const NONCE_SYMBOL: unique symbol = Symbol.for("__freshNonce");
+
+/** Directives that may contain 'unsafe-inline' for script/style sources */
+const INLINE_DIRECTIVES = new Set([
+  "script-src",
+  "style-src",
+  "script-src-elem",
+  "style-src-elem",
+  "style-src-attr",
+  "default-src",
+]);
 
 /**
  * Middleware to set Content-Security-Policy headers
@@ -94,19 +108,16 @@ export function csp<State>(options: CSPOptions = {}): Middleware<State> {
   // Nonce-based CSP — replace 'unsafe-inline' with nonce per request
   return async (ctx) => {
     const res = await ctx.next();
-    const nonce = res.headers.get(NONCE_HEADER);
+    // deno-lint-ignore no-explicit-any
+    const nonce = (res as any)[NONCE_SYMBOL] as string | undefined;
 
     let directives: string[];
     if (nonce) {
-      // Remove the internal header so it's not exposed to clients
-      res.headers.delete(NONCE_HEADER);
-
       directives = cspDirectives.map((d) => {
-        if (
-          (d.startsWith("script-src ") || d.startsWith("style-src ")) &&
-          d.includes("'unsafe-inline'")
-        ) {
-          return d.replace("'unsafe-inline'", `'nonce-${nonce}'`);
+        const spaceIdx = d.indexOf(" ");
+        const name = spaceIdx === -1 ? d : d.slice(0, spaceIdx);
+        if (INLINE_DIRECTIVES.has(name) && d.includes("'unsafe-inline'")) {
+          return d.replaceAll("'unsafe-inline'", `'nonce-${nonce}'`);
         }
         return d;
       });
diff --git a/packages/fresh/src/middlewares/csp_test.tsx b/packages/fresh/src/middlewares/csp_test.tsx
index bc4194f5aeb..42603eb9ed2 100644
--- a/packages/fresh/src/middlewares/csp_test.tsx
+++ b/packages/fresh/src/middlewares/csp_test.tsx
@@ -2,6 +2,7 @@ import { expect } from "@std/expect/expect";
 import { App } from "../app.ts";
 import { csp } from "./csp.ts";
 import { FakeServer } from "../test_utils.ts";
+import { NONCE_SYMBOL } from "./csp.ts";
 
 Deno.test("CSP - GET default", async () => {
   const handler = new App()
@@ -84,7 +85,7 @@ Deno.test("CSP - useNonce replaces unsafe-inline with nonce", async () => {
   expect(cspHeader).toMatch(/script-src 'self' 'nonce-[a-f0-9]+'/);
   expect(cspHeader).toMatch(/style-src 'self' 'nonce-[a-f0-9]+'/);
 
-  // Nonce header should be removed from response
+  // Nonce should not leak as a response header
   expect(res.headers.get("X-Fresh-Nonce")).toBeNull();
 
   // HTML should contain nonce on the style tag
@@ -184,3 +185,49 @@ Deno.test("CSP - existing nonce on tag is preserved", async () => {
   // The explicit nonce should be preserved, not overwritten
   expect(html).toContain('nonce="custom-nonce"');
 });
+
+Deno.test("CSP - nonce does not leak as header without CSP middleware", async () => {
+  const app = new App()
+    .get("/", (ctx) => {
+      return ctx.render(
+        <html>
+          <head />
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+  const server = new FakeServer(app.handler());
+  const res = await server.get("/");
+  await res.body?.cancel();
+
+  // No CSP middleware — nonce must not appear as a response header
+  expect(res.headers.get("X-Fresh-Nonce")).toBeNull();
+  // But it should still be available via the symbol for middleware that needs it
+  // deno-lint-ignore no-explicit-any
+  expect((res as any)[NONCE_SYMBOL]).toBeDefined();
+});
+
+Deno.test("CSP - useNonce replaces unsafe-inline in default-src", async () => {
+  const app = new App()
+    .use(csp({
+      useNonce: true,
+      csp: ["default-src 'self' 'unsafe-inline'"],
+    }))
+    .get("/", (ctx) => {
+      return ctx.render(
+        <html>
+          <head />
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+  const server = new FakeServer(app.handler());
+  const res = await server.get("/");
+  await res.body?.cancel();
+  const cspHeader = res.headers.get("Content-Security-Policy")!;
+
+  // default-src should have nonce, not unsafe-inline
+  expect(cspHeader).toMatch(/default-src 'self' 'nonce-[a-f0-9]+'/);
+});

From 041790dfa70a3b549f5afb1a7f99918f07893674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Sun, 29 Mar 2026 20:44:53 +0200
Subject: [PATCH 5/5] chore: format csp docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/latest/plugins/csp.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/latest/plugins/csp.md b/docs/latest/plugins/csp.md
index e228da36320..adf7e6b6a8d 100644
--- a/docs/latest/plugins/csp.md
+++ b/docs/latest/plugins/csp.md
@@ -55,8 +55,8 @@ When `useNonce` is enabled:
 - Fresh automatically injects a unique `nonce` attribute onto every inline
   `<script>` and `<style>` tag during server rendering.
 - The CSP header replaces `'unsafe-inline'` with `'nonce-{value}'` in
-  `script-src`, `style-src`, `default-src`, `script-src-elem`,
-  `style-src-elem`, and `style-src-attr` directives.
+  `script-src`, `style-src`, `default-src`, `script-src-elem`, `style-src-elem`,
+  and `style-src-attr` directives.
 - Each request gets a fresh nonce, so the value cannot be predicted by an
   attacker.
 - Non-rendered responses (e.g. API routes returning JSON) fall back to
@@ -64,8 +64,8 @@ When `useNonce` is enabled:
 
 > [warn]: If you set an explicit `nonce` attribute on a tag, it will be
 > preserved in the HTML, but the CSP header will only contain the
-> Fresh-generated nonce. The browser will block the tag unless its nonce
-> matches the one in the CSP header. To avoid this, let Fresh manage nonces
+> Fresh-generated nonce. The browser will block the tag unless its nonce matches
+> the one in the CSP header. To avoid this, let Fresh manage nonces
 > automatically.
 
 ## Options