Mask Flight Parameters from Middleware

packages/next/client/components/app-router.client.tsx

@@ -202,28 +202,32 @@ export default function AppRouter({
         }
 
         prefetched.add(href)
-
         const url = new URL(href, location.origin)
-        // TODO-APP: handle case where history.state is not the new router history entry
-        const r = fetchServerResponse(
-          url,
-          // initialTree is used when history.state.tree is missing because the history state is set in `useEffect` below, it being missing means this is the hydration case.
-          window.history.state?.tree || initialTree,
-          true
-        )
+
         try {
-          r.readRoot()
-        } catch (e) {
-          await e
-          const flightData = r.readRoot()
-          // @ts-ignore startTransition exists
-          React.startTransition(() => {
-            dispatch({
-              type: ACTION_PREFETCH,
-              url,
-              flightData,
+          // TODO-APP: handle case where history.state is not the new router history entry
+          const r = fetchServerResponse(
+            url,
+            // initialTree is used when history.state.tree is missing because the history state is set in `useEffect` below, it being missing means this is the hydration case.
+            window.history.state?.tree || initialTree,
+            true
+          )
+          try {
+            r.readRoot()
+          } catch (e) {
+            await e
+            const flightData = r.readRoot()
+            // @ts-ignore startTransition exists
+            React.startTransition(() => {
+              dispatch({
+                type: ACTION_PREFETCH,
+                url,
+                flightData,
+              })
             })
-          })
+          }
+        } catch (err) {
+          console.error('PREFETCH ERROR', err)
         }
       },
       replace: (href, options = {}) => {

packages/next/server/app-render.tsx

@@ -18,14 +18,15 @@ import {
 } from './node-web-streams-helper'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { ESCAPE_REGEX, htmlEscapeJsonString } from './htmlescape'
-import { shouldUseReactRoot, stripInternalQueries } from './utils'
+import { shouldUseReactRoot } from './utils'
 import { NextApiRequestCookies } from './api-utils'
 import { matchSegment } from '../client/components/match-segments'
 import {
   FlightCSSManifest,
   FlightManifest,
 } from '../build/webpack/plugins/flight-manifest-plugin'
 import { FlushEffectsContext } from '../client/components/hooks-client'
+import { stripInternalQueries } from './internal-utils'
 import type { ComponentsType } from '../build/webpack/loaders/next-app-loader'
 
 // this needs to be required lazily so that `next-server` can set

packages/next/server/internal-utils.ts

@@ -0,0 +1,38 @@
+import type { NextParsedUrlQuery } from './request-meta'
+
+const INTERNAL_QUERY_NAMES = [
+  '__nextFallback',
+  '__nextLocale',
+  '__nextDefaultLocale',
+  '__nextIsNotFound',
+  // RSC
+  '__flight__',
+  '__props__',
+  // Routing
+  '__flight_router_state_tree__',
+] as const
+
+const EXTENDED_INTERNAL_QUERY_NAMES = ['__nextDataReq'] as const
+
+export function stripInternalQueries(query: NextParsedUrlQuery) {
+  for (const name of INTERNAL_QUERY_NAMES) {
+    delete query[name]
+  }
+}
+
+export function stripInternalSearchParams(
+  searchParams: URLSearchParams,
+  extended?: boolean
+) {
+  for (const name of INTERNAL_QUERY_NAMES) {
+    searchParams.delete(name)
+  }
+
+  if (extended) {
+    for (const name of EXTENDED_INTERNAL_QUERY_NAMES) {
+      searchParams.delete(name)
+    }
+  }
+
+  return searchParams
+}

packages/next/server/render.tsx

@@ -79,7 +79,8 @@ import {
 } from './node-web-streams-helper'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
-import { shouldUseReactRoot, stripInternalQueries } from './utils'
+import { shouldUseReactRoot } from './utils'
+import { stripInternalQueries } from './internal-utils'
 
 let tryGetPreviewData: typeof import('./api-utils/node').tryGetPreviewData
 let warn: typeof import('../build/output/log').warn

packages/next/server/utils.ts

@@ -1,4 +1,3 @@
-import type { NextParsedUrlQuery } from './request-meta'
 import React from 'react'
 import { BLOCKED_PAGES } from '../shared/lib/constants'
 
@@ -23,18 +22,5 @@ export function isTargetLikeServerless(target: string) {
   return isServerless || isServerlessTrace
 }
 
-export function stripInternalQueries(query: NextParsedUrlQuery) {
-  delete query.__nextFallback
-  delete query.__nextLocale
-  delete query.__nextDefaultLocale
-  delete query.__nextIsNotFound
-
-  // RSC
-  delete query.__flight__
-  delete query.__props__
-  // routing
-  delete query.__flight_router_state_tree__
-}
-
 // When react version is >= 18 opt-in using reactRoot
 export const shouldUseReactRoot = parseInt(React.version) >= 18

packages/next/server/web/adapter.ts

@@ -8,6 +8,7 @@ import { NextResponse } from './spec-extension/response'
 import { relativizeURL } from '../../shared/lib/router/utils/relativize-url'
 import { waitUntilSymbol } from './spec-extension/fetch-event'
 import { NextURL } from './next-url'
+import { stripInternalSearchParams } from '../internal-utils'
 
 class NextRequestHint extends NextRequest {
   sourcePage: string
@@ -54,12 +55,12 @@ export async function adapter(params: {
     requestUrl.pathname = '/'
   }
 
-  // clean-up any internal query params
-  for (const key of [...requestUrl.searchParams.keys()]) {
-    if (key.startsWith('__next')) {
-      requestUrl.searchParams.delete(key)
-    }
-  }
+  // Preserve flight data.
+  const flightData = requestUrl.flightData
+  requestUrl.flightData = undefined
+
+  // Strip internal query parameters off the request.
+  stripInternalSearchParams(requestUrl.searchParams, true)
 
   const request = new NextRequestHint({
     page: params.page,
@@ -105,6 +106,7 @@ export async function adapter(params: {
 
     if (rewriteUrl.host === request.nextUrl.host) {
       rewriteUrl.buildId = buildId || rewriteUrl.buildId
+      rewriteUrl.flightData = flightData || rewriteUrl.flightData
       response.headers.set('x-middleware-rewrite', String(rewriteUrl))
     }
 
@@ -142,6 +144,7 @@ export async function adapter(params: {
 
     if (redirectURL.host === request.nextUrl.host) {
       redirectURL.buildId = buildId || redirectURL.buildId
+      redirectURL.flightData = flightData || redirectURL.flightData
       response.headers.set('Location', String(redirectURL))
     }
 

packages/next/server/web/next-url.ts

@@ -15,6 +15,12 @@ interface Options {
   }
 }
 
+const FLIGHT_PARAMETERS = [
+  '__flight__',
+  '__props__',
+  '__flight_router_state_tree__',
+] as const
+
 const REGEX_LOCALHOST_HOSTNAME =
   /(?!^https?:\/\/)(127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|::1|localhost)/
 
@@ -25,12 +31,35 @@ function parseURL(url: string | URL, base?: string | URL) {
   )
 }
 
+function parseFlightParameters(
+  searchParams: URLSearchParams
+): Record<string, string> | undefined {
+  let flightData: Record<string, string> = {}
+  let flightDataUpdated = false
+  for (const name of FLIGHT_PARAMETERS) {
+    const value = searchParams.get(name)
+    if (value === null) {
+      continue
+    }
+
+    flightData[name] = value
+    flightDataUpdated = true
+  }
+
+  if (!flightDataUpdated) {
+    return undefined
+  }
+
+  return flightData
+}
+
 const Internal = Symbol('NextURLInternal')
 
 export class NextURL {
   [Internal]: {
     basePath: string
     buildId?: string
+    flightData?: Record<string, string>
     defaultLocale?: string
     domainLocale?: DomainLocale
     locale?: string
@@ -89,6 +118,9 @@ export class NextURL {
     this[Internal].buildId = pathnameInfo.buildId
     this[Internal].locale = pathnameInfo.locale ?? defaultLocale
     this[Internal].trailingSlash = pathnameInfo.trailingSlash
+    this[Internal].flightData = parseFlightParameters(
+      this[Internal].url.searchParams
+    )
   }
 
   private formatPathname() {
@@ -112,6 +144,24 @@ export class NextURL {
     this[Internal].buildId = buildId
   }
 
+  public get flightData() {
+    return this[Internal].flightData
+  }
+
+  public set flightData(flightData: Record<string, string> | undefined) {
+    if (flightData) {
+      for (const name of FLIGHT_PARAMETERS) {
+        this[Internal].url.searchParams.set(name, flightData[name] ?? '')
+      }
+    } else {
+      for (const name of FLIGHT_PARAMETERS) {
+        this[Internal].url.searchParams.delete(name)
+      }
+    }
+
+    this[Internal].flightData = flightData
+  }
+
   public get locale() {
     return this[Internal].locale ?? ''
   }

test/e2e/app-dir/app/app/internal/failure/page.server.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div id="failure">Failure</div>
+}

test/e2e/app-dir/app/app/internal/page.server.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <div>
+        <Link href="/internal/test/rewrite">
+          <a id="navigate-rewrite">Navigate Rewrite</a>
+        </Link>
+      </div>
+      <div>
+        <Link href="/internal/test/redirect">
+          <a id="navigate-redirect">Navigate Redirect</a>
+        </Link>
+      </div>
+    </div>
+  )
+}

test/e2e/app-dir/app/app/internal/success/page.server.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div id="success">Success</div>
+}

test/e2e/app-dir/app/middleware.js

@@ -1,8 +1,25 @@
+// @ts-check
 import { NextResponse } from 'next/server'
 
+/**
+ * @param {import('next/server').NextRequest} request
+ * @returns {NextResponse | undefined}
+ */
 export function middleware(request) {
   if (request.nextUrl.pathname === '/middleware-to-dashboard') {
-    // TODO: this does not copy __flight__ and __flight_router_state_tree__
     return NextResponse.rewrite(new URL('/dashboard', request.url))
   }
+
+  if (request.nextUrl.pathname.startsWith('/internal/test')) {
+    const method = request.nextUrl.pathname.endsWith('rewrite')
+      ? 'rewrite'
+      : 'redirect'
+
+    const internal = ['__flight__', '__props__', '__flight_router_state_tree__']
+    if (internal.some((name) => request.nextUrl.searchParams.has(name))) {
+      return NextResponse[method](new URL('/internal/failure', request.url))
+    }
+
+    return NextResponse[method](new URL('/internal/success', request.url))
+  }
 }

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

@@ -733,6 +733,27 @@ describe('app dir', () => {
         })
       })
 
+      describe('middleware', () => {
+        ;['rewrite', 'redirect'].map((method) =>
+          it(`should strip internal query parameters from requests to middleware for ${method}`, async () => {
+            const browser = await webdriver(next.url, '/internal')
+
+            try {
+              // Wait for and click the navigation element, this should trigger
+              // the flight request that'll be caught by the middleware. If the
+              // middleware sees any flight data on the request it'll redirect to
+              // a page with an element of #failure, otherwise, we'll see the
+              // element for #success.
+              await browser.waitForElementByCss(`#navigate-${method}`)
+              await browser.elementById(`navigate-${method}`).click()
+              await browser.waitForElementByCss('#success')
+            } finally {
+              await browser.close()
+            }
+          })
+        )
+      })
+
       describe('next/router', () => {
         it('should always return null when accessed from /app', async () => {
           const browser = await webdriver(next.url, '/old-router')