escape flight response values

packages/next/server/render.tsx

@@ -83,6 +83,7 @@ import { interopDefault } from '../lib/interop-default'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { urlQueryToSearchParams } from '../shared/lib/router/utils/querystring'
 import { postProcessHTML } from './post-process'
+import { htmlEscapeJsonString } from './htmlescape'
 
 let tryGetPreviewData: typeof import('./api-utils/node').tryGetPreviewData
 let warn: typeof import('../build/output/log').warn
@@ -355,7 +356,7 @@ function createFlightHook() {
             bootstrapped = true
             inlinedDataWriter.write(
               encodeText(
-                `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify(
+                `<script>(self.__next_s=self.__next_s||[]).push(${escapeJSONForFlightScript(
                   [0, id]
                 )})</script>`
               )
@@ -370,7 +371,7 @@ function createFlightHook() {
           } else {
             inlinedDataWriter.write(
               encodeText(
-                `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify(
+                `<script>(self.__next_s=self.__next_s||[]).push(${escapeJSONForFlightScript(
                   [1, id, decodeText(value)]
                 )})</script>`
               )
@@ -388,6 +389,10 @@ function createFlightHook() {
   }
 }
 
+function escapeJSONForFlightScript(input: unknown): string {
+  return htmlEscapeJsonString(JSON.stringify(input))
+}
+
 const useFlightResponse = createFlightHook()
 
 // Create the wrapper component for a Flight stream.

test/integration/react-streaming-and-server-components/app/pages/escaping-rsc.server.js

@@ -0,0 +1,36 @@
+import { Suspense } from 'react'
+import Nav from '../components/nav'
+
+let result
+let promise
+function Data() {
+  if (result) return result
+  if (!promise)
+    promise = new Promise((res) => {
+      setTimeout(() => {
+        result =
+          '</script><script>window.__manipulated_by_injection=true</script><script>'
+        res()
+      }, 500)
+    })
+  throw promise
+}
+
+export default function Page() {
+  return (
+    <div>
+      <div id="content">
+        <Suspense fallback="next_escaping_fallback">
+          <Data />
+        </Suspense>
+      </div>
+      <div>
+        <Nav />
+      </div>
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'edge',
+}

test/integration/react-streaming-and-server-components/test/rsc.js

@@ -166,6 +166,12 @@ export default function (context, { runtime, env }) {
     expect(content).toMatchInlineSnapshot('"next_streaming_data"')
   })
 
+  it('should escape streaming data correctly', async () => {
+    const browser = await webdriver(context.appPort, '/escaping-rsc')
+    const manipulated = await browser.eval(`window.__manipulated_by_injection`)
+    expect(manipulated).toBe(undefined)
+  })
+
   // Disable next/image for nodejs runtime temporarily
   if (runtime === 'edge') {
     it('should suspense next/image in server components', async () => {