feat(edge): allows configuring Dynamic code execution guard

docs/api-reference/edge-runtime.md

@@ -136,6 +136,25 @@ The following JavaScript language features are disabled, and **will not work:**
 
 - `eval`: Evaluates JavaScript code represented as a string
 - `new Function(evalString)`: Creates a new function with the code provided as an argument
+- `WebAssembly.compile`
+- `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code)
+
+In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking.
+You can relax the check to allow specific files with your Middleware or Edge API Route exported configuration:
+
+```javascript
+export const config = {
+  runtime: 'experimental-edge', // for Edge API Routes only
+  allowDynamic: [
+    '/lib/utilities.js', // allows a single file
+    '/node_modules/function-bind/**', // use a glob to allow anything in the function-bind 3rd party module
+  ],
+}
+```
+
+`allowDynamic` is a [glob](https://github.com/micromatch/micromatch#matching-features), or an array of globs, ignoring dynamic code evaluation for specific files. The globs are relative to your application root folder.
+
+Be warned that if these statements are executed on the Edge, _they will throw and cause a runtime error_.
 
 ## Related
 

errors/edge-dynamic-code-evaluation.md

@@ -0,0 +1,34 @@
+# Dynamic code evaluation is not available in Middlewares or Edge API Routes
+
+#### Why This Error Occurred
+
+`eval()`, `new Function()` or compiling WASM binaries dynamically is not allowed in Middlewares or Edge API Routes.
+Specifically, the following APIs are not supported:
+
+- `eval()`
+- `new Function()`
+- `WebAssembly.compile`
+- `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code)
+
+#### Possible Ways to Fix It
+
+You can bundle your WASM binaries using `import`:
+
+```typescript
+import { NextResponse } from 'next/server'
+import squareWasm from './square.wasm?module'
+
+export default async function middleware() {
+  const m = await WebAssembly.instantiate(squareWasm)
+  const answer = m.exports.square(9)
+
+  const response = NextResponse.next()
+  response.headers.set('x-square', answer.toString())
+  return response
+}
+```
+
+In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking.
+You can relax the check to allow specific files with your Middleware or Edge API Route exported [configuration](https://nextjs.org/docs/api-reference/edge-runtime#unsupported-apis).
+
+Be warned that if these statements are executed on the Edge, _they will throw and cause a runtime error_.

errors/manifest.json

@@ -714,6 +714,10 @@
           "title": "middleware-dynamic-wasm-compilation",
           "path": "/errors/middleware-dynamic-wasm-compilation.md"
         },
+        {
+          "title": "edge-dynamic-code-evaluation",
+          "path": "/errors/edge-dynamic-code-evaluation.md"
+        },
         {
           "title": "node-module-in-edge-runtime",
           "path": "/errors/node-module-in-edge-runtime.md"

errors/middleware-dynamic-wasm-compilation.md

@@ -19,8 +19,8 @@ import squareWasm from './square.wasm?module'
 export default async function middleware() {
   const m = await WebAssembly.instantiate(squareWasm)
   const answer = m.exports.square(9)
-
   const response = NextResponse.next()
+
   response.headers.set('x-square', answer.toString())
   return response
 }

packages/next/build/analysis/get-page-static-info.ts

@@ -12,9 +12,11 @@ import * as Log from '../output/log'
 import { SERVER_RUNTIME } from '../../lib/constants'
 import { ServerRuntime } from 'next/types'
 import { checkCustomRoutes } from '../../lib/load-custom-routes'
+import { matcher } from 'next/dist/compiled/micromatch'
 
 export interface MiddlewareConfig {
   matchers: MiddlewareMatcher[]
+  allowDynamicGlobs: string[]
 }
 
 export interface MiddlewareMatcher {
@@ -162,6 +164,7 @@ function getMiddlewareMatchers(
 }
 
 function getMiddlewareConfig(
+  pageFilePath: string,
   config: any,
   nextConfig: NextConfig
 ): Partial<MiddlewareConfig> {
@@ -171,6 +174,23 @@ function getMiddlewareConfig(
     result.matchers = getMiddlewareMatchers(config.matcher, nextConfig)
   }
 
+  if (config.allowDynamic) {
+    result.allowDynamicGlobs = Array.isArray(config.allowDynamic)
+      ? config.allowDynamic
+      : [config.allowDynamic]
+    for (const glob of result.allowDynamicGlobs ?? []) {
+      try {
+        matcher(glob)
+      } catch (err) {
+        throw new Error(
+          `${pageFilePath} exported 'config.allowDynamic' contains invalid pattern '${glob}': ${
+            (err as Error).message
+          }`
+        )
+      }
+    }
+  }
+
   return result
 }
 
@@ -223,7 +243,11 @@ export async function getPageStaticInfo(params: {
   const { isDev, pageFilePath, nextConfig, page } = params
 
   const fileContent = (await tryToReadFile(pageFilePath, !isDev)) || ''
-  if (/runtime|getStaticProps|getServerSideProps|matcher/.test(fileContent)) {
+  if (
+    /runtime|getStaticProps|getServerSideProps|matcher|allowDynamic/.test(
+      fileContent
+    )
+  ) {
     const swcAST = await parseModule(pageFilePath, fileContent)
     const { ssg, ssr } = checkExports(swcAST)
 
@@ -268,7 +292,11 @@ export async function getPageStaticInfo(params: {
       warnAboutExperimentalEdgeApiFunctions()
     }
 
-    const middlewareConfig = getMiddlewareConfig(config, nextConfig)
+    const middlewareConfig = getMiddlewareConfig(
+      page ?? 'middleware/edge API route',
+      config,
+      nextConfig
+    )
 
     return {
       ssr,

packages/next/build/entries.ts

@@ -48,6 +48,7 @@ import { serverComponentRegex } from './webpack/loaders/utils'
 import { ServerRuntime } from '../types'
 import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
 import { encodeMatchers } from './webpack/loaders/next-middleware-loader'
+import { EdgeFunctionLoaderOptions } from './webpack/loaders/next-edge-function-loader'
 
 type ObjectValue<T> = T extends { [key: string]: infer V } ? V : never
 
@@ -163,6 +164,7 @@ interface CreateEntrypointsParams {
 }
 
 export function getEdgeServerEntry(opts: {
+  rootDir: string
   absolutePagePath: string
   buildId: string
   bundlePath: string
@@ -179,6 +181,7 @@ export function getEdgeServerEntry(opts: {
     const loaderParams: MiddlewareLoaderOptions = {
       absolutePagePath: opts.absolutePagePath,
       page: opts.page,
+      rootDir: opts.rootDir,
       matchers: opts.middleware?.matchers
         ? encodeMatchers(opts.middleware.matchers)
         : '',
@@ -188,9 +191,10 @@ export function getEdgeServerEntry(opts: {
   }
 
   if (opts.page.startsWith('/api/') || opts.page === '/api') {
-    const loaderParams: MiddlewareLoaderOptions = {
+    const loaderParams: EdgeFunctionLoaderOptions = {
       absolutePagePath: opts.absolutePagePath,
       page: opts.page,
+      rootDir: opts.rootDir,
     }
 
     return `next-edge-function-loader?${stringify(loaderParams)}!`
@@ -487,6 +491,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
 
           edgeServer[serverBundlePath] = getEdgeServerEntry({
             ...params,
+            rootDir,
             absolutePagePath: mappings[page],
             bundlePath: clientBundlePath,
             isDev: false,

packages/next/build/webpack/loaders/get-module-build-info.ts

@@ -16,6 +16,7 @@ export function getModuleBuildInfo(webpackModule: webpack.Module) {
     usingIndirectEval?: boolean | Set<string>
     route?: RouteMeta
     importLocByPath?: Map<string, any>
+    rootDir?: string
   }
 }
 

packages/next/build/webpack/loaders/next-edge-function-loader.ts

@@ -4,16 +4,18 @@ import { stringifyRequest } from '../stringify-request'
 export type EdgeFunctionLoaderOptions = {
   absolutePagePath: string
   page: string
+  rootDir: string
 }
 
 export default function middlewareLoader(this: any) {
-  const { absolutePagePath, page }: EdgeFunctionLoaderOptions =
+  const { absolutePagePath, page, rootDir }: EdgeFunctionLoaderOptions =
     this.getOptions()
   const stringifiedPagePath = stringifyRequest(this, absolutePagePath)
   const buildInfo = getModuleBuildInfo(this._module)
   buildInfo.nextEdgeApiFunction = {
     page: page || '/',
   }
+  buildInfo.rootDir = rootDir
 
   return `
         import { adapter, enhanceGlobals } from 'next/dist/server/web/adapter'

packages/next/build/webpack/loaders/next-middleware-loader.ts

@@ -6,6 +6,7 @@ import { MIDDLEWARE_LOCATION_REGEXP } from '../../../lib/constants'
 export type MiddlewareLoaderOptions = {
   absolutePagePath: string
   page: string
+  rootDir: string
   matchers?: string
 }
 
@@ -25,6 +26,7 @@ export default function middlewareLoader(this: any) {
   const {
     absolutePagePath,
     page,
+    rootDir,
     matchers: encodedMatchers,
   }: MiddlewareLoaderOptions = this.getOptions()
   const matchers = encodedMatchers ? decodeMatchers(encodedMatchers) : undefined
@@ -35,6 +37,7 @@ export default function middlewareLoader(this: any) {
     page:
       page.replace(new RegExp(`/${MIDDLEWARE_LOCATION_REGEXP}$`), '') || '/',
   }
+  buildInfo.rootDir = rootDir
 
   return `
         import { adapter, blockUnallowedResponse, enhanceGlobals } from 'next/dist/server/web/adapter'

packages/next/build/webpack/loaders/utils.ts

@@ -1,3 +1,5 @@
+import { getPageStaticInfo } from '../../analysis/get-page-static-info'
+
 export const defaultJsFileExtensions = ['js', 'mjs', 'jsx', 'ts', 'tsx']
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
 const nextClientComponents = [
@@ -47,3 +49,17 @@ export const clientComponentRegex = new RegExp(
 export const serverComponentRegex = new RegExp(
   `\\.server(\\.(${defaultJsFileExtensions.join('|')}))?$`
 )
+
+export async function loadEdgeFunctionConfigFromFile(
+  absolutePagePath: string,
+  resolve: (context: string, request: string) => Promise<string>
+) {
+  const pageFilePath = await resolve('/', absolutePagePath)
+  return (
+    await getPageStaticInfo({
+      nextConfig: {},
+      pageFilePath,
+      isDev: false,
+    })
+  ).middleware
+}