Ensure manual nonce on Script works as expected (vercel#78939)

While investigating vercel#78936 we
noticed that manually setting `nonce` prop on `next/script` tag it
wasn't honored properly. This ensures we fully propagate it when
manually set as a prop.

---------

Co-authored-by: Zack Tanner <1939140+ztanner@users.noreply.github.com>

Author: ijjk

packages/next/src/client/script.tsx

@@ -209,9 +209,12 @@ function Script(props: ScriptProps): JSX.Element | null {
   } = props
 
   // Context is available only during SSR
-  const { updateScripts, scripts, getIsSsr, appDir, nonce } =
+  let { updateScripts, scripts, getIsSsr, appDir, nonce } =
     useContext(HeadManagerContext)
 
+  // if a nonce is explicitly passed to the script tag, favor that over the automatic handling
+  nonce = restProps.nonce || nonce
+
   /**
    * - First mount:
    *   1. The useEffect for onReady executes
@@ -276,14 +279,18 @@ function Script(props: ScriptProps): JSX.Element | null {
           onReady,
           onError,
           ...restProps,
+          nonce,
         },
       ])
       updateScripts(scripts)
     } else if (getIsSsr && getIsSsr()) {
       // Script has already loaded during SSR
       LoadCache.add(id || src)
     } else if (getIsSsr && !getIsSsr()) {
-      loadScript(props)
+      loadScript({
+        ...props,
+        nonce,
+      })
     }
   }
 

packages/next/src/pages/_document.tsx

@@ -330,7 +330,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) {
           {...scriptProps}
           key={scriptProps.src || index}
           defer={scriptProps.defer ?? !disableOptimizedLoading}
-          nonce={props.nonce}
+          nonce={scriptProps.nonce || props.nonce}
           data-nscript="beforeInteractive"
           crossOrigin={props.crossOrigin || crossOrigin}
         />

test/e2e/app-dir/app/app/script-manual-nonce/page.js

@@ -0,0 +1,18 @@
+import Script from 'next/script'
+import { ShowScriptOrder } from './show-order'
+
+export default function Page() {
+  return (
+    <>
+      <p>script-nonce</p>
+      <Script strategy="afterInteractive" src="/test1.js" nonce="hello-world" />
+      <Script
+        strategy="beforeInteractive"
+        src="/test2.js"
+        nonce="hello-world"
+      />
+      <Script strategy="beforeInteractive" id="3" nonce="hello-world" />
+      <ShowScriptOrder />
+    </>
+  )
+}

test/e2e/app-dir/app/app/script-manual-nonce/show-order.js

@@ -0,0 +1,20 @@
+'use client'
+import { useState } from 'react'
+
+export function ShowScriptOrder() {
+  const [order, setOrder] = useState(null)
+
+  return (
+    <>
+      <p id="order">{JSON.stringify(order)}</p>
+      <button
+        id="get-order"
+        onClick={() => {
+          setOrder(window._script_order)
+        }}
+      >
+        get order
+      </button>
+    </>
+  )
+}

test/e2e/app-dir/app/index.test.ts

@@ -1711,6 +1711,57 @@ describe('app dir - basic', () => {
       }
     })
 
+    it('should pass manual `nonce`', async () => {
+      const html = await next.render('/script-manual-nonce')
+      const $ = cheerio.load(html)
+      let scripts = $('script, link[rel="preload"][as="script"]')
+
+      scripts = scripts.filter((_, element) =>
+        (element.attribs.src || element.attribs.href)?.startsWith('/test')
+      )
+
+      expect(scripts.length).toBeGreaterThan(0)
+
+      scripts.each((_, element) => {
+        expect(element.attribs.nonce).toBeTruthy()
+      })
+
+      if (!isNextDev) {
+        const browser = await next.browser('/script-manual-nonce')
+
+        await retry(async () => {
+          await browser.elementByCss('#get-order').click()
+          const order = JSON.parse(await browser.elementByCss('#order').text())
+          expect(order?.length).toBe(2)
+        })
+      }
+    })
+
+    it('should pass manual `nonce` pages', async () => {
+      const html = await next.render('/pages-script-manual-nonce')
+      const $ = cheerio.load(html)
+      let scripts = $('script, link[rel="preload"][as="script"]')
+
+      scripts = scripts.filter((_, element) =>
+        (element.attribs.src || element.attribs.href)?.startsWith('/test')
+      )
+
+      expect(scripts.length).toBeGreaterThan(0)
+
+      scripts.each((_, element) => {
+        expect(element.attribs.nonce).toBeTruthy()
+      })
+
+      if (!isNextDev) {
+        await retry(async () => {
+          const browser = await next.browser('/pages-script-manual-nonce')
+          await browser.elementByCss('#get-order').click()
+          const order = JSON.parse(await browser.elementByCss('#order').text())
+          expect(order?.length).toBe(2)
+        })
+      }
+    })
+
     it('should pass nonce when using next/font', async () => {
       const html = await next.render('/script-nonce/with-next-font')
       const $ = cheerio.load(html)

test/e2e/app-dir/app/pages/pages-script-manual-nonce.js

@@ -0,0 +1,18 @@
+import Script from 'next/script'
+import { ShowScriptOrder } from '../app/script-nonce/show-order'
+
+export default function Page() {
+  return (
+    <>
+      <p>script-nonce</p>
+      <Script strategy="afterInteractive" src="/test1.js" nonce="hello-world" />
+      <Script
+        strategy="beforeInteractive"
+        src="/test2.js"
+        nonce="hello-world"
+      />
+      <Script strategy="beforeInteractive" id="3" nonce="hello-world" />
+      <ShowScriptOrder />
+    </>
+  )
+}