Check cache busting search params on all RSC requests

Author: gaojude

packages/next/src/client/components/router-reducer/set-cache-busting-search-param.ts

@@ -7,6 +7,7 @@ import {
   NEXT_ROUTER_STATE_TREE_HEADER,
   NEXT_URL,
   NEXT_RSC_UNION_QUERY,
+  RSC_HEADER,
 } from '../app-router-headers'
 import type { RequestHeaders } from './fetch-server-response'
 
@@ -34,7 +35,8 @@ export const setCacheBustingSearchParam = (
     headers[NEXT_ROUTER_PREFETCH_HEADER],
     headers[NEXT_ROUTER_SEGMENT_PREFETCH_HEADER],
     headers[NEXT_ROUTER_STATE_TREE_HEADER],
-    headers[NEXT_URL]
+    headers[NEXT_URL],
+    headers[RSC_HEADER]
   )
   if (uniqueCacheKey === null) {
     // None of our custom request headers are present. We don't need to set a

packages/next/src/server/app-render/action-handler.ts

@@ -10,6 +10,9 @@ import {
   RSC_CONTENT_TYPE_HEADER,
   NEXT_ROUTER_STATE_TREE_HEADER,
   ACTION_HEADER,
+  NEXT_ROUTER_PREFETCH_HEADER,
+  NEXT_ROUTER_SEGMENT_PREFETCH_HEADER,
+  NEXT_URL,
 } from '../../client/components/app-router-headers'
 import {
   getAccessFallbackHTTPStatus,
@@ -52,6 +55,7 @@ import type { TemporaryReferenceSet } from 'react-server-dom-webpack/server.edge
 import { workUnitAsyncStorage } from '../app-render/work-unit-async-storage.external'
 import { executeRevalidates } from '../revalidation-utils'
 import { getRequestMeta } from '../request-meta'
+import { setCacheBustingSearchParam } from '../../client/components/router-reducer/set-cache-busting-search-param'
 
 function formDataFromSearchQueryString(query: string) {
   const searchParams = new URLSearchParams(query)
@@ -337,6 +341,23 @@ async function createRedirectRenderResult(
     forwardedHeaders.delete(ACTION_HEADER)
 
     try {
+      setCacheBustingSearchParam(fetchUrl, {
+        [NEXT_ROUTER_PREFETCH_HEADER]: forwardedHeaders.get(
+          NEXT_ROUTER_PREFETCH_HEADER
+        )
+          ? ('1' as const)
+          : undefined,
+        [NEXT_ROUTER_SEGMENT_PREFETCH_HEADER]:
+          forwardedHeaders.get(NEXT_ROUTER_SEGMENT_PREFETCH_HEADER) ??
+          undefined,
+        [NEXT_ROUTER_STATE_TREE_HEADER]:
+          forwardedHeaders.get(NEXT_ROUTER_STATE_TREE_HEADER) ?? undefined,
+        [NEXT_URL]: forwardedHeaders.get(NEXT_URL) ?? undefined,
+        [RSC_HEADER]: forwardedHeaders.get(RSC_HEADER)
+          ? ('1' as const)
+          : undefined,
+      })
+
       const response = await fetch(fetchUrl, {
         method: 'GET',
         headers: forwardedHeaders,

packages/next/src/server/base-server.ts

@@ -2055,39 +2055,39 @@ export default abstract class Server<
     const isPossibleServerAction = getIsPossibleServerAction(req)
     const hasGetInitialProps = !!components.Component?.getInitialProps
     let isSSG = !!components.getStaticProps
+    // NOTE: Don't delete headers[RSC] yet, it still needs to be used in renderToHTML later
+    const isRSCRequest = getRequestMeta(req, 'isRSCRequest') ?? false
 
     // Not all CDNs respect the Vary header when caching. We must assume that
     // only the URL is used to vary the responses. The Next client computes a
     // hash of the header values and sends it as a search param. Before
     // responding to a request, we must verify that the hash matches the
     // expected value. Neglecting to do this properly can lead to cache
     // poisoning attacks on certain CDNs.
-    // TODO: This is verification only runs during per-segment prefetch
-    // requests, since those are the only ones that both vary on a custom
-    // header and are cacheable. But for safety, we should run this
-    // verification for all requests, once we confirm the behavior is correct.
-    // Will need to update our test suite, since there are a handlful of unit
-    // tests that send fetch requests with custom headers but without a
-    // corresponding cache-busting search param.
-    // TODO: Consider not using custom request headers at all, and instead fully
-    // encode everything into the search param.
     if (
       !this.minimalMode &&
       this.nextConfig.experimental.validateRSCRequestHeaders &&
-      this.isAppSegmentPrefetchEnabled &&
-      getRequestMeta(req, 'segmentPrefetchRSCRequest')
+      isRSCRequest
     ) {
       const headers = req.headers
       const expectedHash = computeCacheBustingSearchParam(
         headers[NEXT_ROUTER_PREFETCH_HEADER.toLowerCase()],
         headers[NEXT_ROUTER_SEGMENT_PREFETCH_HEADER.toLowerCase()],
         headers[NEXT_ROUTER_STATE_TREE_HEADER.toLowerCase()],
-        headers[NEXT_URL.toLowerCase()]
+        headers[NEXT_URL.toLowerCase()],
+        isRSCRequest ? '1' : '0'
       )
-      const actualHash = getRequestMeta(req, 'cacheBustingSearchParam') ?? null
+      const actualHash =
+        getRequestMeta(req, 'cacheBustingSearchParam') ??
+        new URL(
+          req.url || '',
+          `http://${req.headers.host || 'localhost'}`
+        ).searchParams.get(NEXT_RSC_UNION_QUERY)
+
       if (expectedHash !== actualHash) {
         // The hash sent by the client does not match the expected value.
         // Respond with an error.
+        // TODO: Change it to a redirect to the URL with the correct cache-busting search param.
         res.statusCode = 400
         res.setHeader('content-type', 'text/plain')
         res.body('').send()
@@ -2173,10 +2173,6 @@ export default abstract class Server<
     const isPrefetchRSCRequest =
       getRequestMeta(req, 'isPrefetchRSCRequest') ?? false
 
-    // NOTE: Don't delete headers[RSC] yet, it still needs to be used in renderToHTML later
-
-    const isRSCRequest = getRequestMeta(req, 'isRSCRequest') ?? false
-
     // when we are handling a middleware prefetch and it doesn't
     // resolve to a static data route we bail early to avoid
     // unexpected SSR invocations

packages/next/src/shared/lib/router/utils/cache-busting-search-param.ts

@@ -4,13 +4,15 @@ export function computeCacheBustingSearchParam(
   prefetchHeader: string | string[] | undefined,
   segmentPrefetchHeader: string | string[] | undefined,
   stateTreeHeader: string | string[] | undefined,
-  nextUrlHeader: string | string[] | undefined
+  nextUrlHeader: string | string[] | undefined,
+  rscHeader: string | string[] | undefined
 ): string | null {
   if (
     prefetchHeader === undefined &&
     segmentPrefetchHeader === undefined &&
     stateTreeHeader === undefined &&
-    nextUrlHeader === undefined
+    nextUrlHeader === undefined &&
+    rscHeader === undefined
   ) {
     return null
   }
@@ -20,6 +22,7 @@ export function computeCacheBustingSearchParam(
       segmentPrefetchHeader || '0',
       stateTreeHeader || '0',
       nextUrlHeader || '0',
+      rscHeader || '0', // This ensures there is always a cache-busting search param for RSC requests even when no other headers are present
     ].join(',')
   )
 }

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

@@ -1,4 +1,7 @@
 import { nextTestSetup } from 'e2e-utils'
+import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
+import { computeCacheBustingSearchParam } from 'next/dist/shared/lib/router/utils/cache-busting-search-param'
+
 describe('app dir - css - experimental inline css', () => {
   const { next, isNextDev } = nextTestSetup({
     files: __dirname,
@@ -16,13 +19,24 @@ describe('app dir - css - experimental inline css', () => {
     })
 
     it('should not return rsc payload with inlined style as a dynamic client nav', async () => {
+      const headers = {
+        rsc: '1',
+      }
+      const cacheBustingSearchParam = computeCacheBustingSearchParam(
+        null,
+        null,
+        null,
+        null,
+        '1'
+      )
       const rscPayload = await (
-        await next.fetch('/a', {
-          method: 'GET',
-          headers: {
-            rsc: '1',
-          },
-        })
+        await next.fetch(
+          `/a?${NEXT_RSC_UNION_QUERY}=${cacheBustingSearchParam}`,
+          {
+            method: 'GET',
+            headers,
+          }
+        )
       ).text()
 
       const style = 'font-size'
@@ -32,9 +46,12 @@ describe('app dir - css - experimental inline css', () => {
 
       expect(
         await (
-          await next.fetch('/a', {
-            method: 'GET',
-          })
+          await next.fetch(
+            `/a?${NEXT_RSC_UNION_QUERY}=${cacheBustingSearchParam}`,
+            {
+              method: 'GET',
+            }
+          )
         ).text()
       ).toContain(style) // sanity check that HTML has the style
     })

test/e2e/app-dir/app-prefetch/prefetching.test.ts

@@ -1,6 +1,7 @@
 import { nextTestSetup } from 'e2e-utils'
 import { check, waitFor, retry } from 'next-test-utils'
 import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
+import { computeCacheBustingSearchParam } from 'next/dist/shared/lib/router/utils/cache-busting-search-param'
 
 const browserConfigWithFixedTime = {
   beforePageLoad: (page) => {
@@ -294,14 +295,27 @@ describe('app dir - prefetching', () => {
         true,
       ])
     )
-    const response = await next.fetch(`/prefetch-auto/justputit?_rsc=dcqtr`, {
-      headers: {
-        RSC: '1',
-        'Next-Router-Prefetch': '1',
-        'Next-Router-State-Tree': stateTree,
-        'Next-Url': '/prefetch-auto/vercel',
-      },
-    })
+
+    const headers = {
+      RSC: '1',
+      'Next-Router-Prefetch': '1',
+      'Next-Router-State-Tree': stateTree,
+      'Next-Url': '/prefetch-auto/vercel',
+    }
+
+    const url = new URL('/prefetch-auto/justputit', 'http://localhost')
+    const cacheBustingParam = computeCacheBustingSearchParam(
+      headers['Next-Router-Prefetch'],
+      undefined,
+      headers['Next-Router-State-Tree'],
+      headers['Next-Url'],
+      headers['RSC']
+    )
+    if (cacheBustingParam) {
+      url.searchParams.set('_rsc', cacheBustingParam)
+    }
+
+    const response = await next.fetch(url.toString(), { headers })
 
     const prefetchResponse = await response.text()
     expect(prefetchResponse).not.toContain('Page Data!')

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

@@ -1,4 +1,5 @@
 import { nextTestSetup } from 'e2e-utils'
+import { computeCacheBustingSearchParam } from 'next/dist/shared/lib/router/utils/cache-busting-search-param'
 
 describe('app dir - validation', () => {
   const { next, skipped } = nextTestSetup({
@@ -11,20 +12,49 @@ describe('app dir - validation', () => {
   }
 
   it('should error when passing invalid router state tree', async () => {
-    const res = await next.fetch('/', {
-      headers: {
-        RSC: '1',
-        'Next-Router-State-Tree': JSON.stringify(['', '']),
-      },
-    })
+    const stateTree1 = JSON.stringify(['', ''])
+    const stateTree2 = JSON.stringify(['', {}])
+
+    const headers1 = {
+      RSC: '1',
+      'Next-Router-State-Tree': stateTree1,
+    }
+
+    const headers2 = {
+      RSC: '1',
+      'Next-Router-State-Tree': stateTree2,
+    }
+
+    const url1 = new URL('/', 'http://localhost')
+    const url2 = new URL('/', 'http://localhost')
+
+    // Add cache busting search param for both requests
+    const cacheBustingParam1 = computeCacheBustingSearchParam(
+      undefined,
+      undefined,
+      stateTree1,
+      undefined,
+      '1'
+    )
+    const cacheBustingParam2 = computeCacheBustingSearchParam(
+      undefined,
+      undefined,
+      stateTree2,
+      undefined,
+      '1'
+    )
+
+    if (cacheBustingParam1) {
+      url1.searchParams.set('_rsc', cacheBustingParam1)
+    }
+    if (cacheBustingParam2) {
+      url2.searchParams.set('_rsc', cacheBustingParam2)
+    }
+
+    const res = await next.fetch(url1.toString(), { headers: headers1 })
     expect(res.status).toBe(500)
 
-    const res2 = await next.fetch('/', {
-      headers: {
-        RSC: '1',
-        'Next-Router-State-Tree': JSON.stringify(['', {}]),
-      },
-    })
+    const res2 = await next.fetch(url2.toString(), { headers: headers2 })
     expect(res2.status).toBe(200)
   })
 })