Only apply metadata manifest credentials for preview deployment (#64940)

### What

Follow up for #62873
Only apply credentials in metadata manifest tag for preview deployment

### Why

When the CORS header is "\*" and if you're including credentials in
request it will block by browser. For manifest's case, if it's fetching
from a publich CDN with responsing the CORS header "\*" and mismatching
with the current website domain it will get blocked. Previously we
introduced that change mostly for vercel deployment auth protection, now
we're going to check if it's preview deployment and also the same
origin, if yes then we'll include credentails for manifest request

Closes NEXT-3208

packages/next/src/lib/metadata/generate/basic.tsx

@@ -8,6 +8,7 @@ import type { ViewportLayout } from '../types/extra-types'
 import React from 'react'
 import { Meta, MetaFilter, MultiMeta } from './meta'
 import { ViewportMetaKeys } from '../constants'
+import { getOrigin } from './utils'
 
 // convert viewport object to string for viewport meta tag
 function resolveViewportLayout(viewport: Viewport) {
@@ -45,6 +46,10 @@ export function ViewportMeta({ viewport }: { viewport: ResolvedViewport }) {
 }
 
 export function BasicMeta({ metadata }: { metadata: ResolvedMetadata }) {
+  const manifestOrigin = metadata.manifest
+    ? getOrigin(metadata.manifest)
+    : undefined
+
   return MetaFilter([
     <meta charSet="utf-8" />,
     metadata.title !== null && metadata.title.absolute ? (
@@ -64,7 +69,13 @@ export function BasicMeta({ metadata }: { metadata: ResolvedMetadata }) {
       <link
         rel="manifest"
         href={metadata.manifest.toString()}
-        crossOrigin="use-credentials"
+        // If it's same origin, and it's a preview deployment,
+        // including credentials for manifest request.
+        crossOrigin={
+          !manifestOrigin && process.env.VERCEL_ENV === 'preview'
+            ? 'use-credentials'
+            : undefined
+        }
       />
     ) : null,
     Meta({ name: 'generator', content: metadata.generator }),

packages/next/src/lib/metadata/generate/utils.ts

@@ -14,4 +14,15 @@ function resolveAsArrayOrUndefined<T>(
   return resolveArray(value) as any
 }
 
-export { resolveAsArrayOrUndefined, resolveArray }
+function getOrigin(url: string | URL): string | undefined {
+  let origin = undefined
+  if (typeof url === 'string') {
+    try {
+      url = new URL(url)
+      origin = url.origin
+    } catch {}
+  }
+  return origin
+}
+
+export { resolveAsArrayOrUndefined, resolveArray, getOrigin }

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

@@ -228,7 +228,7 @@ describe('app dir - metadata', () => {
       // Manifest link should have crossOrigin attribute
       await matchDom('link', 'rel="manifest"', {
         href: '/api/manifest',
-        crossOrigin: 'use-credentials',
+        crossOrigin: isNextDeploy ? 'use-credentials' : null,
       })
 
       await matchDom('meta', 'name="theme-color"', {
@@ -263,7 +263,7 @@ describe('app dir - metadata', () => {
       // Manifest link should have crossOrigin attribute
       await matchDom('link', 'rel="manifest"', {
         href: '/api/manifest',
-        crossOrigin: 'use-credentials',
+        crossOrigin: isNextDeploy ? 'use-credentials' : null,
       })
     })