From 4a53582e14c313056f29bf8a241c9352dc17db70 Mon Sep 17 00:00:00 2001
From: Sukka <isukkaw@gmail.com>
Date: Tue, 20 Sep 2022 01:25:27 +0800
Subject: [PATCH] fix(image): preload should respect crossOrigin (#40676)

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

Currently, `link[rel=preload]` inserted by `priority` will not have the `crossOrigin` attribute, which will cause the preloaded response not to be used, since the CORS policy mismatches. The PR fixes that.
---
 packages/next/client/future/image.tsx                |  6 +++++-
 packages/next/client/image.tsx                       |  6 +++++-
 .../image-component/default/pages/priority.js        |  8 ++++++++
 .../image-component/default/test/index.test.ts       | 12 ++++++++++++
 .../image-future/default/pages/priority.js           |  8 ++++++++
 .../image-future/default/test/index.test.ts          |  7 +++++++
 6 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
index e42a606e21dc3..dc64f1640d66b 100644
--- a/packages/next/client/future/image.tsx
+++ b/packages/next/client/future/image.tsx
@@ -825,10 +825,14 @@ export default function Image({
     imageSrcSetPropName = 'imageSrcSet'
     imageSizesPropName = 'imageSizes'
   }
-  const linkProps = {
+  const linkProps: React.DetailedHTMLProps<
+    React.LinkHTMLAttributes<HTMLLinkElement>,
+    HTMLLinkElement
+  > = {
     // Note: imagesrcset and imagesizes are not in the link element type with react 17.
     [imageSrcSetPropName]: imgAttributes.srcSet,
     [imageSizesPropName]: imgAttributes.sizes,
+    crossOrigin: rest.crossOrigin,
   }
 
   const onLoadingCompleteRef = useRef(onLoadingComplete)
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index d986ae3a93c28..4018ca7b7e1f0 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -978,10 +978,14 @@ export default function Image({
     imageSrcSetPropName = 'imageSrcSet'
     imageSizesPropName = 'imageSizes'
   }
-  const linkProps = {
+  const linkProps: React.DetailedHTMLProps<
+    React.LinkHTMLAttributes<HTMLLinkElement>,
+    HTMLLinkElement
+  > = {
     // Note: imagesrcset and imagesizes are not in the link element type with react 17.
     [imageSrcSetPropName]: imgAttributes.srcSet,
     [imageSizesPropName]: imgAttributes.sizes,
+    crossOrigin: rest.crossOrigin,
   }
 
   const useLayoutEffect =
diff --git a/test/integration/image-component/default/pages/priority.js b/test/integration/image-component/default/pages/priority.js
index 741ae056ea023..975d7a39c2c13 100644
--- a/test/integration/image-component/default/pages/priority.js
+++ b/test/integration/image-component/default/pages/priority.js
@@ -12,6 +12,14 @@ const Page = () => {
         width="400"
         height="400"
       ></Image>
+      <Image
+        priority
+        id="basic-image-with-crossorigin"
+        crossOrigin="anonymous"
+        src="/test.jpg"
+        width="400"
+        height="400"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"
diff --git a/test/integration/image-component/default/test/index.test.ts b/test/integration/image-component/default/test/index.test.ts
index ba142e1706385..c92422a74413f 100644
--- a/test/integration/image-component/default/test/index.test.ts
+++ b/test/integration/image-component/default/test/index.test.ts
@@ -141,6 +141,11 @@ function runTests(mode) {
       expect(
         await browser.elementById('basic-image').getAttribute('loading')
       ).toBe(null)
+      expect(
+        await browser
+          .elementById('basic-image-with-crossorigin')
+          .getAttribute('loading')
+      ).toBe(null)
       expect(
         await browser.elementById('load-eager').getAttribute('loading')
       ).toBe(null)
@@ -157,6 +162,13 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /was detected as the Largest Contentful Paint/gm
       )
+
+      // should preload with crossorigin
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()
diff --git a/test/integration/image-future/default/pages/priority.js b/test/integration/image-future/default/pages/priority.js
index b851d4f0ebe61..2ef6c1e331dc6 100644
--- a/test/integration/image-future/default/pages/priority.js
+++ b/test/integration/image-future/default/pages/priority.js
@@ -12,6 +12,14 @@ const Page = () => {
         width="400"
         height="400"
       ></Image>
+      <Image
+        priority
+        id="basic-image-crossorigin"
+        src="/test.jpg"
+        width="400"
+        height="400"
+        crossOrigin="anonymous"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"
diff --git a/test/integration/image-future/default/test/index.test.ts b/test/integration/image-future/default/test/index.test.ts
index c5b3deb535aab..b17de44e23b46 100644
--- a/test/integration/image-future/default/test/index.test.ts
+++ b/test/integration/image-future/default/test/index.test.ts
@@ -157,6 +157,13 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /was detected as the Largest Contentful Paint/gm
       )
+
+      // should preload with crossorigin
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()