fix: normalize control characters in relative URLs (#15416)

Assisted-By: devx/597728f0-1b3f-4153-b929-18dbff6cd683

Author: brophdawg11

packages/react-router/.changes/patch.normalize-url-control-characters.md

@@ -0,0 +1 @@
+Improve handling of special characters in navigation paths

packages/react-router/__tests__/dom/link-href-test.tsx

@@ -129,6 +129,26 @@ describe("<Link> href", () => {
       expect(renderer.root.findByType("a").props.href).toEqual("//remix.run");
     });
 
+    test("normalizes special characters in relative <Link> values", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/inbox/messages"]}>
+            <Routes>
+              <Route path="inbox">
+                <Route
+                  path="messages"
+                  element={<Link to={"/\t/nested/path"} />}
+                />
+              </Route>
+            </Routes>
+          </MemoryRouter>,
+        );
+      });
+
+      expect(renderer.root.findByType("a").props.href).toEqual("/nested/path");
+    });
+
     test('<Link to="mailto:remix@example.com"> is treated as external link', () => {
       let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {

packages/react-router/__tests__/router/browser-test.ts

@@ -47,6 +47,12 @@ describe("a browser history", () => {
     expect(href).toEqual("/the/path?the=query#the-hash");
   });
 
+  it("normalizes special characters in relative hrefs", () => {
+    for (let char of ["\t", "\n", "\r"]) {
+      expect(history.createHref(`/${char}/nested/path`)).toBe("/nested/path");
+    }
+  });
+
   it("does not encode the generated path", () => {
     const encodedHref = history.createHref({
       pathname: "/%23abc",

packages/react-router/__tests__/router/redirects-test.ts

@@ -1,6 +1,6 @@
 import { createMemoryHistory } from "../../lib/router/history";
 import { IDLE_NAVIGATION, createRouter } from "../../lib/router/router";
-import { replace } from "../../lib/router/utils";
+import { redirect, replace } from "../../lib/router/utils";
 import type { TestRouteObject } from "./utils/data-router-setup";
 import { cleanup, setup } from "./utils/data-router-setup";
 import { createFormData, tick } from "./utils/utils";
@@ -482,6 +482,25 @@ describe("redirects", () => {
     }
   });
 
+  it("normalizes special characters in redirects", async () => {
+    let router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: "/" },
+        { path: "/start", loader: () => redirect("/\t/parent") },
+        { path: "/parent" },
+      ],
+    });
+    router.initialize();
+    await tick();
+
+    await router.navigate("/start");
+    expect(router.state.location).toMatchObject({
+      pathname: "/parent",
+    });
+    router.dispose();
+  });
+
   it("properly handles same-origin absolute URLs when using a basename", async () => {
     let t = setup({ routes: REDIRECT_ROUTES, basename: "/base" });
 

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

@@ -38,13 +38,13 @@ import {
   defaultMapRouteProperties,
   ErrorResponseImpl,
   SUPPORTED_ERROR_TYPES,
+  isAbsoluteUrl,
   joinPaths,
   matchPath,
   parseToInfo,
   resolveTo,
   stripBasename,
 } from "../router/utils";
-import { ABSOLUTE_URL_REGEX } from "../router/url";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type * as _ from "./global";
@@ -1334,7 +1334,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   ) {
     let { basename, navigator, useTransitions } =
       React.useContext(NavigationContext);
-    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
+    let isAbsolute = typeof to === "string" && isAbsoluteUrl(to);
 
     let parsed = parseToInfo(to, basename);
     to = parsed.to;
@@ -1944,8 +1944,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
     let formAction = useFormAction(action, { relative });
     let formMethod: HTMLFormMethod =
       method.toLowerCase() === "get" ? "get" : "post";
-    let isAbsolute =
-      typeof action === "string" && ABSOLUTE_URL_REGEX.test(action);
+    let isAbsolute = typeof action === "string" && isAbsoluteUrl(action);
 
     let submitHandler: React.SubmitEventHandler<HTMLFormElement> = (event) => {
       onSubmit && onSubmit(event);

packages/react-router/lib/dom/server.tsx

@@ -24,7 +24,7 @@ import {
   convertRoutesToDataRoutes,
   isRouteErrorResponse,
 } from "../router/utils";
-import { ABSOLUTE_URL_REGEX } from "../router/url";
+import { ABSOLUTE_URL_REGEX, normalizeRelativeUrl } from "../router/url";
 import { DataRoutes, Router } from "../components";
 import {
   DataRouterContext,
@@ -457,6 +457,7 @@ function createHref(to: To) {
 
 function encodeLocation(to: To): Path {
   let href = typeof to === "string" ? to : createPath(to);
+  href = normalizeRelativeUrl(href);
   // Treating this as a full URL will strip any trailing spaces so we need to
   // pre-encode them since they might be part of a matching splat param from
   // an ancestor route

packages/react-router/lib/router/history.ts

@@ -1,4 +1,4 @@
-import { PROTOCOL_RELATIVE_URL_REGEX } from "./url";
+import { normalizeRelativeUrl, PROTOCOL_RELATIVE_URL_REGEX } from "./url";
 
 ////////////////////////////////////////////////////////////////////////////////
 //#region Types and Constants
@@ -407,7 +407,7 @@ export function createBrowserHistory(
   }
 
   function createBrowserHref(window: Window, to: To) {
-    return typeof to === "string" ? to : createPath(to);
+    return normalizeRelativeUrl(typeof to === "string" ? to : createPath(to));
   }
 
   return getUrlBasedHistory(
@@ -798,6 +798,7 @@ export function createBrowserURLImpl(
   invariant(base, "No window.location.(origin|href) available to create URL");
 
   let href = typeof to === "string" ? to : createPath(to);
+  href = normalizeRelativeUrl(href);
 
   // Treating this as a full URL will strip any trailing spaces so we need to
   // pre-encode them since they might be part of a matching splat param from

packages/react-router/lib/router/router.ts

@@ -77,6 +77,7 @@ import {
 } from "./utils";
 import {
   normalizeProtocolRelativeUrl,
+  normalizeRelativeUrl,
   PROTOCOL_RELATIVE_URL_REGEX,
 } from "./url";
 
@@ -6908,6 +6909,8 @@ function normalizeRedirectLocation(
   basename: string,
   historyInstance: History,
 ): string {
+  location = normalizeRelativeUrl(location);
+
   if (isAbsoluteUrl(location)) {
     // Strip off the protocol+origin for same-origin + same-basename absolute redirects
     let normalizedLocation = location;

packages/react-router/lib/router/url.ts

@@ -1,6 +1,25 @@
 export const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|[\\/]{2})/i;
 export const PROTOCOL_RELATIVE_URL_REGEX = /^[\\/]{2}/;
 
+// Normalize characters ignored by the URL parser before determining whether a
+// URL is relative or absolute.
+export function normalizeRelativeUrl(url: string): string {
+  if (ABSOLUTE_URL_REGEX.test(url)) {
+    return url;
+  }
+
+  let normalized = url.replace(/[\t\n\r]/g, "");
+  if (!ABSOLUTE_URL_REGEX.test(normalized)) {
+    return normalized;
+  }
+
+  if (PROTOCOL_RELATIVE_URL_REGEX.test(normalized)) {
+    return normalized.replace(/^[\\/]+/, "/");
+  }
+
+  return normalized.replace(/^([a-z][a-z0-9+.-]*):/i, "$1%3A");
+}
+
 export function normalizeProtocolRelativeUrl(url: string, protocol: string) {
   return protocol + url.replace(/\\/g, "/");
 }

packages/react-router/lib/router/utils.ts

@@ -5,6 +5,7 @@ import { invariant, parsePath, warning } from "./history";
 import {
   ABSOLUTE_URL_REGEX,
   normalizeProtocolRelativeUrl,
+  normalizeRelativeUrl,
   PROTOCOL_RELATIVE_URL_REGEX,
 } from "./url";
 
@@ -1852,7 +1853,8 @@ export function prependBasename({
   return pathname === "/" ? basename : joinPaths([basename, pathname]);
 }
 
-export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url);
+export const isAbsoluteUrl = (url: string) =>
+  ABSOLUTE_URL_REGEX.test(normalizeRelativeUrl(url));
 
 /**
  * Returns a resolved {@link Path} object relative to the given pathname.
@@ -1873,6 +1875,7 @@ export function resolvePath(to: To, fromPathname = "/"): Path {
 
   let pathname: string;
   if (toPathname) {
+    toPathname = normalizeRelativeUrl(toPathname);
     toPathname = removeDoubleSlashes(toPathname);
     if (toPathname.startsWith("/")) {
       pathname = resolvePathname(toPathname.substring(1), "/");
@@ -2400,7 +2403,9 @@ export function parseToInfo<T extends To | string>(
   _to: T,
   basename: string,
 ): ParsedLocationInfo<T | string> {
-  let to = _to as string;
+  let to = (
+    typeof _to === "string" ? normalizeRelativeUrl(_to) : _to
+  ) as string;
   if (typeof to !== "string" || !ABSOLUTE_URL_REGEX.test(to)) {
     return {
       absoluteURL: undefined,