Escape JSON LD content in <Meta /> (#14316)

Author: brophdawg11

.changeset/angry-planets-admire.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Escape HTML in `meta()` JSON-LD content

packages/react-router/__tests__/dom/ssr/meta-test.tsx

@@ -251,6 +251,7 @@ describe("meta", () => {
         postalCode: "92107",
       },
       email: ["sonnyday@fancymail.com", "surfergal@veryprofessional.org"],
+      bio: "A <b>surfer</b> & <em>coder</em>.",
     };
 
     let RoutesStub = createRoutesStub([
@@ -273,6 +274,9 @@ describe("meta", () => {
       container.querySelector('script[type="application/ld+json"]')
         ?.innerHTML || "{}";
     expect(JSON.parse(scriptTagContents)).toEqual(jsonLd);
+    expect(scriptTagContents).toContain(
+      "A \\u003cb\\u003esurfer\\u003c/b\\u003e \\u0026 \\u003cem\\u003ecoder\\u003c/em\\u003e.",
+    );
   });
 
   it("{ tagName: 'link' } adds a <link />", () => {

packages/react-router/__tests__/server-runtime/markup-test.ts

@@ -1,6 +1,6 @@
 import vm from "vm";
 
-import { escapeHtml } from "../../lib/server-runtime/markup";
+import { escapeHtml } from "../../lib/dom/ssr/markup";
 
 describe("escapeHtml", () => {
   // These tests are based on https://github.com/zertosh/htmlescape/blob/3e6cf0614dd0f778fd0131e69070b77282150c15/test/htmlescape-test.js

packages/react-router/lib/dom/ssr/components.tsx

@@ -19,7 +19,7 @@ import {
   isPageLinkDescriptor,
 } from "./links";
 import type { KeyedHtmlLinkDescriptor } from "./links";
-import { createHtml } from "./markup";
+import { escapeHtml } from "./markup";
 import type {
   MetaFunction,
   MetaDescriptor,
@@ -629,7 +629,7 @@ export function Meta(): React.JSX.Element {
               <script
                 key={`script:ld+json:${json}`}
                 type="application/ld+json"
-                dangerouslySetInnerHTML={{ __html: json }}
+                dangerouslySetInnerHTML={{ __html: escapeHtml(json) }}
               />
             );
           } catch (err) {
@@ -860,13 +860,13 @@ import(${JSON.stringify(manifest.entry.module)});`;
         <script
           {...scriptProps}
           suppressHydrationWarning
-          dangerouslySetInnerHTML={createHtml(contextScript)}
+          dangerouslySetInnerHTML={{ __html: contextScript }}
           type={undefined}
         />
         <script
           {...scriptProps}
           suppressHydrationWarning
-          dangerouslySetInnerHTML={createHtml(routeModulesScript)}
+          dangerouslySetInnerHTML={{ __html: routeModulesScript }}
           type="module"
           async
         />

packages/react-router/lib/dom/ssr/markup.ts

@@ -17,11 +17,3 @@ const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
 export function escapeHtml(html: string) {
   return html.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
 }
-
-export interface SafeHtml {
-  __html: string;
-}
-
-export function createHtml(html: string): SafeHtml {
-  return { __html: html };
-}

packages/react-router/lib/server-runtime/markup.ts

@@ -1,5 +1,5 @@
 import type { CriticalCss, FutureConfig } from "../dom/ssr/entry";
-import { escapeHtml } from "./markup";
+import { escapeHtml } from "../dom/ssr/markup";
 import type { ServerBuild } from "./build";
 
 export type ServerHandoff = {