Enforce absolute URLs in Edge Functions runtime (vercel#33410)

We currently have inconsistencies when working with URLs in the Edge Functions runtime, this PR addresses them introducing a warning for inconsistent usage that will break in the future. Here is the reasoning.

### The Browser

When we are in a browser environment there is a fixed location stored at `globalThis.location`. Then, if one tries to build a request with a relative URL it will work using that location global hostname as _base_ to construct its URL. For example:

```typescript
// https://nextjs.org
new Request('/test').url; // https://nextjs.org/test
Response.redirect('/test').headers.get('Location'); // https://nextjs.org/test
```

However, if we attempt to run the same code from `about:blank` it would not work because the global to use as a base `String(globalThis.location)` is not a valid URL. Therefore a call to `Response.redirect('/test')` or `new Response('/test')` would fail.

### Edge Functions Runtime

In Next.js Edge Functions runtime the situation is slightly different from a browser. Say that we have a root middleware (`pages/_middleware`) that gets invoked for every page. In the middleware file we expose the handler function and also define a global variable that we mutate on every request:

```typescript
// pages/_middleware

let count = 0;

export function middleware(req: NextRequest) {
  console.log(req.url);
  count += 1;
}
```

Currently we cache the module scope in the runtime so subsequent invocations would hold the same globals and the module would not be evaluated again. This would make the counter to increment for each request that the middleware handles. It is for this reason that we **can't have a global location** that changes across different invocations. Each invocation of the same function uses the same global which also holds primitives like `URL` or `Request` so changing an hypothetical `globalThis.location` per request would affect concurrent requests being handled.

Then, it is not possible to use relative URLs in the same way the browser does because we don't have a global to rely on to use its host to compose a URL from a relative path.

### Why it works today

We are **not** validating what is provided to, for example, `NextResponse.rewrite()` nor `NextResponse.redirect()`. We simply create a `Response` instance that adds the corresponding header for the rewrite or the redirect. Then it is **the consumer** the one that composes the final destination based on the request. Theoretically you can pass any value and it would fail on redirect but won't validate the input.

Of course this is inconsistent because it doesn't make sense that `NextResponse.rewrite('/test')` works but `fetch(new NextRequest('/test'))` does not. Also we should validate what is provided. Finally, we want to be consistent with the way a browser behaves so `new Request('/test')` _should_ not work if there is no global location which we lack.

### What this PR does

We will have to deprecate the usage of relative URLs in the previously mentioned scenarios. In preparation for it, this PR adds a validation function in those places where it will break in the future, printing a warning with a link that points to a Next.js page with an explanation of the issue and ways to fix it.

Although middleware changes are not covered by semver, we will roll this for some time to make people aware that this change is coming. Then after a reasonable period of time we can remove the warning and make the code fail when using relative URLs in the previously exposed scenarios.

errors/manifest.json

@@ -527,6 +527,10 @@
         {
           "title": "invalid-styled-jsx-children",
           "path": "/errors/invalid-styled-jsx-children.md"
+        },
+        {
+          "title": "middleware-relative-urls",
+          "path": "/errors/middleware-relative-urls.md"
         }
       ]
     }

errors/middleware-relative-urls.md

@@ -0,0 +1,38 @@
+# Middleware Relative URLs
+
+#### Why This Error Occurred
+
+You are using a Middleware function that uses `Response.redirect(url)`, `NextResponse.redirect(url)` or `NextResponse.rewrite(url)` where `url` is a relative or an invalid URL. Currently this will work, but building a request with `new Request(url)` or running `fetch(url)` when `url` is a relative URL will **not** work. For this reason and to bring consistency to Next.js Middleware, this behavior will be deprecated soon in favor of always using absolute URLs.
+
+#### Possible Ways to Fix It
+
+To fix this warning you must always pass absolute URL for redirecting and rewriting. There are several ways to get the absolute URL but the recommended way is to clone `NextURL` and mutate it:
+
+```typescript
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const url = request.nextUrl.clone()
+  url.pathname = '/dest'
+  return NextResponse.rewrite(url)
+}
+```
+
+Another way to fix this error could be to use the original URL as the base but this will not consider configuration like `basePath` or `locale`:
+
+```typescript
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  return NextResponse.rewrite(new URL('/dest', request.url))
+}
+```
+
+You can also pass directly a string containing a valid absolute URL.
+
+### Useful Links
+
+- [URL Documentation](https://developer.mozilla.org/en-US/docs/Web/API/URL)
+- [Response Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Response)

packages/next/server/web/next-url.ts

@@ -244,6 +244,10 @@ export class NextURL {
   toJSON() {
     return this.href
   }
+
+  clone() {
+    return new NextURL(String(this), this[Internal].options)
+  }
 }
 
 const REGEX_LOCALHOST_HOSTNAME =

packages/next/server/web/spec-compliant/response.ts

@@ -1,5 +1,6 @@
 import { Body, BodyInit, cloneBody, extractContentType } from './body'
 import { NextURL } from '../next-url'
+import { validateURL } from '../utils'
 
 const INTERNALS = Symbol('internal response')
 const REDIRECTS = new Set([301, 302, 303, 307, 308])
@@ -45,7 +46,7 @@ class BaseResponse extends Body implements Response {
       )
     }
 
-    return new Response(url, {
+    return new Response(validateURL(url), {
       headers: { Location: url },
       status,
     })

packages/next/server/web/spec-extension/response.ts

@@ -1,6 +1,6 @@
 import type { I18NConfig } from '../../config-shared'
 import { NextURL } from '../next-url'
-import { toNodeHeaders } from '../utils'
+import { toNodeHeaders, validateURL } from '../utils'
 import cookie from 'next/dist/compiled/cookie'
 import { CookieSerializeOptions } from '../types'
 
@@ -79,7 +79,8 @@ export class NextResponse extends Response {
         'Failed to execute "redirect" on "response": Invalid status code'
       )
     }
-    const destination = typeof url === 'string' ? url : url.toString()
+
+    const destination = validateURL(url)
     return new NextResponse(destination, {
       headers: { Location: destination },
       status,
@@ -89,10 +90,7 @@ export class NextResponse extends Response {
   static rewrite(destination: string | NextURL) {
     return new NextResponse(null, {
       headers: {
-        'x-middleware-rewrite':
-          typeof destination === 'string'
-            ? destination
-            : destination.toString(),
+        'x-middleware-rewrite': validateURL(destination),
       },
     })
   }

packages/next/server/web/utils.ts

@@ -147,3 +147,20 @@ export function splitCookiesString(cookiesString: string) {
 
   return cookiesStrings
 }
+
+/**
+ * We will be soon deprecating the usage of relative URLs in Middleware introducing
+ * URL validation. This helper puts the future code in place and prints a warning
+ * for cases where it will break. Meanwhile we preserve the previous behavior.
+ */
+export function validateURL(url: string | URL): string {
+  try {
+    return String(new URL(String(url)))
+  } catch (error: any) {
+    console.log(
+      `warn  -`,
+      'using relative URLs for Middleware will be deprecated soon - https://nextjs.org/docs/messages/middleware-relative-urls'
+    )
+    return String(url)
+  }
+}

test/integration/middleware/core/pages/interface/_middleware.js

@@ -81,7 +81,8 @@ export async function middleware(request) {
   }
 
   if (url.pathname.endsWith('/dynamic-replace')) {
-    return NextResponse.rewrite('/_interface/dynamic-path')
+    url.pathname = '/_interface/dynamic-path'
+    return NextResponse.rewrite(url)
   }
 
   return new Response(null, {

test/integration/middleware/core/pages/redirects/_middleware.js

@@ -56,6 +56,6 @@ export async function middleware(request) {
 
   if (url.pathname === '/redirects/infinite-loop-1') {
     url.pathname = '/redirects/infinite-loop'
-    return Response.redirect(url.pathname)
+    return Response.redirect(url)
   }
 }

test/integration/middleware/core/pages/rewrites/_middleware.js

@@ -5,24 +5,27 @@ export async function middleware(request) {
 
   if (url.pathname.startsWith('/rewrites/to-blog')) {
     const slug = url.pathname.split('/').pop()
-    console.log('rewriting to slug', slug)
-    return NextResponse.rewrite(`/rewrites/fallback-true-blog/${slug}`)
+    url.pathname = `/rewrites/fallback-true-blog/${slug}`
+    return NextResponse.rewrite(url)
   }
 
   if (url.pathname === '/rewrites/rewrite-to-ab-test') {
     let bucket = request.cookies.bucket
     if (!bucket) {
       bucket = Math.random() >= 0.5 ? 'a' : 'b'
-      const response = NextResponse.rewrite(`/rewrites/${bucket}`)
+      url.pathname = `/rewrites/${bucket}`
+      const response = NextResponse.rewrite(url)
       response.cookie('bucket', bucket, { maxAge: 10000 })
       return response
     }
 
-    return NextResponse.rewrite(`/rewrites/${bucket}`)
+    url.pathname = `/rewrites/${bucket}`
+    return NextResponse.rewrite(url)
   }
 
   if (url.pathname === '/rewrites/rewrite-me-to-about') {
-    return NextResponse.rewrite('/rewrites/about')
+    url.pathname = '/rewrites/about'
+    return NextResponse.rewrite(url)
   }
 
   if (url.pathname === '/rewrites/rewrite-me-to-vercel') {

test/integration/middleware/core/pages/urls/_middleware.js

@@ -0,0 +1,35 @@
+import { NextResponse, NextRequest } from 'next/server'
+
+export function middleware(request) {
+  try {
+    if (request.nextUrl.pathname === '/urls/relative-url') {
+      return NextResponse.json({ message: String(new URL('/relative')) })
+    }
+
+    if (request.nextUrl.pathname === '/urls/relative-request') {
+      return fetch(new Request('/urls/urls-b'))
+    }
+
+    if (request.nextUrl.pathname === '/urls/relative-redirect') {
+      return Response.redirect('/urls/urls-b')
+    }
+
+    if (request.nextUrl.pathname === '/urls/relative-next-redirect') {
+      return NextResponse.redirect('/urls/urls-b')
+    }
+
+    if (request.nextUrl.pathname === '/urls/relative-next-rewrite') {
+      return NextResponse.rewrite('/urls/urls-b')
+    }
+
+    if (request.nextUrl.pathname === '/urls/relative-next-request') {
+      return fetch(new NextRequest('/urls/urls-b'))
+    }
+  } catch (error) {
+    return NextResponse.json({
+      error: {
+        message: error.message,
+      },
+    })
+  }
+}

test/integration/middleware/core/pages/urls/index.js

@@ -0,0 +1,3 @@
+export default function URLsA() {
+  return <p className="title">URLs A</p>
+}

test/integration/middleware/core/pages/urls/urls-b.js

@@ -0,0 +1,3 @@
+export default function URLsB() {
+  return <p className="title">URLs B</p>
+}

test/integration/middleware/core/test/index.test.js

@@ -19,18 +19,20 @@ const context = {}
 context.appDir = join(__dirname, '../')
 
 const middlewareWarning = 'using beta Middleware (not covered by semver)'
+const urlsWarning = 'using relative URLs for Middleware will be deprecated soon'
 
 describe('Middleware base tests', () => {
   describe('dev mode', () => {
-    let output = ''
+    const log = { output: '' }
+
     beforeAll(async () => {
       context.appPort = await findPort()
       context.app = await launchApp(context.appDir, context.appPort, {
         onStdout(msg) {
-          output += msg
+          log.output += msg
         },
         onStderr(msg) {
-          output += msg
+          log.output += msg
         },
       })
     })
@@ -43,14 +45,16 @@ describe('Middleware base tests', () => {
     responseTests('/fr')
     interfaceTests()
     interfaceTests('/fr')
+    urlTests(log)
+    urlTests(log, '/fr')
 
     it('should have showed warning for middleware usage', () => {
-      expect(output).toContain(middlewareWarning)
+      expect(log.output).toContain(middlewareWarning)
     })
   })
   describe('production mode', () => {
+    let serverOutput = { output: '' }
     let buildOutput
-    let serverOutput
 
     beforeAll(async () => {
       const res = await nextBuild(context.appDir, undefined, {
@@ -62,10 +66,10 @@ describe('Middleware base tests', () => {
       context.appPort = await findPort()
       context.app = await nextStart(context.appDir, context.appPort, {
         onStdout(msg) {
-          serverOutput += msg
+          serverOutput.output += msg
         },
         onStderr(msg) {
-          serverOutput += msg
+          serverOutput.output += msg
         },
       })
     })
@@ -78,13 +82,15 @@ describe('Middleware base tests', () => {
     responseTests('/fr')
     interfaceTests()
     interfaceTests('/fr')
+    urlTests(serverOutput)
+    urlTests(serverOutput, '/fr')
 
     it('should have middleware warning during build', () => {
       expect(buildOutput).toContain(middlewareWarning)
     })
 
     it('should have middleware warning during start', () => {
-      expect(serverOutput).toContain(middlewareWarning)
+      expect(serverOutput.output).toContain(middlewareWarning)
     })
 
     it('should have correct files in manifest', async () => {
@@ -104,6 +110,57 @@ describe('Middleware base tests', () => {
   })
 })
 
+function urlTests(log, locale = '') {
+  it('rewrites by default to a target location', async () => {
+    const res = await fetchViaHTTP(context.appPort, `${locale}/urls`)
+    const html = await res.text()
+    const $ = cheerio.load(html)
+    expect($('.title').text()).toBe('URLs A')
+  })
+
+  it('throws when using URL with a relative URL', async () => {
+    const res = await fetchViaHTTP(
+      context.appPort,
+      `${locale}/urls/relative-url`
+    )
+    const json = await res.json()
+    expect(json.error.message).toContain('Invalid URL')
+  })
+
+  it('throws when using Request with a relative URL', async () => {
+    const res = await fetchViaHTTP(
+      context.appPort,
+      `${locale}/urls/relative-request`
+    )
+    const json = await res.json()
+    expect(json.error.message).toContain('Invalid URL')
+  })
+
+  it('throws when using NextRequest with a relative URL', async () => {
+    const res = await fetchViaHTTP(
+      context.appPort,
+      `${locale}/urls/relative-next-request`
+    )
+    const json = await res.json()
+    expect(json.error.message).toContain('Invalid URL')
+  })
+
+  it('warns when using Response.redirect with a relative URL', async () => {
+    await fetchViaHTTP(context.appPort, `${locale}/urls/relative-redirect`)
+    expect(log.output).toContain(urlsWarning)
+  })
+
+  it('warns when using NextResponse.redirect with a relative URL', async () => {
+    await fetchViaHTTP(context.appPort, `${locale}/urls/relative-next-redirect`)
+    expect(log.output).toContain(urlsWarning)
+  })
+
+  it('warns when using NextResponse.rewrite with a relative URL', async () => {
+    await fetchViaHTTP(context.appPort, `${locale}/urls/relative-next-rewrite`)
+    expect(log.output).toContain(urlsWarning)
+  })
+}
+
 function rewriteTests(locale = '') {
   it('should rewrite to fallback: true page successfully', async () => {
     const randomSlug = `another-${Date.now()}`

test/integration/middleware/hmr/pages/about/_middleware.js

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server'
 
-export function middleware() {
-  return NextResponse.rewrite('/about/a')
+export function middleware(request) {
+  return NextResponse.rewrite(new URL('/about/a', request.url))
 }

test/unit/web-runtime/next-url.test.ts

@@ -170,3 +170,21 @@ it('allows to change the port', () => {
   url.port = ''
   expect(url.href).toEqual('https://localhost/foo')
 })
+
+it('allows to clone a new copy', () => {
+  const url = new NextURL('/root/es/bar', {
+    base: 'http://127.0.0.1',
+    basePath: '/root',
+    i18n: {
+      defaultLocale: 'en',
+      locales: ['en', 'es', 'fr'],
+    },
+  })
+
+  const clone = url.clone()
+  clone.pathname = '/test'
+  clone.basePath = '/root-test'
+
+  expect(url.toString()).toEqual('http://localhost/root/es/bar')
+  expect(clone.toString()).toEqual('http://localhost/root-test/es/test')
+})