@reckona/mreact-router 0.0.97 → 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({
@@ -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

@@ -132,8 +132,8 @@ export function stripRouteConfigExports(code: string, filename?: string | undefi
   });
 }
 
-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 {
@@ -206,16 +206,16 @@ 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(

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;