react-router 7.11.0-pre.0 → 7.12.0-pre.0

package/CHANGELOG.md

@@ -1,6 +1,51 @@
 # `react-router`
 
-## 7.11.0-pre.0
+## 7.12.0-pre.0
+
+### Minor Changes
+
+- Add additional layer of CSRF protection by rejecting submissions to UI routes from external origins. If you need to permit access to specific external origins, you can specify them in the `react-router.config.ts` config `allowedActionOrigins` field. ([#14708](https://github.com/remix-run/react-router/pull/14708))
+
+### Patch Changes
+
+- Fix `generatePath` when used with suffixed params (i.e., "/books/:id.json") ([#14269](https://github.com/remix-run/react-router/pull/14269))
+- Export `UNSAFE_createMemoryHistory` and `UNSAFE_createHashHistory` alongside `UNSAFE_createBrowserHistory` for consistency. These are not intended to be used for new apps but intended to help apps usiong `unstable_HistoryRouter` migrate from v6->v7 so they can adopt the newer APIs. ([#14663](https://github.com/remix-run/react-router/pull/14663))
+- Escape HTML in scroll restoration keys ([#14705](https://github.com/remix-run/react-router/pull/14705))
+- Validate redirect locations ([#14706](https://github.com/remix-run/react-router/pull/14706))
+- [UNSTABLE] Pass `<Scripts nonce>` value through to the underlying `importmap` `script` tag when using `future.unstable_subResourceIntegrity` ([#14675](https://github.com/remix-run/react-router/pull/14675))
+- [UNSTABLE] Add a new `future.unstable_trailingSlashAwareDataRequests` flag to provide consistent behavior of `request.pathname` inside `middleware`, `loader`, and `action` functions on document and data requests when a trailing slash is present in the browser URL. ([#14644](https://github.com/remix-run/react-router/pull/14644))
+
+  Currently, your HTTP and `request` pathnames would be as follows for `/a/b/c` and `/a/b/c/`
+
+  | URL `/a/b/c` | **HTTP pathname** | **`request` pathname`** |
+  | ------------ | ----------------- | ----------------------- |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅             |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅             |
+
+  | URL `/a/b/c/` | **HTTP pathname** | **`request` pathname`** |
+  | ------------- | ----------------- | ----------------------- |
+  | **Document**  | `/a/b/c/`         | `/a/b/c/` ✅            |
+  | **Data**      | `/a/b/c.data`     | `/a/b/c` ⚠️             |
+
+  With this flag enabled, these pathnames will be made consistent though a new `_.data` format for client-side `.data` requests:
+
+  | URL `/a/b/c` | **HTTP pathname** | **`request` pathname`** |
+  | ------------ | ----------------- | ----------------------- |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅             |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅             |
+
+  | URL `/a/b/c/` | **HTTP pathname**  | **`request` pathname`** |
+  | ------------- | ------------------ | ----------------------- |
+  | **Document**  | `/a/b/c/`          | `/a/b/c/` ✅            |
+  | **Data**      | `/a/b/c/_.data` ⬅️ | `/a/b/c/` ✅            |
+
+  This a bug fix but we are putting it behind an opt-in flag because it has the potential to be a "breaking bug fix" if you are relying on the URL format for any other application or caching logic.
+
+  Enabling this flag also changes the format of client side `.data` requests from `/_root.data` to `/_.data` when navigating to `/` to align with the new format. This does not impact the `request` pathname which is still `/` in all cases.
+
+- Preserve `clientLoader.hydrate=true` when using `<HydratedRouter unstable_instrumentations>` ([#14674](https://github.com/remix-run/react-router/pull/14674))
+
+## 7.11.0
 
 ### Minor Changes
 
@@ -9,10 +54,14 @@
 ### Patch Changes
 
 - add support for throwing redirect Response's at RSC render time ([#14596](https://github.com/remix-run/react-router/pull/14596))
+
 - Support for throwing `data()` and Response from server component render phase. Response body is not serialized as async work is not allowed as error encoding phase. If you wish to transmit data to the boundary, throw `data()` instead. ([#14632](https://github.com/remix-run/react-router/pull/14632))
+
 - Fix `unstable_useTransitions` prop on `<Router>` component to permit omission for backewards compatibility ([#14646](https://github.com/remix-run/react-router/pull/14646))
+
 - `routeRSCServerRequest` replace `fetchServer` with `serverResponse` ([#14597](https://github.com/remix-run/react-router/pull/14597))
-- [UNSTABLE] Add a new `unstable_defaultShouldRevalidate` flag to various APIs to allow opt-ing out of standard revalidation behaviors. ([#14542](https://github.com/remix-run/react-router/pull/14542))
+
+- \[UNSTABLE] Add a new `unstable_defaultShouldRevalidate` flag to various APIs to allow opt-ing out of standard revalidation behaviors. ([#14542](https://github.com/remix-run/react-router/pull/14542))
 
   If active routes include a `shouldRevalidate` function, then your value will be passed as `defaultShouldRevalidate` in those function so that the route always has the final revalidation determination.
   - `<Form method="post" unstable_defaultShouldRevalidate={false}>`
@@ -26,6 +75,7 @@
   - `setSearchParams(params, { unstable_defaultShouldRevalidate: false })`
 
 - Allow redirects to be returned from client side middleware ([#14598](https://github.com/remix-run/react-router/pull/14598))
+
 - Handle `dataStrategy` implementations that return insufficient result sets by adding errors for routes without any available result ([#14627](https://github.com/remix-run/react-router/pull/14627))
 
 ## 7.10.1

package/dist/development/{browser-Cv4JZyZ5.d.mts → browser-BEPxnEBW.d.mts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './router-5fbeEIMQ.mjs';
+import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './router-5iOvts3c.mjs';
 
 type RSCRouteConfigEntryBase = {
     action?: ActionFunction;
@@ -138,6 +138,7 @@ type LoadServerActionFunction = (id: string) => Promise<Function>;
  * @category RSC
  * @mode data
  * @param opts Options
+ * @param opts.allowedActionOrigins Origin patterns that are allowed to execute actions.
  * @param opts.basename The basename to use when matching the request.
  * @param opts.createTemporaryReferenceSet A function that returns a temporary
  * reference set for the request, used to track temporary references in the [RSC](https://react.dev/reference/rsc/server-components)
@@ -167,7 +168,8 @@ type LoadServerActionFunction = (id: string) => Promise<Function>;
  * that contains the [RSC](https://react.dev/reference/rsc/server-components)
  * data for hydration.
  */
-declare function matchRSCServerRequest({ createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+    allowedActionOrigins?: string[];
     createTemporaryReferenceSet: () => unknown;
     basename?: string;
     decodeReply?: DecodeReplyFunction;

package/dist/{production/browser-Cv4JZyZ5.d.mts → development/browser-CJ9_du-U.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './router-5fbeEIMQ.mjs';
+import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './instrumentation-DvHY1sgY.js';
 
 type RSCRouteConfigEntryBase = {
     action?: ActionFunction;
@@ -138,6 +138,7 @@ type LoadServerActionFunction = (id: string) => Promise<Function>;
  * @category RSC
  * @mode data
  * @param opts Options
+ * @param opts.allowedActionOrigins Origin patterns that are allowed to execute actions.
  * @param opts.basename The basename to use when matching the request.
  * @param opts.createTemporaryReferenceSet A function that returns a temporary
  * reference set for the request, used to track temporary references in the [RSC](https://react.dev/reference/rsc/server-components)
@@ -167,7 +168,8 @@ type LoadServerActionFunction = (id: string) => Promise<Function>;
  * that contains the [RSC](https://react.dev/reference/rsc/server-components)
  * data for hydration.
  */
-declare function matchRSCServerRequest({ createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+    allowedActionOrigins?: string[];
     createTemporaryReferenceSet: () => unknown;
     basename?: string;
     decodeReply?: DecodeReplyFunction;

package/dist/development/{chunk-QMKP6CC3.mjs → chunk-2RQJSHF5.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.11.0-pre.0
+ * react-router v7.12.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -51,7 +51,7 @@ import {
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-KRMLYMWA.mjs";
+} from "./chunk-KYKH2NCS.mjs";
 
 // lib/dom/ssr/server.tsx
 import * as React from "react";
@@ -138,7 +138,8 @@ function createRoutesStub(routes, _context) {
       frameworkContextRef.current = {
         future: {
           unstable_subResourceIntegrity: future?.unstable_subResourceIntegrity === true,
-          v8_middleware: future?.v8_middleware === true
+          v8_middleware: future?.v8_middleware === true,
+          unstable_trailingSlashAwareDataRequests: future?.unstable_trailingSlashAwareDataRequests === true
         },
         manifest: {
           routes: {},
@@ -754,6 +755,85 @@ function prependCookies(parentHeaders, childHeaders) {
   }
 }
 
+// lib/actions.ts
+function throwIfPotentialCSRFAttack(headers, allowedActionOrigins) {
+  let originHeader = headers.get("origin");
+  let originDomain = typeof originHeader === "string" && originHeader !== "null" ? new URL(originHeader).host : originHeader;
+  let host = parseHostHeader(headers);
+  if (originDomain && (!host || originDomain !== host.value)) {
+    if (!isAllowedOrigin(originDomain, allowedActionOrigins)) {
+      if (host) {
+        throw new Error(
+          `${host.type} header does not match \`origin\` header from a forwarded action request. Aborting the action.`
+        );
+      } else {
+        throw new Error(
+          "`x-forwarded-host` or `host` headers are not provided. One of these is needed to compare the `origin` header from a forwarded action request. Aborting the action."
+        );
+      }
+    }
+  }
+}
+function matchWildcardDomain(domain, pattern) {
+  const domainParts = domain.split(".");
+  const patternParts = pattern.split(".");
+  if (patternParts.length < 1) {
+    return false;
+  }
+  if (domainParts.length < patternParts.length) {
+    return false;
+  }
+  if (patternParts.length === 1 && (patternParts[0] === "*" || patternParts[0] === "**")) {
+    return false;
+  }
+  while (patternParts.length) {
+    const patternPart = patternParts.pop();
+    const domainPart = domainParts.pop();
+    switch (patternPart) {
+      case "": {
+        return false;
+      }
+      case "*": {
+        if (domainPart) {
+          continue;
+        } else {
+          return false;
+        }
+      }
+      case "**": {
+        if (patternParts.length > 0) {
+          return false;
+        }
+        return domainPart !== void 0;
+      }
+      case void 0:
+      default: {
+        if (domainPart !== patternPart) {
+          return false;
+        }
+      }
+    }
+  }
+  return domainParts.length === 0;
+}
+function isAllowedOrigin(originDomain, allowedActionOrigins = []) {
+  return allowedActionOrigins.some(
+    (allowedOrigin) => allowedOrigin && (allowedOrigin === originDomain || matchWildcardDomain(originDomain, allowedOrigin))
+  );
+}
+function parseHostHeader(headers) {
+  let forwardedHostHeader = headers.get("x-forwarded-host");
+  let forwardedHostValue = forwardedHostHeader?.split(",")[0]?.trim();
+  let hostHeader = headers.get("host");
+  return forwardedHostValue ? {
+    type: "x-forwarded-host",
+    value: forwardedHostValue
+  } : hostHeader ? {
+    type: "host",
+    value: hostHeader
+  } : void 0;
+}
+
 // lib/server-runtime/single-fetch.ts
 var SERVER_NO_BODY_STATUS_CODES = /* @__PURE__ */ new Set([
   ...NO_BODY_STATUS_CODES,
@@ -761,6 +841,10 @@ var SERVER_NO_BODY_STATUS_CODES = /* @__PURE__ */ new Set([
 ]);
 async function singleFetchAction(build, serverMode, staticHandler, request, handlerUrl, loadContext, handleError) {
   try {
+    throwIfPotentialCSRFAttack(
+      request.headers,
+      Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []
+    );
     let handlerRequest = new Request(handlerUrl, {
       method: request.method,
       body: request.body,
@@ -1041,13 +1125,21 @@ function derive(build, mode) {
     let url = new URL(request.url);
     let normalizedBasename = build.basename || "/";
     let normalizedPath = url.pathname;
-    if (stripBasename(normalizedPath, normalizedBasename) === "/_root.data") {
-      normalizedPath = normalizedBasename;
-    } else if (normalizedPath.endsWith(".data")) {
-      normalizedPath = normalizedPath.replace(/\.data$/, "");
-    }
-    if (stripBasename(normalizedPath, normalizedBasename) !== "/" && normalizedPath.endsWith("/")) {
-      normalizedPath = normalizedPath.slice(0, -1);
+    if (build.future.unstable_trailingSlashAwareDataRequests) {
+      if (normalizedPath.endsWith("/_.data")) {
+        normalizedPath = normalizedPath.replace(/_.data$/, "");
+      } else {
+        normalizedPath = normalizedPath.replace(/\.data$/, "");
+      }
+    } else {
+      if (stripBasename(normalizedPath, normalizedBasename) === "/_root.data") {
+        normalizedPath = normalizedBasename;
+      } else if (normalizedPath.endsWith(".data")) {
+        normalizedPath = normalizedPath.replace(/\.data$/, "");
+      }
+      if (stripBasename(normalizedPath, normalizedBasename) !== "/" && normalizedPath.endsWith("/")) {
+        normalizedPath = normalizedPath.slice(0, -1);
+      }
     }
     let isSpaMode = getBuildTimeHeader(request, "X-React-Router-SPA-Mode") === "yes";
     if (!build.ssr) {
@@ -1303,6 +1395,12 @@ async function handleSingleFetchRequest(serverMode, build, staticHandler, reques
 }
 async function handleDocumentRequest(serverMode, build, staticHandler, request, loadContext, handleError, isSpaMode, criticalCss) {
   try {
+    if (request.method === "POST") {
+      throwIfPotentialCSRFAttack(
+        request.headers,
+        Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []
+      );
+    }
     let result = await staticHandler.query(request, {
       requestContext: loadContext,
       generateMiddlewareResponse: build.future.v8_middleware ? async (query) => {
@@ -2274,7 +2372,9 @@ function RSCStaticRouter({ getPayload }) {
       // These flags have no runtime impact so can always be false.  If we add
       // flags that drive runtime behavior they'll need to be proxied through.
       v8_middleware: false,
-      unstable_subResourceIntegrity: false
+      unstable_subResourceIntegrity: false,
+      unstable_trailingSlashAwareDataRequests: true
+      // always on for RSC
     },
     isSpaMode: false,
     ssr: true,