From c030b3eddb1d86a88bb1b6497d3132f1153d49b0 Mon Sep 17 00:00:00 2001 From: Marcus-Rise Date: Tue, 8 Nov 2022 15:14:20 +0400 Subject: [PATCH] #42398 fix(app-router): escape non iso FlightRouterState segment value --- .../client/components/app-router-headers.ts | 31 ++++++ .../next/client/components/app-router.tsx | 23 ++--- .../index.test.ts | 7 ++ test/unit/app-router-headers.test.ts | 95 +++++++++++++++++++ 4 files changed, 145 insertions(+), 11 deletions(-) create mode 100644 test/unit/app-router-headers.test.ts diff --git a/packages/next/client/components/app-router-headers.ts b/packages/next/client/components/app-router-headers.ts index 1eb2747dd1cd22b..aef43864e0a70ed 100644 --- a/packages/next/client/components/app-router-headers.ts +++ b/packages/next/client/components/app-router-headers.ts @@ -1,5 +1,36 @@ +import { + DynamicParamTypesShort, + FlightRouterState, +} from '../../server/app-render' + export const RSC = 'RSC' as const export const NEXT_ROUTER_STATE_TREE = 'Next-Router-State-Tree' as const export const NEXT_ROUTER_PREFETCH = 'Next-Router-Prefetch' as const export const RSC_VARY_HEADER = `${RSC}, ${NEXT_ROUTER_STATE_TREE}, ${NEXT_ROUTER_PREFETCH}` as const + +export const escapeFlightRouterState = ( + state: FlightRouterState +): FlightRouterState => { + const [segment, parallelRoutes, ...restState] = state + const escapedParallelRoutes: typeof parallelRoutes = Object.create({}) + let escapedSegment: typeof segment = segment + + if (typeof segment !== 'string') { + const [param, value, type] = segment + const escapedSegmentValue = encodeURIComponent(value) + escapedSegment = [ + param, + escapedSegmentValue, + type as DynamicParamTypesShort, + ] + } + + Object.keys(parallelRoutes).forEach((key) => { + const childState = parallelRoutes[key] + + escapedParallelRoutes[key] = escapeFlightRouterState(childState) + }) + + return [escapedSegment, escapedParallelRoutes, ...restState] +} diff --git a/packages/next/client/components/app-router.tsx b/packages/next/client/components/app-router.tsx index d29f680d5051c63..5788d81e507f952 100644 --- a/packages/next/client/components/app-router.tsx +++ b/packages/next/client/components/app-router.tsx @@ -1,18 +1,18 @@ 'use client' import type { ReactNode } from 'react' -import React, { useEffect, useMemo, useCallback } from 'react' +import React, { useCallback, useEffect, useMemo } from 'react' import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack/client' +import type { + AppRouterInstance, + CacheNode, +} from '../../shared/lib/app-router-context' import { AppRouterContext, - LayoutRouterContext, GlobalLayoutRouterContext, + LayoutRouterContext, } from '../../shared/lib/app-router-context' -import type { - CacheNode, - AppRouterInstance, -} from '../../shared/lib/app-router-context' -import type { FlightRouterState, FlightData } from '../../server/app-render' +import type { FlightData, FlightRouterState } from '../../server/app-render' import { ACTION_NAVIGATE, ACTION_PREFETCH, @@ -22,14 +22,13 @@ import { reducer, } from './reducer' import { - SearchParamsContext, - // ParamsContext, PathnameContext, - // LayoutSegmentsContext, + SearchParamsContext, } from '../../shared/lib/hooks-client-context' import { useReducerWithReduxDevtools } from './use-reducer-with-devtools' import { ErrorBoundary, GlobalErrorComponent } from './error-boundary' import { + escapeFlightRouterState, NEXT_ROUTER_PREFETCH, NEXT_ROUTER_STATE_TREE, RSC, @@ -65,7 +64,9 @@ export async function fetchServerResponse( // Enable flight response [RSC]: '1', // Provide the current router state - [NEXT_ROUTER_STATE_TREE]: JSON.stringify(flightRouterState), + [NEXT_ROUTER_STATE_TREE]: JSON.stringify( + escapeFlightRouterState(flightRouterState) + ), } if (prefetch) { // Enable prefetch response diff --git a/test/production/app-dir-prefetch-non-iso-url/index.test.ts b/test/production/app-dir-prefetch-non-iso-url/index.test.ts index 28625dbe8164a90..6ac83c44517e801 100644 --- a/test/production/app-dir-prefetch-non-iso-url/index.test.ts +++ b/test/production/app-dir-prefetch-non-iso-url/index.test.ts @@ -3,6 +3,7 @@ import { NextInstance } from 'test/lib/next-modes/base' import { join } from 'path' import { BrowserInterface } from '../../lib/browsers/base' import webdriver from 'next-webdriver' +import { waitFor } from 'next-test-utils' describe('app-dir-prefetch-non-iso-url', () => { let next: NextInstance @@ -25,6 +26,9 @@ describe('app-dir-prefetch-non-iso-url', () => { await browser.elementByCss('#to-iso').click() const text = await browser.elementByCss('#page').text() + + await waitFor(3000) + expect(text).toBe('/[slug]') } finally { if (browser) { @@ -41,6 +45,9 @@ describe('app-dir-prefetch-non-iso-url', () => { await browser.elementByCss('#to-non-iso').click() const text = await browser.elementByCss('#page').text() + + await waitFor(3000) + expect(text).toBe('/[slug]') } finally { if (browser) { diff --git a/test/unit/app-router-headers.test.ts b/test/unit/app-router-headers.test.ts new file mode 100644 index 000000000000000..cfd2e3e3579e4e5 --- /dev/null +++ b/test/unit/app-router-headers.test.ts @@ -0,0 +1,95 @@ +import { escapeFlightRouterState } from 'next/client/components/app-router-headers' +import { FlightRouterState } from 'next/server/app-render' + +const state1: FlightRouterState = [ + '', + { + children: [ + ['slug', 'свитер-urbain', 'd'], + { + children: ['', {}], + }, + ], + }, + null, + 'refetch', +] +const state1Escaped: FlightRouterState = [ + '', + { + children: [ + ['slug', '%D1%81%D0%B2%D0%B8%D1%82%D0%B5%D1%80-urbain', 'd'], + { + children: ['', {}], + }, + ], + }, + null, + 'refetch', +] + +const state2: FlightRouterState = [ + '', + { + children: [ + ['slug', 'свитер-urbain', 'd'], + { + children: ['', {}], + }, + ], + }, + null, + null, + true, +] +const state2Escaped: FlightRouterState = [ + '', + { + children: [ + ['slug', '%D1%81%D0%B2%D0%B8%D1%82%D0%B5%D1%80-urbain', 'd'], + { + children: ['', {}], + }, + ], + }, + null, + null, + true, +] + +const state3: FlightRouterState = [ + '', + { + children: [ + ['slug', 'свитер-urbain', 'd'], + { + children: ['', {}], + }, + null, + 'refetch', + ], + }, +] +const state3Escaped: FlightRouterState = [ + '', + { + children: [ + ['slug', '%D1%81%D0%B2%D0%B8%D1%82%D0%B5%D1%80-urbain', 'd'], + { + children: ['', {}], + }, + null, + 'refetch', + ], + }, +] + +describe('escapeFlightRouterState', () => { + it.each([ + { state: state1, escapedState: state1Escaped }, + { state: state2, escapedState: state2Escaped }, + { state: state3, escapedState: state3Escaped }, + ])('should escape non-iso segment value', ({ state, escapedState }) => { + expect(escapeFlightRouterState(state)).toMatchObject(escapedState) + }) +})