CVE-2024-51479

Overview

Next.js is a popular open-source React framework that simplifies the development of server-rendered, static, and dynamic web applications by providing built-in features like routing, code splitting, and API routes. 

Attackers can use this exploit to bypass authorization and gain direct access to pages directly under the root folder. For example:

• Not affected: https://example.com/
• Affected: https://example.com/foo 
• Not affected: https://example.com/foo/bar

Authorization Bypass is a security vulnerability where an attacker circumvents access controls to gain unauthorized access to resources or functionality in a system. It occurs when an application fails to properly enforce permissions, allowing users to access data or perform actions they shouldn’t. This type of flaw often stems from improper authorization checks, like relying on easily manipulated inputs such as pathnames.

Ramifications of Authorization Bypass:

• Sensitive information (e.g., user data, financial records) could be accessed by unauthorized parties.
• Attackers might gain higher-level permissions, such as admin access, to manipulate the system.
• Malicious users could perform restricted operations, like deleting files or modifying settings.
• Bypassing controls might allow attackers to install malware or exploit further vulnerabilities.
• Breaches resulting from the bypass could erode trust in the application or organization.

‍

Details

Module Info

Product: Next.js

Affected packages: Next.js

Affected versions: <=14.2.14

GitHub Repo: https://github.com/vercel/next.js/releases/tag/v14.2.15

Published packages: N/A

Package manager: npm

‍

Vulnerability Info

This high-severity vulnerability is found in the main distribution of Next.js in versions lower than or equal to 14.2.14.

‍

Steps To Reproduce

1. Set up a Next.js environment that is vulnerable to this exploit, such as version 14.2.0.
2. Configure middleware for authorization by create a middleware.js file in the root of your project (or src/middleware.js if using the src directory structure). In the file, place the code below. The intention is to protect /foo.

import { NextResponse } from 'next/server';

export function middleware(request) {
  const { pathname } = request.nextUrl;
  // Simulate authorization check: block access to /foo unless a condition is met
  if (pathname.startsWith('/foo') && !request.headers.get('x-auth-token')) {
    return new Response('Unauthorized', { status: 401 });
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/foo/:path*', '/foo'],
};

‍

3. Create a page in foo.js (or app/foo/page.js):

export default function FooPage() {
  return <h1>This is the /foo page - should be protected!</h1>;
}

‍

Run the app and visit http://localhost:3000/foo. You will see the message above instead of receiving an access denied message.

‍

Addressing the Issue

Users of the affected components should apply one of the following mitigations:

• Upgrade to a version of the framework that isn’t susceptible to the exploit.
• Sign up for post-EOL security support; HeroDevs customers get immediate access to a patched version of this software.

‍

Credit(s)

• tyage