fix(next): add cross origin in react dom preload (#67423)

Co-authored-by: Jiwon Choi <devjiwonchoi@gmail.com>
vercel · Aug 26, 2024 · 96d6ada · 96d6ada
1 parent c572030
commit 96d6ada
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 4 deletions.
diff --git a/packages/next/src/client/script.tsx b/packages/next/src/client/script.tsx
@@ -349,8 +349,13 @@ function Script(props: ScriptProps): JSX.Element | null {
         ReactDOM.preload(
           src,
           restProps.integrity
-            ? { as: 'script', integrity: restProps.integrity, nonce }
-            : { as: 'script', nonce }
+            ? {
+                as: 'script',
+                integrity: restProps.integrity,
+                nonce,
+                crossOrigin: restProps.crossOrigin,
+              }
+            : { as: 'script', nonce, crossOrigin: restProps.crossOrigin }
         )
         return (
           <script
@@ -370,8 +375,13 @@ function Script(props: ScriptProps): JSX.Element | null {
         ReactDOM.preload(
           src,
           restProps.integrity
-            ? { as: 'script', integrity: restProps.integrity, nonce }
-            : { as: 'script', nonce }
+            ? {
+                as: 'script',
+                integrity: restProps.integrity,
+                nonce,
+                crossOrigin: restProps.crossOrigin,
+              }
+            : { as: 'script', nonce, crossOrigin: restProps.crossOrigin }
         )
       }
     }

diff --git a/test/e2e/app-dir/next-script/app/layout.tsx b/test/e2e/app-dir/next-script/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/next-script/app/page.tsx b/test/e2e/app-dir/next-script/app/page.tsx
@@ -0,0 +1,10 @@
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <Script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      crossOrigin="use-credentials"
+    />
+  )
+}
diff --git a/test/e2e/app-dir/next-script/next-script.test.ts b/test/e2e/app-dir/next-script/next-script.test.ts
@@ -0,0 +1,17 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('Script component with crossOrigin props', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should be set crossOrigin also in preload link tag', async () => {
+    const browser = await next.browser('/')
+
+    const crossorigin = await browser
+      .elementByCss('link[href="https://code.jquery.com/jquery-3.7.1.min.js"]')
+      .getAttribute('crossorigin')
+
+    expect(crossorigin).toBe('use-credentials')
+  })
+})
diff --git a/test/e2e/app-dir/next-script/next.config.js b/test/e2e/app-dir/next-script/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig