fix: Include CSP nonce in next/dynamic preload (#81999)

TrevorBurnham · huozhi · web-flow · commit 544f52126ed0 · 2025-09-04T16:18:44.000Z
Co-authored-by: Jiachi Liu &lt;inbox@huozhi.im&gt;
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -1982,7 +1982,8 @@ export const renderToHTMLOrFlight: AppPageRender = (
     previewModeId: renderOpts.previewProps?.previewModeId,
   })
 
-  const { isPrefetchRequest, previouslyRevalidatedTags } = parsedRequestHeaders
+  const { isPrefetchRequest, previouslyRevalidatedTags, nonce } =
+    parsedRequestHeaders
 
   let postponedState: PostponedState | null = null
 
@@ -2018,6 +2019,7 @@ export const renderToHTMLOrFlight: AppPageRender = (
     isPrefetchRequest,
     buildId: sharedContext.buildId,
     previouslyRevalidatedTags,
+    nonce,
   })
 
   return workAsyncStorage.run(
diff --git a/packages/next/src/server/app-render/work-async-storage.external.ts b/packages/next/src/server/app-render/work-async-storage.external.ts
@@ -97,6 +97,7 @@ export interface WorkStore {
     Record<string, { files: string[] }>
   >
   readonly assetPrefix?: string
+  readonly nonce?: string
 
   cacheComponentsEnabled: boolean
   dev: boolean
diff --git a/packages/next/src/server/async-storage/work-store.ts b/packages/next/src/server/async-storage/work-store.ts
@@ -20,6 +20,7 @@ export type WorkStoreContext = {
   page: string
 
   isPrefetchRequest?: boolean
+  nonce?: string
   renderOpts: {
     cacheLifeProfiles?: { [profile: string]: CacheLife }
     incrementalCache?: IncrementalCache
@@ -79,6 +80,7 @@ export function createWorkStore({
   isPrefetchRequest,
   buildId,
   previouslyRevalidatedTags,
+  nonce,
 }: WorkStoreContext): WorkStore {
   /**
    * Rules of Static & Dynamic HTML:
@@ -135,6 +137,7 @@ export function createWorkStore({
     buildId,
     reactLoadableManifest: renderOpts?.reactLoadableManifest || {},
     assetPrefix: renderOpts?.assetPrefix || '',
+    nonce,
 
     afterContext: createAfterContext(renderOpts),
     cacheComponentsEnabled: renderOpts.experimental.cacheComponents,
diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
@@ -58,13 +58,15 @@ export function PreloadChunks({
               href={href}
               rel="stylesheet"
               as="style"
+              nonce={workStore.nonce}
             />
           )
         } else {
           // If it's script we use ReactDOM.preload to preload the resources
           preload(href, {
             as: 'script',
             fetchPriority: 'low',
+            nonce: workStore.nonce,
           })
           return null
         }
diff --git a/test/e2e/app-dir/next-dynamic-csp-nonce/app/dynamic-component.js b/test/e2e/app-dir/next-dynamic-csp-nonce/app/dynamic-component.js
@@ -0,0 +1,9 @@
+'use client'
+
+export default function DynamicComponent() {
+  return (
+    <div id="dynamic-component-loaded">
+      Dynamic component loaded successfully
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/next-dynamic-csp-nonce/app/layout.js b/test/e2e/app-dir/next-dynamic-csp-nonce/app/layout.js
@@ -0,0 +1,29 @@
+import { headers } from 'next/headers'
+import { Suspense } from 'react'
+
+async function CSPMetatag({ children }) {
+  const resolvedHeaders = await headers()
+  const nonce = resolvedHeaders.get('x-nonce') || 'test-nonce'
+
+  return (
+    <meta
+      httpEquiv="Content-Security-Policy"
+      content={`default-src 'self'; script-src 'self' 'nonce-${nonce}'; style-src 'self' 'unsafe-inline'`}
+    />
+  )
+}
+
+export default async function RootLayout({ children }) {
+  return (
+    <html>
+      <Suspense>
+        <head>
+          <CSPMetatag />
+        </head>
+        <body>
+          <div id="csp-nonce-test">{children}</div>
+        </body>
+      </Suspense>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/next-dynamic-csp-nonce/app/page.js b/test/e2e/app-dir/next-dynamic-csp-nonce/app/page.js
@@ -0,0 +1,16 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(() => import('./dynamic-component'), {
+  loading: () => <div id="loading">Loading...</div>,
+})
+
+export default function CSPNoncePage() {
+  return (
+    <div>
+      <h1 id="page-title">CSP Nonce Test Page</h1>
+      <DynamicComponent />
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/next-dynamic-csp-nonce/middleware.js b/test/e2e/app-dir/next-dynamic-csp-nonce/middleware.js
@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  const response = NextResponse.next()
+  const nonce = 'test-nonce'
+  response.headers.set('x-nonce', nonce)
+  response.headers.set(
+    'Content-Security-Policy',
+    `default-src 'self'; script-src 'self' 'nonce-${nonce}'; style-src 'self' 'unsafe-inline'`
+  )
+  return response
+}
+
+export const config = {
+  matcher: '/:path*',
+}
diff --git a/test/e2e/app-dir/next-dynamic-csp-nonce/next-dynamic-csp-nonce.test.ts b/test/e2e/app-dir/next-dynamic-csp-nonce/next-dynamic-csp-nonce.test.ts
@@ -0,0 +1,61 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('next/dynamic with CSP nonce', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should include nonce attribute on preload links generated by next/dynamic', async () => {
+    const $ = await next.render$('/')
+
+    // Check that preload links have the nonce attribute
+    const preloadLinks = $('link[rel="preload"]')
+
+    const dynamicPreloadLinks = preloadLinks.filter((_, element) => {
+      const $element = $(element)
+      const href = $element.attr('href')
+      return href && href.includes('_next/static/chunks/')
+    })
+
+    // There should be at least one preload link for dynamic chunks
+    expect(dynamicPreloadLinks.length).toBeGreaterThan(0)
+
+    dynamicPreloadLinks.each((_, element) => {
+      const $element = $(element)
+      const href = $element.attr('href')
+
+      // Only check preload links for dynamic chunks
+      if (href && href.includes('_next/static/chunks/')) {
+        expect($element.attr('nonce')).toBe('test-nonce')
+      }
+    })
+  })
+
+  it('should not generate CSP violations when using next/dynamic with nonce', async () => {
+    const browser = await next.browser('/')
+
+    // Wait for the dynamic component to load
+    await browser.waitForElementByCss('#dynamic-component-loaded')
+
+    // OPTIMIZATION: Get both text values concurrently
+    const [pageTitle, componentText] = await Promise.all([
+      browser.elementByCss('#page-title').then((el) => el.text()),
+      browser.elementByCss('#dynamic-component-loaded').then((el) => el.text()),
+    ])
+
+    expect(pageTitle).toBe('CSP Nonce Test Page')
+    expect(componentText).toBe('Dynamic component loaded successfully')
+
+    // Check for CSP violations in Chrome (most expensive operation)
+    if (global.browserName === 'chrome') {
+      const logs = await browser.log()
+      const cspViolations = logs.filter(
+        (log) =>
+          log.source === 'security' &&
+          log.message.includes('Content Security Policy')
+      )
+
+      expect(cspViolations).toEqual([])
+    }
+  })
+})
diff --git a/test/e2e/app-dir/next-dynamic-csp-nonce/next.config.js b/test/e2e/app-dir/next-dynamic-csp-nonce/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

Original file line number	Diff line number	Diff line change
`@@ -97,6 +97,7 @@ export interface WorkStore {`
`97`	`97`	`Record<string, { files: string[] }>`
`98`	`98`	`>`
`99`	`99`	`readonly assetPrefix?: string`
	`100`	`+ readonly nonce?: string`
`100`	`101`
`101`	`102`	`cacheComponentsEnabled: boolean`
`102`	`103`	`dev: boolean`