__staticRouterHydrationData html tag escape (#10068)

Co-authored-by: Matt Brophy <matt@brophy.org>

Author: zheng-chuang

.changeset/witty-melons-sip.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Properly escape HTML characters in StaticRouterProvider serialized hydration data

contributors.yml

@@ -178,3 +178,4 @@
 - xavier-lc
 - xcsnowcity
 - yuleicul
+- zheng-chuang

packages/react-router-dom/__tests__/data-static-router-test.tsx

@@ -269,6 +269,37 @@ describe("A <StaticRouterProvider>", () => {
     );
   });
 
+  it("escapes HTML tags in serialized hydration data", async () => {
+    let routes = [
+      {
+        path: "/",
+        loader: () => ({
+          key: "uh </script> oh",
+        }),
+        element: <h1>👋</h1>,
+      },
+    ];
+    let { query } = createStaticHandler(routes);
+
+    let context = (await query(
+      new Request("http://localhost/", {
+        signal: new AbortController().signal,
+      })
+    )) as StaticHandlerContext;
+
+    let html = ReactDOMServer.renderToStaticMarkup(
+      <React.StrictMode>
+        <StaticRouterProvider
+          router={createStaticRouter(routes, context)}
+          context={context}
+        />
+      </React.StrictMode>
+    );
+    expect(html).toMatchInlineSnapshot(
+      `"<h1>👋</h1><script>window.__staticRouterHydrationData = JSON.parse("{\\"loaderData\\":{\\"0\\":{\\"key\\":\\"uh \\u003c/script\\u003e oh\\"}},\\"actionData\\":null,\\"errors\\":null}");</script>"`
+    );
+  });
+
   it("serializes ErrorResponse instances", async () => {
     let routes = [
       {

packages/react-router-dom/server.tsx

@@ -114,7 +114,7 @@ export function StaticRouterProvider({
     // up parsing on the client.  Dual-stringify is needed to ensure all quotes
     // are properly escaped in the resulting string.  See:
     //   https://v8.dev/blog/cost-of-javascript-2019#json
-    let json = JSON.stringify(JSON.stringify(data));
+    let json = htmlEscape(JSON.stringify(JSON.stringify(data)));
     hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
   }
 
@@ -323,3 +323,19 @@ function encodeLocation(to: To): Path {
     hash: path.hash || "",
   };
 }
+
+// This utility is based on https://github.com/zertosh/htmlescape
+// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+function htmlEscape(str: string): string {
+  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}