add tests

integration-test/src/app/cc/ApolloWrapper.tsx

@@ -18,9 +18,17 @@ setVerbosity("debug");
 loadDevMessages();
 loadErrorMessages();
 
-export function ApolloWrapper({ children }: React.PropsWithChildren<{}>) {
+export function ApolloWrapper({
+  children,
+  nonce,
+}: React.PropsWithChildren<{ nonce?: string }>) {
   return (
-    <ApolloNextAppProvider makeClient={makeClient}>
+    <ApolloNextAppProvider
+      makeClient={makeClient}
+      extraScriptProps={{
+        nonce,
+      }}
+    >
       {children}
     </ApolloNextAppProvider>
   );

integration-test/src/app/cc/dynamic/dynamic.test.ts

@@ -59,4 +59,31 @@ test.describe("CC dynamic", () => {
       await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
     });
   });
+  test.describe("useSuspenseQuery with a nonce", () => {
+    test("invalid: logs an error", async ({ page, blockRequest }) => {
+      await page.goto(
+        "http://localhost:3000/cc/dynamic/useSuspenseQuery?nonce=invalid",
+        {
+          waitUntil: "commit",
+        }
+      );
+
+      const messagePromise = page.waitForEvent("console");
+      const message = await messagePromise;
+      expect(message.text()).toMatch(
+        /^Refused to execute inline script because it violates the following Content Security Policy/
+      );
+    });
+    test("valid: does not log an error", async ({ page, blockRequest }) => {
+      await page.goto(
+        "http://localhost:3000/cc/dynamic/useSuspenseQuery?nonce=8IBTHwOdqNKAWeKl7plt8g==",
+        {
+          waitUntil: "commit",
+        }
+      );
+
+      const messagePromise = page.waitForEvent("console");
+      expect(messagePromise).rejects.toThrow(/waiting for event \"console\"/);
+    });
+  });
 });

integration-test/src/app/cc/dynamic/layout.tsx

@@ -1,7 +1,9 @@
 import { headers } from "next/headers";
+import { ApolloWrapper } from "../ApolloWrapper";
 
 export default function Layout({ children }: React.PropsWithChildren) {
   // force this into definitely rendering on the server, and dynamically
   console.log(headers().toString().substring(0, 0));
-  return children;
+  const nonce = headers().get("x-nonce-param") ?? undefined;
+  return <ApolloWrapper nonce={nonce}>{children}</ApolloWrapper>;
 }

integration-test/src/app/cc/layout.tsx → integration-test/src/app/cc/static/layout.tsx

@@ -1,4 +1,4 @@
-import { ApolloWrapper } from "./ApolloWrapper";
+import { ApolloWrapper } from "../ApolloWrapper";
 
 export default async function Layout({
   children,

integration-test/src/middleware.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export function middleware(request: NextRequest) {
+  const nonce = request.nextUrl.searchParams.get("nonce");
+  if (nonce) {
+    // we set a fixed nonce here so we can test correct and incorrect nonce values
+    const validNonce = "8IBTHwOdqNKAWeKl7plt8g==";
+    // 'unsafe-eval' for `react-refresh`
+    const contentSecurityPolicyHeaderValue = `default-src 'self'; script-src 'nonce-${validNonce}' 'strict-dynamic' 'unsafe-eval';`;
+
+    const requestHeaders = new Headers(request.headers);
+    // valid nonce for next
+    requestHeaders.set("x-nonce", validNonce);
+    // potentially invalid nonce for `ApolloNextAppProvider`
+    requestHeaders.set("x-nonce-param", nonce);
+    requestHeaders.set(
+      "Content-Security-Policy",
+      contentSecurityPolicyHeaderValue
+    );
+
+    const response = NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    });
+    response.headers.set(
+      "Content-Security-Policy",
+      contentSecurityPolicyHeaderValue
+    );
+
+    return response;
+  }
+}