Add support for skew protection

Author: vicb

examples/playground14/wrangler.jsonc

@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/wrangler/config-schema.json",
   "main": "worker.ts",
-  "name": "api",
+  "name": "playground14",
   "compatibility_date": "2024-12-30",
   "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
   "assets": {

examples/playground15/next.config.mjs

@@ -1,4 +1,4 @@
-import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
+import { initOpenNextCloudflareForDev, getDeploymentId } from "@opennextjs/cloudflare";
 
 initOpenNextCloudflareForDev();
 
@@ -10,6 +10,7 @@ const nextConfig = {
     // Generate source map to validate the fix for opennextjs/opennextjs-cloudflare#341
     serverSourceMaps: true,
   },
+  deploymentId: getDeploymentId(),
 };
 
 export default nextConfig;

examples/playground15/open-next.config.ts

@@ -1,7 +1,11 @@
-import { defineCloudflareConfig } from "@opennextjs/cloudflare";
-import kvIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/kv-incremental-cache";
+import { defineCloudflareConfig, type OpenNextConfig } from "@opennextjs/cloudflare";
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
 
-export default defineCloudflareConfig({
-  incrementalCache: kvIncrementalCache,
-  enableCacheInterception: true,
-});
+export default {
+  ...defineCloudflareConfig({
+    incrementalCache: r2IncrementalCache,
+  }),
+  cloudflare: {
+    skewProtectionEnabled: true,
+  },
+} satisfies OpenNextConfig;

examples/playground15/package.json

@@ -16,7 +16,7 @@
     "cf-typegen": "wrangler types --env-interface CloudflareEnv"
   },
   "dependencies": {
-    "next": "^15.1.7",
+    "next": "^15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

examples/playground15/wrangler.jsonc

@@ -1,17 +1,17 @@
 {
   "$schema": "node_modules/wrangler/config-schema.json",
   "main": ".open-next/worker.js",
-  "name": "api",
+  "name": "playground15",
   "compatibility_date": "2024-12-30",
   "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
   "assets": {
     "directory": ".open-next/assets",
     "binding": "ASSETS"
   },
-  "kv_namespaces": [
+  "r2_buckets": [
     {
-      "binding": "NEXT_INC_CACHE_KV",
-      "id": "<BINDING_ID>"
+      "binding": "NEXT_INC_CACHE_R2_BUCKET",
+      "bucket_name": "pg15"
     }
   ],
   "vars": {

packages/cloudflare/package.json

@@ -65,6 +65,7 @@
     "@types/mock-fs": "catalog:",
     "@types/node": "catalog:",
     "@types/picomatch": "^4.0.0",
+    "cloudflare": "^4.4.1",
     "diff": "^8.0.2",
     "esbuild": "catalog:",
     "eslint": "catalog:",

packages/cloudflare/src/api/cloudflare-context.ts

@@ -65,6 +65,16 @@ declare global {
     CACHE_PURGE_ZONE_ID?: string;
     // The API token to use for the cache purge. It should have the `Cache Purge` permission
     CACHE_PURGE_API_TOKEN?: string;
+
+    // The following variables must be provided when skew protection is enabled
+    // The name of the worker (as defined in the wrangler configuration)
+    CF_WORKER_NAME?: string;
+    // The subdomain where the previews are deployed, i.e. `<version-name>.<domain>.workers.dev`
+    CF_PREVIEW_DOMAIN?: string;
+    // Should have the `Workers Scripts:Read` permission
+    CF_WORKERS_SCRIPTS_API_TOKEN?: string;
+    // Cloudflare account id
+    CF_ACCOUNT_ID?: string;
   }
 }
 

packages/cloudflare/src/api/config.ts

@@ -158,6 +158,15 @@ interface OpenNextConfig extends AwsOpenNextConfig {
      * @default false
      */
     dangerousDisableConfigValidation?: boolean;
+
+    /**
+     * Enable skew protection.
+     *
+     * Note: Skew Protection is experimental and might break on minor releases.
+     *
+     * @default false
+     */
+    skewProtectionEnabled?: boolean;
   };
 }
 
@@ -169,4 +178,11 @@ export function getOpenNextConfig(buildOpts: BuildOptions): OpenNextConfig {
   return buildOpts.config;
 }
 
+/**
+ * @returns Unique deployment ID
+ */
+export function getDeploymentId(): string {
+  return `dpl-${new Date().getTime().toString(36)}`;
+}
+
 export type { OpenNextConfig };

packages/cloudflare/src/api/index.ts

@@ -1,2 +1,2 @@
 export * from "./cloudflare-context.js";
-export { defineCloudflareConfig, type OpenNextConfig } from "./config.js";
+export { defineCloudflareConfig, getDeploymentId, type OpenNextConfig } from "./config.js";

packages/cloudflare/src/cli/build/build.ts

@@ -13,6 +13,7 @@ import { compileCacheAssetsManifestSqlFile } from "./open-next/compile-cache-ass
 import { compileEnvFiles } from "./open-next/compile-env-files.js";
 import { compileImages } from "./open-next/compile-images.js";
 import { compileInit } from "./open-next/compile-init.js";
+import { compileSkewProtection } from "./open-next/compile-skew-protection.js";
 import { compileDurableObjects } from "./open-next/compileDurableObjects.js";
 import { createServerBundle } from "./open-next/createServerBundle.js";
 import { createWranglerConfigIfNotExistent } from "./utils/index.js";
@@ -58,17 +59,11 @@ export async function build(
   printHeader("Generating bundle");
   buildHelper.initOutputDir(options);
 
-  // Compile cache.ts
   compileCache(options);
-
-  // Compile .env files
   compileEnvFiles(options);
-
-  // Compile workerd init
   compileInit(options);
-
-  // Compile image helpers
   compileImages(options);
+  compileSkewProtection(options, config);
 
   // Compile middleware
   await createMiddleware(options, { forceOnlyBuildOnce: true });

packages/cloudflare/src/cli/build/open-next/compile-init.ts

@@ -15,6 +15,7 @@ export async function compileInit(options: BuildOptions) {
 
   const nextConfig = loadConfig(path.join(options.appBuildOutputPath, ".next"));
   const basePath = nextConfig.basePath ?? "";
+  const deploymentId = nextConfig.deploymentId ?? "";
 
   await build({
     entryPoints: [initPath],
@@ -27,6 +28,7 @@ export async function compileInit(options: BuildOptions) {
     define: {
       __BUILD_TIMESTAMP_MS__: JSON.stringify(Date.now()),
       __NEXT_BASE_PATH__: JSON.stringify(basePath),
+      __DEPLOYMENT_ID__: JSON.stringify(deploymentId),
     },
   });
 }

packages/cloudflare/src/cli/build/open-next/compile-skew-protection.ts

@@ -0,0 +1,26 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import { build } from "esbuild";
+
+import type { OpenNextConfig } from "../../../api";
+
+export async function compileSkewProtection(options: BuildOptions, config: OpenNextConfig) {
+  const currentDir = path.join(path.dirname(fileURLToPath(import.meta.url)));
+  const templatesDir = path.join(currentDir, "../../templates");
+  const initPath = path.join(templatesDir, "skew-protection.js");
+
+  await build({
+    entryPoints: [initPath],
+    outdir: path.join(options.outputDir, "cloudflare"),
+    bundle: false,
+    minify: false,
+    format: "esm",
+    target: "esnext",
+    platform: "node",
+    define: {
+      __SKEW_PROTECTION_ENABLED__: JSON.stringify(config.cloudflare?.skewProtectionEnabled ?? false),
+    },
+  });
+}

packages/cloudflare/src/cli/commands/deploy.ts

@@ -1,19 +1,41 @@
 import { BuildOptions } from "@opennextjs/aws/build/helper.js";
 
 import type { OpenNextConfig } from "../../api/config.js";
+import { DEPLOYMENT_MAPPING_ENV_NAME } from "../templates/skew-protection.js";
 import { getWranglerEnvironmentFlag, runWrangler } from "../utils/run-wrangler.js";
+import { getEnvFromPlatformProxy, quoteShellMeta } from "./helpers.js";
 import { populateCache } from "./populate-cache.js";
+import { getDeploymentMapping } from "./skew-protection.js";
 
 export async function deploy(
   options: BuildOptions,
   config: OpenNextConfig,
   deployOptions: { passthroughArgs: string[]; cacheChunkSize?: number }
 ) {
+  const envVars = await getEnvFromPlatformProxy({
+    // TODO: Pass the configPath, update everywhere applicable
+    environment: getWranglerEnvironmentFlag(deployOptions.passthroughArgs),
+  });
+
+  const deploymentMapping = await getDeploymentMapping(options, config, envVars);
+
   await populateCache(options, config, {
     target: "remote",
     environment: getWranglerEnvironmentFlag(deployOptions.passthroughArgs),
     cacheChunkSize: deployOptions.cacheChunkSize,
   });
 
-  runWrangler(options, ["deploy", ...deployOptions.passthroughArgs], { logging: "all" });
+  runWrangler(
+    options,
+    [
+      "deploy",
+      ...deployOptions.passthroughArgs,
+      ...(deploymentMapping
+        ? [`--var ${DEPLOYMENT_MAPPING_ENV_NAME}:${quoteShellMeta(JSON.stringify(deploymentMapping))}`]
+        : []),
+    ],
+    {
+      logging: "all",
+    }
+  );
 }

packages/cloudflare/src/cli/commands/helpers.ts

@@ -0,0 +1,41 @@
+import { getPlatformProxy, type GetPlatformProxyOptions } from "wrangler";
+
+export type WorkerEnvVar = Record<keyof CloudflareEnv, string | undefined>;
+
+/**
+ * Return the string env vars from the worker.
+ *
+ * @param options Options to pass to `getPlatformProxy`, i.e. to set the environment
+ * @returns the env vars
+ */
+export async function getEnvFromPlatformProxy(options: GetPlatformProxyOptions) {
+  const envVars = {} as WorkerEnvVar;
+  const proxy = await getPlatformProxy<CloudflareEnv>(options);
+  Object.entries(proxy.env).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      envVars[key as keyof CloudflareEnv] = value;
+    }
+  });
+  await proxy.dispose();
+  return envVars;
+}
+
+/**
+ * Escape shell metacharacters.
+ *
+ * When `spawnSync` is invoked with `shell: true`, metacharacters need to be escaped.
+ *
+ * Based on https://github.com/ljharb/shell-quote/blob/main/quote.js
+ *
+ * @param arg
+ * @returns escaped arg
+ */
+export function quoteShellMeta(arg: string) {
+  if (/["\s]/.test(arg) && !/'/.test(arg)) {
+    return `'${arg.replace(/(['\\])/g, "\\$1")}'`;
+  }
+  if (/["'\s]/.test(arg)) {
+    return `"${arg.replace(/(["\\$`!])/g, "\\$1")}"`;
+  }
+  return arg.replace(/([A-Za-z]:)?([#!"$&'()*,:;<=>?@[\\\]^`{|}])/g, "$1\\$2");
+}

packages/cloudflare/src/cli/commands/populate-cache.ts

@@ -12,7 +12,7 @@ import type {
 import type { IncrementalCache, TagCache } from "@opennextjs/aws/types/overrides.js";
 import { globSync } from "glob";
 import { tqdm } from "ts-tqdm";
-import { getPlatformProxy, type GetPlatformProxyOptions, unstable_readConfig } from "wrangler";
+import { unstable_readConfig } from "wrangler";
 
 import {
   BINDING_NAME as KV_CACHE_BINDING_NAME,
@@ -36,6 +36,7 @@ import {
 import { normalizePath } from "../build/utils/normalize-path.js";
 import type { WranglerTarget } from "../utils/run-wrangler.js";
 import { runWrangler } from "../utils/run-wrangler.js";
+import { getEnvFromPlatformProxy, quoteShellMeta } from "./helpers.js";
 
 async function resolveCacheName(
   value:
@@ -93,13 +94,6 @@ export function getCacheAssets(opts: BuildOptions): CacheAsset[] {
   return assets;
 }
 
-async function getPlatformProxyEnv<T extends keyof CloudflareEnv>(options: GetPlatformProxyOptions, key: T) {
-  const proxy = await getPlatformProxy<CloudflareEnv>(options);
-  const prefix = proxy.env[key];
-  await proxy.dispose();
-  return prefix;
-}
-
 async function populateR2IncrementalCache(
   options: BuildOptions,
   populateCacheOptions: { target: WranglerTarget; environment?: string }
@@ -118,7 +112,8 @@ async function populateR2IncrementalCache(
     throw new Error(`R2 binding ${JSON.stringify(R2_CACHE_BINDING_NAME)} should have a 'bucket_name'`);
   }
 
-  const prefix = await getPlatformProxyEnv(populateCacheOptions, R2_CACHE_PREFIX_ENV_NAME);
+  const envVars = await getEnvFromPlatformProxy(populateCacheOptions);
+  const prefix = envVars[R2_CACHE_PREFIX_ENV_NAME];
 
   const assets = getCacheAssets(options);
 
@@ -156,7 +151,8 @@ async function populateKVIncrementalCache(
     throw new Error(`No KV binding ${JSON.stringify(KV_CACHE_BINDING_NAME)} found!`);
   }
 
-  const prefix = await getPlatformProxyEnv(populateCacheOptions, KV_CACHE_PREFIX_ENV_NAME);
+  const envVars = await getEnvFromPlatformProxy(populateCacheOptions);
+  const prefix = envVars[KV_CACHE_PREFIX_ENV_NAME];
 
   const assets = getCacheAssets(options);
 
@@ -270,23 +266,3 @@ export async function populateCache(
     }
   }
 }
-
-/**
- * Escape shell metacharacters.
- *
- * When `spawnSync` is invoked with `shell: true`, metacharacters need to be escaped.
- *
- * Based on https://github.com/ljharb/shell-quote/blob/main/quote.js
- *
- * @param arg
- * @returns escaped arg
- */
-function quoteShellMeta(arg: string) {
-  if (/["\s]/.test(arg) && !/'/.test(arg)) {
-    return `'${arg.replace(/(['\\])/g, "\\$1")}'`;
-  }
-  if (/["'\s]/.test(arg)) {
-    return `"${arg.replace(/(["\\$`!])/g, "\\$1")}"`;
-  }
-  return arg.replace(/([A-Za-z]:)?([#!"$&'()*,:;<=>?@[\\\]^`{|}])/g, "$1\\$2");
-}