From b00fd3ac0a12193970f123b393c8804ee43bc5cd Mon Sep 17 00:00:00 2001
From: sanjibani <18418553+sanjibani@users.noreply.github.com>
Date: Sat, 27 Jun 2026 06:27:23 +0530
Subject: [PATCH] fix(csp): append nonce alongside existing directives instead
 of stripping 'unsafe-inline'

Closes #3813

The csp middleware used replaceAll() to substitute any "'unsafe-inline'" with
the per-request nonce, which forced the strict-CSP pattern that strips the
fallback. This is exactly the wrong direction: web.dev's recommended strict-CSP
fallback is to keep "'unsafe-inline'" alongside the nonce so older browsers
that ignore nonces still work, while modern browsers prefer the nonce.

Now the middleware simply appends the nonce to each inline directive
(script-src, style-src, default-src, script-src-elem, style-src-elem,
style-src-attr), preserving whatever the user wrote (including their
"'unsafe-inline'" fallback). The default "'unsafe-inline'" entries remain
in the rendered header alongside the nonce, matching the production pattern
used by e.g. YouTube.

Tests updated to assert the append behaviour; two new tests cover the
explicit-fallback case and the strict-no-unsafe-inline case.
---
 docs/latest/plugins/csp.md                  | 11 ++-
 packages/fresh/src/middlewares/csp.ts       | 21 +++--
 packages/fresh/src/middlewares/csp_test.tsx | 91 +++++++++++++++++++--
 3 files changed, 105 insertions(+), 18 deletions(-)

diff --git a/docs/latest/plugins/csp.md b/docs/latest/plugins/csp.md
index adf7e6b6a8d..4ca76f46770 100644
--- a/docs/latest/plugins/csp.md
+++ b/docs/latest/plugins/csp.md
@@ -54,9 +54,14 @@ 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.
+- The CSP header **appends** `'nonce-{value}'` to `script-src`, `style-src`,
+  `default-src`, `script-src-elem`, `style-src-elem`, and `style-src-attr`
+  directives. Any `'unsafe-inline'` you (or the defaults) wrote is preserved
+  alongside the nonce — modern browsers prefer the nonce and ignore
+  `'unsafe-inline'` when both are present, while older browsers fall back to
+  `'unsafe-inline'`. This matches the
+  [strict-CSP fallback pattern recommended
+  by web.dev](https://web.dev/articles/strict-csp#fallbacks).
 - 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
diff --git a/packages/fresh/src/middlewares/csp.ts b/packages/fresh/src/middlewares/csp.ts
index 0f0b6f558c4..915e0d82af7 100644
--- a/packages/fresh/src/middlewares/csp.ts
+++ b/packages/fresh/src/middlewares/csp.ts
@@ -12,11 +12,13 @@ export interface CSPOptions {
   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.
+   * If true, appends `'nonce-{value}'` to script-src and style-src directives
+   * without stripping any `'unsafe-inline'` the user (or the defaults) wrote.
+   * Fresh automatically injects the nonce on inline `<script>` and `<style>`
+   * tags during server rendering, so modern browsers will permit them via the
+   * nonce. Older browsers that ignore `'nonce-...'` fall back to the user's
+   * `'unsafe-inline'`, matching the strict-CSP fallback pattern recommended by
+   * web.dev (and used in production by e.g. YouTube).
    */
   useNonce?: boolean;
 }
@@ -123,8 +125,13 @@ export function csp<State>(options: CSPOptions = {}): Middleware<State> {
       directives = merged.map((d) => {
         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}'`);
+        if (INLINE_DIRECTIVES.has(name)) {
+          // Append the nonce alongside whatever the user wrote (including any
+          // `'unsafe-inline'` fallback for older browsers). Modern browsers
+          // prefer the nonce and ignore `'unsafe-inline'` when both are
+          // present; older browsers that don't understand the nonce fall back
+          // to `'unsafe-inline'`.
+          return `${d} 'nonce-${nonce}'`;
         }
         return d;
       });
diff --git a/packages/fresh/src/middlewares/csp_test.tsx b/packages/fresh/src/middlewares/csp_test.tsx
index 3fc50f0fd4c..92df1b13c98 100644
--- a/packages/fresh/src/middlewares/csp_test.tsx
+++ b/packages/fresh/src/middlewares/csp_test.tsx
@@ -88,7 +88,7 @@ Deno.test("CSP - GET report only", async () => {
   );
 });
 
-Deno.test("CSP - useNonce replaces unsafe-inline with nonce", async () => {
+Deno.test("CSP - useNonce appends nonce alongside existing directives", async () => {
   const app = new App()
     .use(csp({ useNonce: true }))
     .get("/", (ctx) => {
@@ -109,10 +109,15 @@ Deno.test("CSP - useNonce replaces unsafe-inline with nonce", async () => {
   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 should be appended to default directives
+  expect(cspHeader).toMatch(
+    /script-src 'self' 'unsafe-inline' 'nonce-[a-f0-9]+'/,
+  );
+  expect(cspHeader).toMatch(
+    /style-src 'self' 'unsafe-inline' 'nonce-[a-f0-9]+'/,
+  );
+  // existing 'unsafe-inline' from defaults must be preserved (older-browser fallback)
+  expect(cspHeader).toContain("'unsafe-inline'");
 
   // Nonce should not leak as a response header
   expect(res.headers.get("X-Fresh-Nonce")).toBeNull();
@@ -151,6 +156,74 @@ Deno.test("CSP - useNonce injects nonce on inline script tags", async () => {
   expect(html).toContain(`nonce="${nonce}"`);
 });
 
+Deno.test("CSP - useNonce preserves user-supplied unsafe-inline as fallback", async () => {
+  // web.dev's strict-CSP pattern: user writes `'unsafe-inline'` so older
+  // browsers that ignore nonces still work, while modern browsers use the
+  // nonce. See #3813.
+  const app = new App()
+    .use(csp({
+      useNonce: true,
+      csp: [
+        "script-src 'self' 'unsafe-inline'",
+        "style-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")!;
+
+  // User's 'unsafe-inline' must still be present
+  expect(cspHeader).toContain("script-src 'self' 'unsafe-inline'");
+  expect(cspHeader).toContain("style-src 'self' 'unsafe-inline'");
+  // And the nonce must also be appended
+  expect(cspHeader).toMatch(
+    /script-src 'self' 'unsafe-inline' 'nonce-[a-f0-9]+'/,
+  );
+  expect(cspHeader).toMatch(
+    /style-src 'self' 'unsafe-inline' 'nonce-[a-f0-9]+'/,
+  );
+});
+
+Deno.test("CSP - useNonce appends nonce to inline directive that lacks unsafe-inline", async () => {
+  // Strict-CSP setup: user writes the inline directive without 'unsafe-inline'.
+  // The nonce alone is sufficient because Fresh injects nonces on inline tags.
+  const app = new App()
+    .use(csp({
+      useNonce: true,
+      csp: [
+        "script-src 'self'",
+        "style-src 'self'",
+      ],
+    }))
+    .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")!;
+
+  // nonce must still be appended even when 'unsafe-inline' was absent
+  expect(cspHeader).toMatch(/script-src 'self' 'nonce-[a-f0-9]+'/);
+  expect(cspHeader).toMatch(/style-src 'self' 'nonce-[a-f0-9]+'/);
+});
+
 Deno.test("CSP - useNonce with non-rendered response falls back to unsafe-inline", async () => {
   const app = new App()
     .use(csp({ useNonce: true }))
@@ -237,7 +310,7 @@ Deno.test("CSP - nonce does not leak as header without CSP middleware", async ()
   expect((res as any)[NONCE_SYMBOL]).toBeDefined();
 });
 
-Deno.test("CSP - useNonce replaces unsafe-inline in default-src", async () => {
+Deno.test("CSP - useNonce appends nonce to user-provided default-src", async () => {
   const app = new App()
     .use(csp({
       useNonce: true,
@@ -257,6 +330,8 @@ Deno.test("CSP - useNonce replaces unsafe-inline in default-src", async () => {
   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]+'/);
+  // default-src should keep its 'unsafe-inline' AND gain the nonce
+  expect(cspHeader).toMatch(
+    /default-src 'self' 'unsafe-inline' 'nonce-[a-f0-9]+'/,
+  );
 });