fix(use-cache): fix HMR not updating in cross-origin iframes

Author: lllomh

packages/next/src/client/components/app-router-headers.ts

@@ -13,6 +13,9 @@ export const NEXT_ROUTER_SEGMENT_PREFETCH_HEADER =
   'next-router-segment-prefetch' as const
 export const NEXT_HMR_REFRESH_HEADER = 'next-hmr-refresh' as const
 export const NEXT_HMR_REFRESH_HASH_COOKIE = '__next_hmr_refresh_hash__' as const
+// Header used to pass the HMR refresh hash when cookies are unavailable (e.g.
+// in cross-origin iframes where SameSite=Lax cookies are not sent).
+export const NEXT_HMR_REFRESH_HASH_HEADER = 'next-hmr-refresh-hash' as const
 export const NEXT_URL = 'next-url' as const
 export const RSC_CONTENT_TYPE_HEADER = 'text/x-component' as const
 

packages/next/src/client/components/hmr-client-state.ts

@@ -0,0 +1,18 @@
+'use client'
+
+// Module-level state for the current HMR refresh hash.
+//
+// The hash is set by the hot-reloader when server component changes are
+// detected, and consumed by fetchServerResponse to ensure cache busting works
+// in cross-origin iframe contexts where cookies may not be transmitted due to
+// SameSite=Lax restrictions.
+
+let currentHmrRefreshHash: string | undefined
+
+export function setCurrentHmrRefreshHash(hash: string): void {
+  currentHmrRefreshHash = hash
+}
+
+export function getCurrentHmrRefreshHash(): string | undefined {
+  return currentHmrRefreshHash
+}

packages/next/src/client/components/router-reducer/fetch-server-response.ts

@@ -22,11 +22,13 @@ import {
   RSC_HEADER,
   RSC_CONTENT_TYPE_HEADER,
   NEXT_HMR_REFRESH_HEADER,
+  NEXT_HMR_REFRESH_HASH_HEADER,
   NEXT_DID_POSTPONE_HEADER,
   NEXT_ROUTER_STALE_TIME_HEADER,
   NEXT_HTML_REQUEST_ID_HEADER,
   NEXT_REQUEST_ID_HEADER,
 } from '../app-router-headers'
+import { getCurrentHmrRefreshHash } from '../hmr-client-state'
 import { callServer } from '../../app-call-server'
 import { findSourceMapURL } from '../../app-find-source-map-url'
 import {
@@ -87,6 +89,7 @@ export type RequestHeaders = {
   [NEXT_ROUTER_SEGMENT_PREFETCH_HEADER]?: string
   'x-deployment-id'?: string
   [NEXT_HMR_REFRESH_HEADER]?: '1'
+  [NEXT_HMR_REFRESH_HASH_HEADER]?: string
   // A header that is only added in test mode to assert on fetch priority
   'Next-Test-Fetch-Priority'?: RequestInit['priority']
   [NEXT_HTML_REQUEST_ID_HEADER]?: string // dev-only
@@ -137,6 +140,14 @@ export async function fetchServerResponse(
 
   if (process.env.NODE_ENV === 'development' && options.isHmrRefresh) {
     headers[NEXT_HMR_REFRESH_HEADER] = '1'
+    // Also pass the hash as a header to support cross-origin iframes where
+    // SameSite=Lax cookies are not sent due to the top-level context being a
+    // different origin. The server will use the header as a fallback when the
+    // cookie is absent.
+    const hmrHash = getCurrentHmrRefreshHash()
+    if (hmrHash) {
+      headers[NEXT_HMR_REFRESH_HASH_HEADER] = hmrHash
+    }
   }
 
   if (nextUrl) {

packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx

@@ -32,6 +32,7 @@ import { useUntrackedPathname } from '../../../components/navigation-untracked'
 import reportHmrLatency from '../../report-hmr-latency'
 import { TurbopackHmr } from '../turbopack-hot-reloader-common'
 import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../../components/app-router-headers'
+import { setCurrentHmrRefreshHash } from '../../../components/hmr-client-state'
 import {
   publicAppRouterInstance,
   type GlobalErrorState,
@@ -407,8 +408,20 @@ export function processMessage(
       )
 
       // Store the latest hash in a session cookie so that it's sent back to the
-      // server with any subsequent requests.
-      document.cookie = `${NEXT_HMR_REFRESH_HASH_COOKIE}=${message.hash};path=/`
+      // server with any subsequent requests. Use SameSite=None on HTTPS to allow
+      // the cookie to be sent from cross-origin iframes (e.g. when using a
+      // tunnel like cloudflared during development). SameSite=None requires
+      // Secure, so it can only be set on HTTPS connections.
+      const cookieFlags =
+        location.protocol === 'https:'
+          ? `path=/;SameSite=None;Secure`
+          : `path=/`
+      document.cookie = `${NEXT_HMR_REFRESH_HASH_COOKIE}=${message.hash};${cookieFlags}`
+
+      // Also store in module-level state as a fallback for cross-origin iframe
+      // contexts where cookies may be blocked (e.g. "Block third-party cookies"
+      // enabled). The hash will be sent as a request header instead.
+      setCurrentHmrRefreshHash(message.hash)
 
       if (
         RuntimeErrorHandler.hadRuntimeError ||

packages/next/src/server/app-render/work-unit-async-storage.external.ts

@@ -18,7 +18,10 @@ import type {
 import type { Params } from '../request/params'
 import type { ImplicitTags } from '../lib/implicit-tags'
 import type { WorkStore } from './work-async-storage.external'
-import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../client/components/app-router-headers'
+import {
+  NEXT_HMR_REFRESH_HASH_COOKIE,
+  NEXT_HMR_REFRESH_HASH_HEADER,
+} from '../../client/components/app-router-headers'
 import { InvariantError } from '../../shared/lib/invariant-error'
 import type { StagedRenderingController } from './staged-rendering'
 import type { ValidationBoundaryTracking } from './instant-validation/boundary-tracking'
@@ -419,7 +422,14 @@ export function getHmrRefreshHash(
       case 'prerender-runtime':
         return workUnitStore.hmrRefreshHash
       case 'request':
-        return workUnitStore.cookies.get(NEXT_HMR_REFRESH_HASH_COOKIE)?.value
+        // Prefer the cookie, but fall back to the request header for cross-origin
+        // iframe contexts where SameSite=Lax (or blocked third-party cookies)
+        // prevent the cookie from being sent with the HMR refresh fetch.
+        return (
+          workUnitStore.cookies.get(NEXT_HMR_REFRESH_HASH_COOKIE)?.value ??
+          workUnitStore.headers.get(NEXT_HMR_REFRESH_HASH_HEADER) ??
+          undefined
+        )
       case 'prerender-client':
       case 'validation-client':
       case 'prerender-ppr':