first commit

test/e2e/app-dir/javascript-urls/app/app/action-redirect-form/page.tsx

@@ -0,0 +1,23 @@
+import { redirect } from 'next/navigation'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+async function handleRedirect() {
+  'use server'
+  redirect(DANGEROUS_JAVASCRIPT_URL)
+}
+
+export default function Page() {
+  return (
+    <>
+      <p>
+        Clicking this button should result in an error where Next.js blocks a
+        javascript URL through a server action redirect initiated by an onClick
+        handler
+      </p>
+      <form action={handleRedirect}>
+        <button type="submit">redirect via form action</button>
+      </form>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/action-redirect-onclick/page.tsx

@@ -0,0 +1,21 @@
+import { redirect } from 'next/navigation'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+async function handleRedirect() {
+  'use server'
+  redirect(DANGEROUS_JAVASCRIPT_URL)
+}
+
+export default function Page() {
+  return (
+    <>
+      <p>
+        Clicking this button should result in an error where Next.js blocks a
+        javascript URL through a server action redirect initiated by an onClick
+        handler
+      </p>
+      <button onClick={handleRedirect}>redirect via onclick action</button>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/link-as/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+export default function Page() {
+  return (
+    <>
+      <p>
+        Clicking this link should result in an error where React blocks a
+        javascript URL
+      </p>
+      {/* In App Router as supercedes href but functionally it acts just like an href */}
+      <Link href="/" as={DANGEROUS_JAVASCRIPT_URL}>
+        Link with javascript URL `as`
+      </Link>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/link-href/page.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+export default function Page() {
+  return (
+    <>
+      <p>
+        Clicking this link should result in an error where React blocks a
+        javascript URL
+      </p>
+      <Link href={DANGEROUS_JAVASCRIPT_URL}>
+        Link with javascript URL `href`
+      </Link>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/router-prefetch/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <p>
+        Clicking this button should result in an error where Next.js blocks a
+        javascript URL
+      </p>
+      <button onClick={() => router.prefetch(DANGEROUS_JAVASCRIPT_URL)}>
+        prefetch javascript URL
+      </button>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/router-push/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <p>
+        Clicking this button should result in an error where Next.js blocks a
+        javascript URL
+      </p>
+      <button onClick={() => router.push(DANGEROUS_JAVASCRIPT_URL)}>
+        push javascript URL
+      </button>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/router-replace/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../../bad-url'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <p>
+        Clicking this button should result in an error where Next.js blocks a
+        javascript URL
+      </p>
+      <button onClick={() => router.replace(DANGEROUS_JAVASCRIPT_URL)}>
+        replace javascript URL
+      </button>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/app/safe/page.tsx

@@ -0,0 +1,10 @@
+export default function Page() {
+  return (
+    <>
+      <p id="canarv">
+        This page is used as a navigation target to ensure SPA navigation
+        continues to work after pushing/redirecting/linking to a javascript URL.
+      </p>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/boom/page.tsx

@@ -0,0 +1,10 @@
+export default function Page() {
+  return (
+    <>
+      <p id="pwned">
+        If you were redirected here then the dangerous javascript URL was
+        followed.
+      </p>
+    </>
+  )
+}

test/e2e/app-dir/javascript-urls/app/layout.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+        <Link href="/app/safe">Safe Page</Link>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/javascript-urls/bad-url.ts

@@ -0,0 +1,3 @@
+export const DANGEROUS_JAVASCRIPT_URL =
+  // eslint-disable-next-line no-script-url
+  "javascript:window.location.assign('/boom');"

test/e2e/app-dir/javascript-urls/javascript-urls.test.ts

@@ -0,0 +1,398 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  getRedboxDescription,
+  retry,
+  waitForNoRedbox,
+  waitForRedbox,
+} from 'next-test-utils'
+import type { Page, Request } from 'playwright'
+
+const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18
+
+describe('javascript-urls', () => {
+  const { next, isNextDev } = nextTestSetup({
+    files: __dirname,
+  })
+
+  /**
+   * Creates a beforePageLoad handler that intercepts navigation requests
+   * and tracks them for later assertion.
+   */
+  function createNavigationInterceptor() {
+    const navigationRequests: Request[] = []
+
+    const beforePageLoad = (page: Page) => {
+      page.on('request', (request) => {
+        if (request.resourceType() === 'document') {
+          navigationRequests.push(request)
+        }
+      })
+    }
+
+    const getNavigationRequests = () => navigationRequests
+
+    return { beforePageLoad, getNavigationRequests }
+  }
+
+  /**
+   * Helper to test that a javascript: URL is blocked.
+   * Waits for the security error to appear in logs (confirming the click was processed),
+   * then asserts no navigation requests were made.
+   */
+  async function expectJavascriptUrlBlocked(
+    browser: Awaited<ReturnType<typeof next.browser>>,
+    initialUrl: string,
+    getNavigationRequests: () => Request[]
+  ) {
+    const errorMessage =
+      'has blocked a javascript: URL as a security precaution.'
+    // Wait for the security error to appear in logs, confirming the click was processed
+    await retry(async () => {
+      const logs = await browser.log()
+      const errors = logs.filter(
+        (log) => log.source === 'error' && log.message.includes(errorMessage)
+      )
+      expect(errors.length).toBeGreaterThan(0)
+    })
+
+    // Verify no navigation requests were made after the initial page load
+    const navRequests = getNavigationRequests()
+    const postLoadNavigations = navRequests.filter(
+      (req) => !req.url().includes(new URL(initialUrl).pathname)
+    )
+    expect(postLoadNavigations).toHaveLength(0)
+
+    // Verify URL hasn't changed
+    const finalUrl = await browser.url()
+    expect(finalUrl).toBe(initialUrl)
+  }
+
+  it('should prevent javascript URLs in link `href`', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/link-href', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('a').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  it('should prevent javascript URLs in link `as`', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/link-as', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('a').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  it('should prevent javascript URLs in route.push', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/router-push', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  it('should prevent javascript URLs in route.replace', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/router-replace', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  it('should prevent javascript URLs in route.prefetch', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/router-prefetch', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  it('should prevent javascript URLs in server action redirect through onClick', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/action-redirect-onclick', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  it('should prevent javascript URLs in server action redirect through form action', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/app/action-redirect-form', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/app/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/app/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/app/safe')
+  })
+
+  // React 18 did not block JavaScript URLs, it was just a console error.
+  if (!isReact18) {
+    it('should prevent javascript URLs in pages router Link component', async () => {
+      const { beforePageLoad, getNavigationRequests } =
+        createNavigationInterceptor()
+
+      const browser = await next.browser('/pages/link-href', {
+        pushErrorAsConsoleLog: true,
+        beforePageLoad,
+      })
+      const initialUrl = await browser.url()
+
+      await browser.elementByCss('a').click()
+
+      await expectJavascriptUrlBlocked(
+        browser,
+        initialUrl,
+        getNavigationRequests
+      )
+
+      if (isNextDev) {
+        await waitForRedbox(browser)
+        expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+          `"React has blocked a javascript: URL as a security precaution."`
+        )
+        browser.keydown('Escape')
+        await waitForNoRedbox(browser)
+      }
+
+      // Click the safe page link
+      await browser.elementByCss('a[href="/pages/safe"]').click()
+
+      // Wait for navigation to complete
+      await browser.waitForCondition(
+        'window.location.pathname.includes("/pages/safe")'
+      )
+
+      const safePageUrl = await browser.url()
+      expect(safePageUrl).toContain('/pages/safe')
+    })
+  }
+
+  it('should prevent javascript URLs in pages router Link as prop', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/pages/link-as', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('a').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    if (isNextDev) {
+      await waitForRedbox(browser)
+      expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+        `"Next.js has blocked a javascript: URL as a security precaution."`
+      )
+      browser.keydown('Escape')
+      await waitForNoRedbox(browser)
+    }
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/pages/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/pages/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/pages/safe')
+  })
+
+  it('should prevent javascript URLs in pages router router.push', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/pages/router-push', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    if (isNextDev) {
+      await waitForRedbox(browser)
+      expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+        `"Next.js has blocked a javascript: URL as a security precaution."`
+      )
+      browser.keydown('Escape')
+      await waitForNoRedbox(browser)
+    }
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/pages/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/pages/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/pages/safe')
+  })
+
+  it('should prevent javascript URLs in pages router router.replace', async () => {
+    const { beforePageLoad, getNavigationRequests } =
+      createNavigationInterceptor()
+
+    const browser = await next.browser('/pages/router-replace', {
+      pushErrorAsConsoleLog: true,
+      beforePageLoad,
+    })
+    const initialUrl = await browser.url()
+
+    await browser.elementByCss('button').click()
+
+    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+
+    if (isNextDev) {
+      await waitForRedbox(browser)
+      expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+        `"Next.js has blocked a javascript: URL as a security precaution."`
+      )
+      browser.keydown('Escape')
+      await waitForNoRedbox(browser)
+    }
+
+    // Click the safe page link
+    await browser.elementByCss('a[href="/pages/safe"]').click()
+
+    // Wait for navigation to complete
+    await browser.waitForCondition(
+      'window.location.pathname.includes("/pages/safe")'
+    )
+
+    const safePageUrl = await browser.url()
+    expect(safePageUrl).toContain('/pages/safe')
+  })
+})

test/e2e/app-dir/javascript-urls/next.config.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

test/e2e/app-dir/javascript-urls/pages/pages/link-as.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
+
+export default function Page() {
+  return (
+    <div>
+      <main>
+        <p>
+          Clicking this link should result in an error where React blocks a
+          javascript URL
+        </p>
+        <Link href="/" as={DANGEROUS_JAVASCRIPT_URL}>
+          Link with javascript URL `as`
+        </Link>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
+  )
+}

test/e2e/app-dir/javascript-urls/pages/pages/link-href.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
+
+export default function Page() {
+  return (
+    <div>
+      <main>
+        <p>
+          Clicking this link should result in an error where React blocks a
+          javascript URL
+        </p>
+        <Link href={DANGEROUS_JAVASCRIPT_URL}>
+          Link with javascript URL `href`
+        </Link>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
+  )
+}

test/e2e/app-dir/javascript-urls/pages/pages/router-push.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <div>
+      <main>
+        <p>
+          Clicking this button should result in an error where Next.js blocks a
+          javascript URL
+        </p>
+        <button onClick={() => router.push(DANGEROUS_JAVASCRIPT_URL)}>
+          push javascript URL
+        </button>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
+  )
+}

test/e2e/app-dir/javascript-urls/pages/pages/router-replace.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <div>
+      <main>
+        <p>
+          Clicking this button should result in an error where Next.js blocks a
+          javascript URL
+        </p>
+        <button onClick={() => router.replace(DANGEROUS_JAVASCRIPT_URL)}>
+          replace javascript URL
+        </button>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
+  )
+}

test/e2e/app-dir/javascript-urls/pages/pages/safe.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <p id="canarv">
+      This page is used as a navigation target to ensure SPA navigation
+      continues to work after pushing/redirecting/linking to a javascript URL.
+    </p>
+  )
+}