feat: unstable_subResourceIntegrity

.changeset/late-falcons-sort.md

@@ -0,0 +1,6 @@
+---
+"@react-router/dev": patch
+"react-router": patch
+---
+
+Introduce `unstable_subResourceIntegrity` future flag that enables generation of an importmap with integrity for the scripts that will be loaded by the browser.

.github/workflows/shared-build.yml

@@ -22,7 +22,8 @@ jobs:
  node-version-file: ".nvmrc"
  cache: "pnpm"
 
- - uses: google/wireit@setup-github-actions-caching/v2
+ # TODO: Track and renable once this has been fixed: https://github.com/google/wireit/issues/1297
+ # - uses: google/wireit@setup-github-actions-caching/v2
 
  - name: Disable GitHub Actions Annotations
  run: |

.github/workflows/shared-integration.yml

@@ -45,7 +45,8 @@ jobs:
  node-version: ${{ matrix.node }}
  cache: "pnpm"
 
- - uses: google/wireit@setup-github-actions-caching/v2
+ # TODO: Track and renable once this has been fixed: https://github.com/google/wireit/issues/1297
+ # - uses: google/wireit@setup-github-actions-caching/v2
 
  - name: Disable GitHub Actions Annotations
  run: |

.github/workflows/test.yml

@@ -45,7 +45,8 @@ jobs:
  cache: pnpm
  check-latest: true
 
- - uses: google/wireit@setup-github-actions-caching/v2
+ # TODO: Track and renable once this has been fixed: https://github.com/google/wireit/issues/1297
+ # - uses: google/wireit@setup-github-actions-caching/v2
 
  - name: Disable GitHub Actions Annotations
  run: |

packages/react-router-dev/config/config.ts

@@ -92,6 +92,7 @@ interface FutureConfig {
  * Automatically split route modules into multiple chunks when possible.
  */
  unstable_splitRouteModules: boolean | "enforce";
+ unstable_subResourceIntegrity: boolean;
  /**
  * Use Vite Environment API (experimental)
  */
@@ -497,6 +498,8 @@ async function resolveConfig({
  reactRouterUserConfig.future?.unstable_optimizeDeps ?? false,
  unstable_splitRouteModules:
  reactRouterUserConfig.future?.unstable_splitRouteModules ?? false,
+ unstable_subResourceIntegrity:
+ reactRouterUserConfig.future?.unstable_subResourceIntegrity ?? false,
  unstable_viteEnvironmentApi:
  reactRouterUserConfig.future?.unstable_viteEnvironmentApi ?? false,
  };

packages/react-router-dev/manifest.ts

@@ -28,6 +28,7 @@ export type Manifest = {
  routes: {
  [routeId: string]: ManifestRoute;
  };
+ sri: Record<string, string> | undefined;
  hmr?: {
  timestamp?: number;
  runtime: string;

packages/react-router-dev/vite/plugin.ts

@@ -2,6 +2,7 @@
 // context but want to use Vite's ESM build to avoid deprecation warnings
 import type * as Vite from "vite";
 import { type BinaryLike, createHash } from "node:crypto";
+import * as fs from "node:fs";
 import * as path from "node:path";
 import * as url from "node:url";
 import * as fse from "fs-extra";
@@ -805,6 +806,39 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
  return new Set([...cssUrlPaths, ...chunkAssetPaths]);
  };
 
+ let generateSriManifest = async (ctx: ReactRouterPluginContext) => {
+ let clientBuildDirectory = getClientBuildDirectory(ctx.reactRouterConfig);
+ // walk the client build directory and generate SRI hashes for all .js files
+ let entries = fs.readdirSync(clientBuildDirectory, {
+ withFileTypes: true,
+ recursive: true,
+ });
+ let sriManifest: ReactRouterManifest["sri"] = {};
+ for (const entry of entries) {
+ if (entry.isFile() && entry.name.endsWith(".js")) {
+ let contents;
+ try {
+ contents = await fse.readFile(
+ path.join(entry.path, entry.name),
+ "utf-8"
+ );
+ } catch (e) {
+ logger.error(`Failed to read file for SRI generation: ${entry.name}`);
+ throw e;
+ }
+ let hash = createHash("sha384")
+ .update(contents)
+ .digest()
+ .toString("base64");
+ let filepath = getVite().normalizePath(
+ path.relative(clientBuildDirectory, path.join(entry.path, entry.name))
+ );
+ sriManifest[`${ctx.publicPath}${filepath}`] = `sha384-${hash}`;
+ }
+ }
+ return sriManifest;
+ };
+
  let generateReactRouterManifestsForBuild = async ({
  routeIds,
  }: {
@@ -942,6 +976,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
  let reactRouterBrowserManifest: ReactRouterManifest = {
  ...fingerprintedValues,
  ...nonFingerprintedValues,
+ sri: undefined,
  };
 
  // Write the browser manifest to disk as part of the build process
@@ -952,12 +987,18 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
  )};`
  );
 
+ let sri: ReactRouterManifest["sri"] = undefined;
+ if (ctx.reactRouterConfig.future.unstable_subResourceIntegrity) {
+ sri = await generateSriManifest(ctx);
+ }
+
  // The server manifest is the same as the browser manifest, except for
  // server bundle builds which only includes routes for the current bundle,
  // otherwise the server and client have the same routes
  let reactRouterServerManifest: ReactRouterManifest = {
  ...reactRouterBrowserManifest,
  routes: serverRoutes,
+ sri,
  };
 
  return {
@@ -1043,6 +1084,8 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
  };
  }
 
+ let sri: ReactRouterManifest["sri"] = undefined;
+
  let reactRouterManifestForDev = {
  version: String(Math.random()),
  url: combineURLs(ctx.publicPath, virtual.browserManifest.url),
@@ -1056,6 +1099,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
  ),
  imports: [],
  },
+ sri,
  routes,
  };
 

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

@@ -50,6 +50,19 @@ function initSsrInfo(): void {
  window.__reactRouterManifest &&
  window.__reactRouterRouteModules
  ) {
+ if (window.__reactRouterManifest.sri === true) {
+ const importMap = document.querySelector("script[rr-importmap]");
+ if (importMap?.textContent) {
+ try {
+ window.__reactRouterManifest.sri = JSON.parse(
+ importMap.textContent
+ ).integrity;
+ } catch (err) {
+ console.error("Failed to parse import map", err);
+ }
+ }
+ }
+
  ssrInfo = {
  context: window.__reactRouterContext,
  manifest: window.__reactRouterManifest,

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

@@ -785,32 +785,54 @@ import(${JSON.stringify(manifest.entry.module)});`;
 
  let preloads = isHydrated
  ? []
- : manifest.entry.imports.concat(
- getModuleLinkHrefs(matches, manifest, {
- includeHydrateFallback: true,
- })
+ : dedupe(
+ manifest.entry.imports.concat(
+ getModuleLinkHrefs(matches, manifest, {
+ includeHydrateFallback: true,
+ })
+ )
  );
 
+ let sri = typeof manifest.sri === "object" ? manifest.sri : {};
+
  return isHydrated ? null : (
  <>
+ {typeof manifest.sri === "object" ? (
+ <script
+ rr-importmap=""
+ type="importmap"
+ suppressHydrationWarning
+ dangerouslySetInnerHTML={{
+ __html: JSON.stringify({
+ integrity: sri,
+ }),
+ }}
+ />
+ ) : null}
  {!enableFogOfWar ? (
  <link
  rel="modulepreload"
  href={manifest.url}
  crossOrigin={props.crossOrigin}
+ integrity={sri[manifest.url]}
+ suppressHydrationWarning
  />
  ) : null}
  <link
  rel="modulepreload"
  href={manifest.entry.module}
  crossOrigin={props.crossOrigin}
+ integrity={sri[manifest.entry.module]}
+ suppressHydrationWarning
  />
- {dedupe(preloads).map((path) => (
+ {preloads.map((path) => (
  <link
  key={path}
  rel="modulepreload"
  href={path}
  crossOrigin={props.crossOrigin}
+ integrity={sri[path]}
+ suppressHydrationWarning
  />
  ))}
  {initialScripts}

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

@@ -42,6 +42,7 @@ export interface EntryContext extends FrameworkContextObject {
 }
 
 export interface FutureConfig {
+ unstable_subResourceIntegrity: boolean;
  unstable_middleware: boolean;
 }
 
@@ -59,4 +60,5 @@ export interface AssetsManifest {
  timestamp?: number;
  runtime: string;
  };
+ sri?: Record<string, string> | true;
 }

packages/react-router/lib/dom/ssr/fog-of-war.ts

@@ -31,7 +31,7 @@ export function isFogOfWarEnabled(ssr: boolean) {
 }
 
 export function getPartialManifest(
- manifest: AssetsManifest,
+ { sri, ...manifest }: AssetsManifest,
  router: DataRouter
 ) {
  // Start with our matches for this pathname
@@ -64,6 +64,7 @@ export function getPartialManifest(
  return {
  ...manifest,
  routes: initialRoutes,
+ sri: sri ? true : undefined,
  };
 }
 

packages/react-router/lib/dom/ssr/routes-test-stub.tsx

@@ -100,6 +100,7 @@ export function createRoutesStub(
  if (routerRef.current == null) {
  remixContextRef.current = {
  future: {
+ unstable_subResourceIntegrity: future?.unstable_subResourceIntegrity === true,
  unstable_middleware: future?.unstable_middleware === true,
  },
  manifest: {

playground/framework/app/root.tsx

@@ -1,15 +1,35 @@
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import {
+ Link,
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from "react-router";
 
 export function Layout({ children }: { children: React.ReactNode }) {
  return (
  <html lang="en">
  <head>
  <meta charSet="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
  <Meta />
  <Links />
  </head>
  <body>
+ <ul>
+ <li>
+ <Link prefetch="intent" to="/">
+ Home
+ </Link>
+ </li>
+ <li>
+ <Link prefetch="intent" to="/products/abc">
+ Product
+ </Link>
+ </li>
+ </ul>
  {children}
  <ScrollRestoration />
  <Scripts />

playground/framework/react-router.config.ts

@@ -1,3 +1,7 @@
 import type { Config } from "@react-router/dev/config";
 
-export default {} satisfies Config;
+export default {
+ future: {
+ unstable_subResourceIntegrity: true,
+ },
+} satisfies Config;