Add support for skew protection

Author: vicb

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,5 +1,5 @@
-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,

packages/cloudflare/src/api/config.ts

@@ -169,4 +169,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";
@@ -69,6 +70,7 @@ export async function build(
 
 	// 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],

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,8 +1,11 @@
 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,

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: