@reckona/mreact-router 0.0.96 → 0.0.98

package/src/render.ts

@@ -1124,6 +1124,13 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
           vitePlugins: options.vitePlugins,
         });
         html = injectHeadMetadata(html, metadata);
+        warnIfCspNonceWouldBlockInlineTags({
+          html,
+          logger: options.logger,
+          metadata,
+          request: options.request,
+          serverModuleCacheVersion: options.serverModuleCacheVersion,
+        });
         html = injectAuthSessionClaims(
           html,
           originalAnalysis.authIncludesClaims ? currentAuthClaims() : undefined,
@@ -1377,6 +1384,13 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
     finishRenderTimingPhase(timing, phaseStartedAt, "metadataMs");
     phaseStartedAt = renderTimingPhaseStartedAt(timing);
     html = injectHeadMetadata(html, metadata);
+    warnIfCspNonceWouldBlockInlineTags({
+      html,
+      logger: options.logger,
+      metadata,
+      request: options.request,
+      serverModuleCacheVersion: options.serverModuleCacheVersion,
+    });
     html = injectAuthSessionClaims(
       html,
       originalAnalysis.authIncludesClaims ? currentAuthClaims() : undefined,
@@ -2319,6 +2333,7 @@ export async function bundleMiddlewareModuleCode(options: {
     code: options.code,
     filename: options.file,
     platform: "node",
+    root: options.importPolicy?.projectRoot,
     plugins: [
       fileImportMetaUrlPlugin(),
       createAppRouterImportPolicyPlugin({
@@ -2525,7 +2540,7 @@ async function analyzeRouteSourceUncached(options: {
   serverSourceFiles?: ReadonlyMap<string, string> | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
 }): Promise<RouteSourceAnalysis> {
-  const routeCode = stripRouteModuleExports(options.code);
+  const routeCode = stripRouteModuleExports(options.code, options.filename);
   const clientInference = await inferClientRouteModule({
     appDir: options.appDir,
     cache: options.clientRouteInferenceCache,
@@ -3464,7 +3479,7 @@ async function renderShellPrefixSuffix(
       ? { client: false, clientBoundaryImports: [], diagnostics: [] }
       : await inferClientRouteModule({
           cache: clientRouteInferenceCache,
-          code: stripRouteClientOnlyExports(code),
+          code: stripRouteClientOnlyExports(code, shell.file),
           filename: shell.file,
           vitePlugins,
         });
@@ -3967,7 +3982,7 @@ export async function bundleRouteLoaderModuleCode(options: {
   vitePlugins?: readonly PluginOption[] | undefined;
 }): Promise<string> {
   const output = await bundleRouterModule({
-    code: stripRouteLoaderOnlyExports(options.code),
+    code: stripRouteLoaderOnlyExports(options.code, options.filename),
     externalizeAppSourceModuleDirs: options.externalizeAppSourceModuleDirs,
     filename: options.filename,
     platform: "node",
@@ -4111,7 +4126,7 @@ async function bundleRouteMetadataModuleCode(options: {
   vitePlugins?: readonly PluginOption[] | undefined;
 }): Promise<string> {
   const output = await bundleRouterModule({
-    code: stripRouteMetadataOnlyExports(options.code),
+    code: stripRouteMetadataOnlyExports(options.code, options.filename),
     filename: options.filename,
     platform: "node",
     vitePlugins: options.vitePlugins,
@@ -4269,6 +4284,166 @@ function usesRuntimeCacheControl(code: string): boolean {
   return /\bcacheControl\s*\(/.test(code);
 }
 
+function warnIfCspNonceWouldBlockInlineTags(options: {
+  html: string;
+  logger: AppRouterLogger | undefined;
+  metadata: RouteMetadata | undefined;
+  request: Request;
+  serverModuleCacheVersion: string | undefined;
+}): void {
+  if (
+    options.serverModuleCacheVersion !== undefined ||
+    process.env.NODE_ENV === "production" ||
+    options.metadata?.csp?.disable === true ||
+    options.metadata?.csp?.directives === undefined ||
+    !/<(?:script|style)\b/i.test(options.html)
+  ) {
+    return;
+  }
+
+  const scriptNonces = cspDirectiveNonces(options.metadata.csp, "script-src");
+  const styleNonces = cspDirectiveNonces(options.metadata.csp, "style-src");
+
+  if (scriptNonces.size === 0 && styleNonces.size === 0) {
+    return;
+  }
+
+  for (const tag of inlineCspTags(options.html)) {
+    if (tag.name === "script") {
+      if (
+        scriptNonces.size > 0 &&
+        !scriptHasExternalSourceOrInertType(tag.attributes) &&
+        tag.content.trim() !== "" &&
+        !tagHasMatchingNonce(tag.attributes, scriptNonces)
+      ) {
+        warnCspInlineNonceMismatch(options, "script-src", "script");
+      }
+      continue;
+    }
+
+    if (
+      styleNonces.size > 0 &&
+      tag.content.trim() !== "" &&
+      !tagHasMatchingNonce(tag.attributes, styleNonces)
+    ) {
+      warnCspInlineNonceMismatch(options, "style-src", "style");
+    }
+  }
+}
+
+function warnCspInlineNonceMismatch(
+  options: {
+    logger: AppRouterLogger | undefined;
+    request: Request;
+  },
+  directive: "script-src" | "style-src",
+  tag: "script" | "style",
+): void {
+  const message =
+    tag === "script"
+      ? "mreact router: CSP script-src uses a nonce, but an inline <script> without a matching nonce will be blocked. Add the script through metadata.head with nonce: true, move it to an external script, or remove script-src for this route."
+      : "mreact router: CSP style-src uses a nonce, but an inline <style> without a matching nonce will be blocked. Add the style through metadata.head with nonce: true, move it to an external stylesheet, or remove style-src for this route.";
+
+  if (options.logger === undefined) {
+    console.warn(message);
+    return;
+  }
+
+  emitRouterLog(options.logger, "warn", {
+    directive,
+    path: new URL(options.request.url).pathname,
+    tag,
+    type: "router:csp:inline-nonce-warning",
+  });
+}
+
+function cspDirectiveNonces(
+  csp: NonNullable<RouteMetadata["csp"]>,
+  directive: "script-src" | "style-src",
+): ReadonlySet<string> {
+  const values = csp.directives?.[directive];
+  const nonces = new Set<string>();
+
+  if (values !== undefined && csp.nonce !== undefined) {
+    nonces.add(csp.nonce);
+  }
+
+  for (const value of Array.isArray(values) ? values : values === undefined ? [] : [values]) {
+    const match = /^'nonce-([^']+)'$/.exec(value);
+
+    if (match?.[1] !== undefined) {
+      nonces.add(match[1]);
+    }
+  }
+
+  return nonces;
+}
+
+interface InlineCspTag {
+  attributes: ReadonlyMap<string, string>;
+  content: string;
+  name: "script" | "style";
+}
+
+function inlineCspTags(html: string): InlineCspTag[] {
+  const tags: InlineCspTag[] = [];
+  const pattern = /<(script|style)\b([^>]*)>([\s\S]*?)<\/\1>/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(html)) !== null) {
+    const name = match[1]?.toLowerCase();
+
+    if (name !== "script" && name !== "style") {
+      continue;
+    }
+
+    tags.push({
+      attributes: parseTagAttributes(match[2] ?? ""),
+      content: match[3] ?? "",
+      name,
+    });
+  }
+
+  return tags;
+}
+
+function parseTagAttributes(source: string): ReadonlyMap<string, string> {
+  const attributes = new Map<string, string>();
+  const pattern = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(source)) !== null) {
+    const name = match[1]?.toLowerCase();
+
+    if (name === undefined) {
+      continue;
+    }
+
+    attributes.set(name, match[2] ?? match[3] ?? match[4] ?? "");
+  }
+
+  return attributes;
+}
+
+function scriptHasExternalSourceOrInertType(attributes: ReadonlyMap<string, string>): boolean {
+  if (attributes.has("src")) {
+    return true;
+  }
+
+  const type = attributes.get("type")?.trim().toLowerCase();
+
+  return type === "application/json" || type === "application/ld+json";
+}
+
+function tagHasMatchingNonce(
+  attributes: ReadonlyMap<string, string>,
+  expectedNonces: ReadonlySet<string>,
+): boolean {
+  const nonce = attributes.get("nonce");
+
+  return nonce !== undefined && expectedNonces.has(nonce);
+}
+
 function injectQueryState(html: string, state: DehydratedQueryClient): string {
   if (state.queries.length === 0) {
     return html;
@@ -4279,7 +4454,7 @@ function injectQueryState(html: string, state: DehydratedQueryClient): string {
   )}</script>`;
 
   return /<\/body>/i.test(html)
-    ? html.replace(/<\/body>/i, `${script}</body>`)
+    ? html.replace(/<\/body>/i, () => `${script}</body>`)
     : `${html}${script}`;
 }
 
@@ -4293,7 +4468,7 @@ function injectAuthSessionClaims(html: string, claims: unknown): string {
   )}</script>`;
 
   return /<\/body>/i.test(html)
-    ? html.replace(/<\/body>/i, `${script}</body>`)
+    ? html.replace(/<\/body>/i, () => `${script}</body>`)
     : `${html}${script}`;
 }
 

package/src/route-source.ts

@@ -37,21 +37,26 @@ const routeRequestExportNames = new Set<string>([
 const routeLoaderOnlyExportNames = new Set<string>(["loader"]);
 const routeMetadataOnlyExportNames = new Set<string>(["generateMetadata", "metadata"]);
 
-export function stripRouteModuleExports(code: string): string {
+export function stripRouteModuleExports(code: string, filename?: string | undefined): string {
   return demoteRouteHelperExports(stripTopLevelExportDeclarations({
     code,
+    filename,
     names: routeModuleExportNames,
-  }));
+  }), routeRenderExportNames, filename);
 }
 
-export function stripRouteClientOnlyExports(code: string): string {
+export function stripRouteClientOnlyExports(code: string, filename?: string | undefined): string {
   return stripUnusedStaticValueImports({
     code: demoteRouteHelperExports(
       stripTopLevelExportDeclarations({
         code,
+        filename,
         names: routeClientOnlyExportNames,
       }),
+      routeRenderExportNames,
+      filename,
     ),
+    filename,
   });
 }
 
@@ -60,7 +65,7 @@ export function stripRouteClientSource(input: {
   filename?: string | undefined;
 }): string {
   return stripRouteClientFormActionExpressions({
-    code: stripRouteClientOnlyExports(input.code),
+    code: stripRouteClientOnlyExports(input.code, input.filename),
     filename: input.filename,
   });
 }
@@ -79,49 +84,56 @@ export function stripRouteClientFormActionExpressions(input: {
   return code;
 }
 
-export function stripRouteBuildExports(code: string): string {
-  return stripRouteClientOnlyExports(code);
+export function stripRouteBuildExports(code: string, filename?: string | undefined): string {
+  return stripRouteClientOnlyExports(code, filename);
 }
 
-export function stripRouteRequestOnlyExports(code: string): string {
+export function stripRouteRequestOnlyExports(code: string, filename?: string | undefined): string {
   return demoteRouteHelperExports(
     stripTopLevelExportDeclarations({
       code,
+      filename,
       names: routeRequestRenderExportNames,
     }),
     routeRequestExportNames,
+    filename,
   );
 }
 
-export function stripRouteLoaderOnlyExports(code: string): string {
+export function stripRouteLoaderOnlyExports(code: string, filename?: string | undefined): string {
   return demoteRouteHelperExports(
     stripTopLevelExportDeclarations({
       code,
+      filename,
       names: ["auth", "default", "generateMetadata", "generateStaticParams", "metadata", "middleware", "prerender", "revalidate", "slots", "stream"],
     }),
     routeLoaderOnlyExportNames,
+    filename,
   );
 }
 
-export function stripRouteMetadataOnlyExports(code: string): string {
+export function stripRouteMetadataOnlyExports(code: string, filename?: string | undefined): string {
   return demoteRouteHelperExports(
     stripTopLevelExportDeclarations({
       code,
+      filename,
       names: ["auth", "default", "generateStaticParams", "loader", "middleware", "prerender", "revalidate", "slots", "stream"],
     }),
     routeMetadataOnlyExportNames,
+    filename,
   );
 }
 
-export function stripRouteConfigExports(code: string): string {
+export function stripRouteConfigExports(code: string, filename?: string | undefined): string {
   return stripTopLevelExportDeclarations({
     code,
+    filename,
     names: ["auth", "prerender", "revalidate", "stream"],
   });
 }
 
-export function isStreamRouteSource(code: string): boolean {
-  return hasTopLevelExportDeclaration({ code, names: ["stream"] });
+export function isStreamRouteSource(code: string, filename?: string | undefined): boolean {
+  return hasTopLevelExportDeclaration({ code, filename, names: ["stream"] });
 }
 
 export function mayUseAwaitBoundarySource(code: string): boolean {
@@ -194,28 +206,29 @@ export function routeClosureMayUseAwaitBoundary(options: {
   }
 }
 
-export function hasPrerenderExport(code: string): boolean {
-  return hasTopLevelExportDeclaration({ code, names: ["prerender"] });
+export function hasPrerenderExport(code: string, filename?: string | undefined): boolean {
+  return hasTopLevelExportDeclaration({ code, filename, names: ["prerender"] });
 }
 
-export function hasGenerateStaticParamsExport(code: string): boolean {
-  return hasTopLevelExportDeclaration({ code, names: ["generateStaticParams"] });
+export function hasGenerateStaticParamsExport(code: string, filename?: string | undefined): boolean {
+  return hasTopLevelExportDeclaration({ code, filename, names: ["generateStaticParams"] });
 }
 
-export function hasLoaderExport(code: string): boolean {
-  return hasTopLevelExportDeclaration({ code, names: ["loader"] });
+export function hasLoaderExport(code: string, filename?: string | undefined): boolean {
+  return hasTopLevelExportDeclaration({ code, filename, names: ["loader"] });
 }
 
 function demoteRouteHelperExports(
   code: string,
   preservedExportNames: ReadonlySet<string> = routeRenderExportNames,
+  filename?: string | undefined,
 ): string {
-  const helperNames = collectTopLevelValueExportNames({ code })
+  const helperNames = collectTopLevelValueExportNames({ code, filename })
     .filter((name) => !preservedExportNames.has(name) && startsLowercase(name));
 
   return helperNames.length === 0
     ? code
-    : demoteTopLevelExportDeclarations({ code, names: helperNames });
+    : demoteTopLevelExportDeclarations({ code, filename, names: helperNames });
 }
 
 function startsLowercase(value: string): boolean {

package/src/route-styles.ts

@@ -7,6 +7,18 @@ export async function collectRouteCssFiles(options: {
   appDir: string;
   pageFile: string;
   projectRoot: string;
+}): Promise<string[]> {
+  return await collectRouteCssFilesFromSources({
+    ...options,
+    readSource: (file) => readFile(file, "utf8"),
+  });
+}
+
+export async function collectRouteCssFilesFromSources(options: {
+  appDir: string;
+  pageFile: string;
+  projectRoot: string;
+  readSource: (file: string) => Promise<string | undefined> | string | undefined;
 }): Promise<string[]> {
   const shellFiles = (await existingRouteShellCandidates(options.appDir, options.pageFile, isFile))
     .map((candidate) => candidate.file);
@@ -15,7 +27,11 @@ export async function collectRouteCssFiles(options: {
   const cssFiles: string[] = [];
 
   for (const file of files) {
-    const source = await readFile(file, "utf8");
+    const source = await options.readSource(file);
+
+    if (source === undefined) {
+      continue;
+    }
 
     for (const reference of collectStaticImportReferences({ code: source, filename: file })) {
       const cssFile = resolveCssImport({

package/src/serve.ts

@@ -82,7 +82,7 @@ interface BuiltRuntimeCacheEntry {
 }
 
 const builtRuntimeCache = new Map<string, BuiltRuntimeCacheEntry>();
-const builtPublicAssetCache = new Map<string, BuiltPublicAsset | null>();
+const builtPublicAssetCache = new Map<string, BuiltPublicAsset>();
 
 interface BuiltPublicAsset {
   bytes: Uint8Array;
@@ -681,10 +681,6 @@ async function readBuiltPublicAsset(
     const cacheKey = `${outDir}\0${normalized}`;
     const cached = builtPublicAssetCache.get(cacheKey);
 
-    if (cached === null) {
-      return undefined;
-    }
-
     if (cached !== undefined) {
       return bytesResponse(cached.bytes, {
         headers: cached.headers,
@@ -701,11 +697,20 @@ async function readBuiltPublicAsset(
 
     return bytesResponse(bytes, { headers });
   } catch {
-    builtPublicAssetCache.set(`${outDir}\0${normalized}`, null);
     return undefined;
   }
 }
 
+export const __readBuiltPublicAssetForTest = readBuiltPublicAsset;
+
+export function __clearBuiltPublicAssetCacheForTest(): void {
+  builtPublicAssetCache.clear();
+}
+
+export function __getBuiltPublicAssetCacheSizeForTest(): number {
+  return builtPublicAssetCache.size;
+}
+
 async function readBuiltRuntime(options: {
   immutable?: boolean | undefined;
   outDir: string;

package/src/vite.ts

@@ -176,7 +176,7 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
     enforce: "pre",
     name: "mreact-router",
     config(userConfig) {
-      userVitePlugins = userConfig.plugins;
+      userVitePlugins = routeTransformUserVitePlugins(userConfig.plugins);
 
       return {
         optimizeDeps: {
@@ -197,7 +197,7 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
       return () => {
         const middlewareOptions: AppRouterViteRuntimeMiddlewareOptions = {
           ...options,
-          navigationScanVitePlugins: userVitePlugins,
+          navigationScanVitePlugins: userVitePlugins ?? [],
           viteDevServer: server,
           vitePlugins: server.config.plugins,
         };
@@ -370,6 +370,40 @@ function isCompatSourcePath(filename: string): boolean {
 
 export const mreactRouter = createAppRouterVitePlugin;
 
+function routeTransformUserVitePlugins(
+  pluginOptions: readonly PluginOption[] | undefined,
+): PluginOption[] {
+  const plugins: PluginOption[] = [];
+  const visit = (option: PluginOption | null | false | undefined): void => {
+    if (option === false || option === null || option === undefined) {
+      return;
+    }
+
+    if (Array.isArray(option)) {
+      for (const child of option) {
+        visit(child);
+      }
+      return;
+    }
+
+    if (typeof option === "object" && "then" in option) {
+      return;
+    }
+
+    if (typeof option === "object" && mreactRouterConfigKey in option) {
+      return;
+    }
+
+    plugins.push(option);
+  };
+
+  for (const option of pluginOptions ?? []) {
+    visit(option);
+  }
+
+  return plugins;
+}
+
 export function mreactRouterConfigFromPlugins(
   plugins: readonly unknown[],
 ): ResolvedAppRouterProject | undefined {
@@ -450,6 +484,7 @@ async function handleAppRouterViteRequest(
     }
 
     const request = nodeRequestToWebRequest(incoming, origin);
+    const routeTransformPlugins = options.navigationScanVitePlugins ?? options.vitePlugins;
 
     await sendResponse(
       outgoing,
@@ -464,11 +499,12 @@ async function handleAppRouterViteRequest(
         navigationScripts: await devNavigationScripts(
           project.routesDir,
           options.clientRouteInferenceCache,
-          options.navigationScanVitePlugins,
+          routeTransformPlugins,
         ),
         request,
         routeCache: options.routeCache,
         serverActions: options.serverActions,
+        vitePlugins: routeTransformPlugins,
       }),
     );
   } catch (error) {
@@ -501,7 +537,7 @@ export async function renderAppRouterClientAsset(
   }
 
   const code = await readFile(route.file, "utf8");
-  const clientSource = stripRouteClientOnlyExports(code);
+  const clientSource = stripRouteClientOnlyExports(code, route.file);
   let references: Awaited<ReturnType<typeof collectClientRouteReferences>>;
 
   try {
@@ -565,7 +601,7 @@ async function renderAppRouterClientRouteDevModule(
   }
 
   const code = await readFile(route.file, "utf8");
-  const clientSource = stripRouteClientOnlyExports(code);
+  const clientSource = stripRouteClientOnlyExports(code, route.file);
   const references = await collectClientRouteReferences({
     appDir,
     code: clientSource,