fix(middleware): do some stuff to avoid weird bugs on Vercel

fix: avoid Promise.all.
- await manifest, cspbuilder and config and run finalize sequentially

fix: avoid module-level cache variable for global cache

- cache within memoize function scope
- on Vercel, sometimes a manifest of a different deployment got inserted!

Author: nibtime

packages/next-safe-middleware/src/middleware/compose/cache.ts

@@ -1,34 +1,30 @@
 import type { ChainFinalizer, MiddlewareChainContext } from "./types";
 
-export const memoizeInChainCache =
-  <Args extends any[], T>(
-    key: string,
-    f: (ctx: MiddlewareChainContext, ...args: Args) => T | Promise<T>
-  ) =>
-  (ctx: MiddlewareChainContext) =>
-  async (...args: Args) => {
+export const memoizeInChain =
+  <Args extends any[], T>(key: string, f: (...args: Args) => T | Promise<T>) =>
+  (...args: Args) =>
+  async (ctx: MiddlewareChainContext) => {
     const cached = ctx.cache.get(key) as T;
     if (cached) {
       return cached;
     }
-    const fetched = await f(ctx, ...args);
+    const fetched = await f(...args);
     ctx.cache.set(key, fetched);
-    return fetched;
+    return ctx.cache.get(key) as T;
   };
 
-const globalCache = {};
-
-export const memoizeInGlobalCache =
-  <Args extends any[], T>(key: string, f: (...args: Args) => T | Promise<T>) =>
-  async (...args: Parameters<typeof f>) => {
-    const cached = globalCache[key] as T;
-    if (cached) {
-      return cached;
+export const memoize = <Args extends any[], T>(
+  f: (...args: Args) => T | Promise<T>
+) => {
+  let memoized: T;
+  return async (...args: Parameters<typeof f>) => {
+    if (memoized) {
+      return memoized;
     }
-    const fetched = await f(...args);
-    globalCache[key] = fetched;
-    return fetched;
+    memoized = await f(...args);
+    return memoized;
   };
+};
 
 export const memoizeResponseHeader = <T>(
   header: string,

packages/next-safe-middleware/src/middleware/nextSafe.ts

@@ -99,10 +99,9 @@ const nextSafe = _nextSafe as unknown as typeof _nextSafe.nextSafe;
 
 const _nextSafeMiddleware: MiddlewareBuilder<NextSafeCfg> = (cfg) =>
   chainableMiddleware(async (req, evt, ctx) => {
-    const [cspBuilder, config] = await Promise.all([
-      cachedCspBuilder(ctx),
-      unpackConfig(cfg, req, evt, ctx),
-    ]);
+    const cspBuilder = await cachedCspBuilder(ctx);
+    const config = await unpackConfig(cfg, req, evt, ctx);
+    
     const { disableCsp, userAgent, ...nextSafeCfg } = config;
     const isNoCspSecurityHeader = (header) =>
       !header.key.toLowerCase().includes(CSP_HEADER) &&

packages/next-safe-middleware/src/middleware/reporting.ts

@@ -99,7 +99,7 @@ const withBasePath = (reportTo: ReportTo[], basePath?: string) => {
 
 const _reporting: MiddlewareBuilder<ReportingCfg> = (cfg) =>
   chainableMiddleware(async (req, evt, ctx) => {
-    const [config] = await Promise.all([unpackConfig(cfg, req, evt, ctx)]);
+    const config = await unpackConfig(cfg, req, evt, ctx);
     const { reportTo = [], csp: cspCfg } = config;
 
     const { basePath } = req.nextUrl;

packages/next-safe-middleware/src/middleware/strictDynamic.ts

@@ -80,11 +80,9 @@ export type StrictDynamicCfg = {
 
 const _strictDynamic: MiddlewareBuilder<StrictDynamicCfg> = (cfg) =>
   chainableMiddleware(async (req, evt, ctx) => {
-    const [cspManifest, cspBuilder, config] = await Promise.all([
-      cachedCspManifest(req),
-      cachedCspBuilder(ctx),
-      unpackConfig(cfg, req, evt, ctx),
-    ]);
+    const cspManifest = await cachedCspManifest(req)
+    const cspBuilder = await cachedCspBuilder(ctx)
+    const config = await unpackConfig(cfg, req, evt, ctx)
 
     const {
       fallbackScriptSrc,

packages/next-safe-middleware/src/middleware/strictInlineStyles.ts

@@ -7,10 +7,9 @@ export type StrictInlineStylesCfg = {};
 
 const _strictInlineStyles: MiddlewareBuilder<StrictInlineStylesCfg> = (cfg) =>
   chainableMiddleware(async (req, evt, ctx) => {
-    const [cspManifest, cspBuilder] = await Promise.all([
-      cachedCspManifest(req),
-      cachedCspBuilder(ctx),
-    ]);
+    const cspManifest = await cachedCspManifest(req);
+    const cspBuilder = await cachedCspBuilder(ctx);
+
     if (!cspManifest) {
       return;
     }

packages/next-safe-middleware/src/middleware/utils.ts

@@ -9,7 +9,8 @@ import {
   CSP_MANIFEST_FILENAME,
 } from "../constants";
 import type { CspManifest } from "../types";
-import { memoizeInChainCache, memoizeInGlobalCache } from "./compose";
+import { memoize, memoizeInChain } from "./compose";
+
 
 const cspBuilderFromCtx = (ctx: MiddlewareChainContext): CspBuilder => {
   const headers = ctx.res.get().headers;
@@ -26,22 +27,21 @@ const cspBuilderFromCtx = (ctx: MiddlewareChainContext): CspBuilder => {
   return new CspBuilder();
 };
 
-const memoizedCspBuilder = memoizeInChainCache(
-  "csp-builder",
-  cspBuilderFromCtx
-);
+const memoizedCspBuilder = memoizeInChain("csp-builder", cspBuilderFromCtx);
 
 const builderToResponse: ChainFinalizer = async (_req, _evt, ctx) => {
-  const builder = await memoizedCspBuilder(ctx)();
-  const headers = ctx.res.get().headers;
-  headers.delete(CSP_HEADER);
-  headers.delete(CSP_HEADER_REPORT_ONLY);
-  headers.set(...builder.toHeaderKeyValue());
+  const builder = ctx.cache.get("csp-builder") as CspBuilder;
+  if (!builder.isEmpty()) {
+    const headers = ctx.res.get().headers;
+    headers.delete(CSP_HEADER);
+    headers.delete(CSP_HEADER_REPORT_ONLY);
+    headers.set(...builder.toHeaderKeyValue());
+  }
 };
 
 export const cachedCspBuilder = async (ctx: MiddlewareChainContext) => {
   ctx.finalize.addCallback(builderToResponse);
-  return memoizedCspBuilder(ctx)();
+  return memoizedCspBuilder(ctx)(ctx);
 };
 
 const fetchCspManifest = async (req: NextRequest): Promise<CspManifest> => {
@@ -71,7 +71,4 @@ const fetchCspManifestWithRetry = (
     { retries }
   );
 
-export const cachedCspManifest = memoizeInGlobalCache(
-  "csp-manifest",
-  fetchCspManifestWithRetry
-);
+export const cachedCspManifest = memoize(fetchCspManifestWithRetry);