# Custom 404 page is present and helpful

- **Pattern:** `ab-002187` (`pre-launch.user-facing.custom-404`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002187
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002187)

## Why it matters

The default framework 404 page exposes the framework name, version, and sometimes internal routing details — information an attacker uses to target known vulnerabilities (CWE-756). Beyond security, every user who hits a 404 without navigation options bounces permanently. A custom 404 page with a link back to the homepage recovers a portion of those users who arrived at a broken or moved URL, directly reducing churn from mislinked campaigns, renamed routes, and user typos.

## Severity rationale

Medium because the default 404 leaks framework internals per CWE-756 and abandons users with no navigation path, causing recoverable but significant UX and minor information-disclosure harm.

## Remediation

Create `app/not-found.tsx` in Next.js App Router (or `pages/404.tsx` in Pages Router) with a clear message and a link back to the homepage.

```tsx
// app/not-found.tsx
import Link from 'next/link'

export default function NotFound() {
  return (
    <main>
      <h1>Page Not Found</h1>
      <p>This page doesn't exist or has been moved.</p>
      <Link href="/">Return home</Link>
    </main>
  )
}
```

Include your site's normal navigation header so users can recover without the back button. Optionally add links to popular sections or a search bar. The page should match your brand styling — a bare white error screen signals a broken product.

## Detection

- **ID:** `custom-404`
- **Severity:** `medium`
- **What to look for:** Count all error page implementations. Enumerate whether a custom 404 page exists with navigation back to the site. Check for custom 404 pages: `app/not-found.tsx` in Next.js App Router, `pages/404.tsx` in Next.js Pages Router, `404.html` in static sites, or equivalent error pages in other frameworks. Evaluate whether the page provides navigation help (links back to home or main sections) rather than just displaying "404 Not Found."
- **Pass criteria:** A custom 404 page exists that provides navigation options (at minimum a link back to the homepage) and does not expose framework internals. At least 1 custom 404 page must exist with navigation links and brand styling.
- **Fail criteria:** No custom 404 page found, or the default framework 404 page is in use.
- **Skip (N/A) when:** Never — every web project served to users should have a custom 404 page.

- **Cross-reference:** For custom 500 page, see `custom-500`.
- **Detail on fail:** `"No custom 404 page found — using framework default which may expose internal details and provides no navigation help to lost users"`
- **Remediation:** Users hitting broken links or mistyped URLs should be gently redirected, not abandoned on a bare "404 Not Found" page:

  ```tsx
  // app/not-found.tsx — custom 404 page
  export default function NotFound() { return <div><h1>Page Not Found</h1><Link href="/">Go Home</Link></div> }
  ```

  ```tsx
  // app/not-found.tsx (Next.js App Router)
  import Link from 'next/link'

  export default function NotFound() {
    return (
      <main>
        <h1>Page Not Found</h1>
        <p>The page you're looking for doesn't exist or has been moved.</p>
        <Link href="/">Return home</Link>
      </main>
    )
  }
  ```

  A good 404 page includes: a clear message that the page wasn't found, a link back to the homepage, optionally a search bar or links to popular sections, and your site's normal navigation header.

## External references

- cwe CWE-756

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-002187