Fix Shadow API Exposure in Remix

Remix loaders and actions are not private server-side logic; they are public-facing HTTP endpoints. Shadow API exposure occurs when developers return raw database objects (like Prisma models) directly to the client. Even if your React component doesn't render a field, the data is still transmitted over the wire and accessible to any attacker via the `?_data` query parameter. If you leak it in the loader, it's public knowledge.

The Vulnerable Pattern

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const user = await db.user.findUnique({ where: { id: '123' } });
  // VULNERABILITY: Returning the entire user object including passwordHash, ssn, and internal metadata.
  return json({ user });
};

The Secure Implementation

In the vulnerable example, the server leaks the entire row from the database. An attacker can simply append `?_data=routes/profile` to the URL to receive the full JSON payload, bypassing the UI's intended data constraints. The secure implementation uses a 'Select' pattern at the database level to ensure sensitive fields never leave the data layer. As a secondary defense, it maps the result to a strict DTO. Always treat your loader return values as a public API definition, not a convenient shortcut for backend-to-frontend state sync.

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const user = await db.user.findUnique({
    where: { id: '123' },
    // DEFENSE: Use explicit selection to define the public API contract
    select: {
      id: true,
      username: true,
      avatarUrl: true
    }
  });
if (!user) throw new Response(‘Not Found’, { status: 404 });
return json({
user: {
…user,
// DEFENSE: Transform data into a UI-specific DTO (Data Transfer Object)
requestedAt: new Date().toISOString()
}
});
};