No way to (securely) access cookies/headers for client component SSR

[twavv]

Goals

It should be possible to securely access cookies from the request context while server-side rendering (SSR) client components. Currently it's only possible to access request cookies from React server components (RSC).

By securely, I mean that the cookie value should not be serialized in the resulting HTML document produced by the request. This is important to ensure that HTTP-only cookies cannot be read by JavaScript code (which helps prevent XSS attacks and is often required for compliance reasons in many organizations).

Non-Goals

No response

Background

There is currently no way to access cookies (or other headers) when doing SSR for "use client" components. This matters when trying to do (e.g.,) isomorphic fetch using suspense. I'm running into this problem when trying to use Apollo with GraphQL for "classic" SSR (not RSC) where I want the data to be fetched on the server for performance but to be also refetched on the client in response to user interaction. The same issue applies to using fetch in client components.

To illustrate, imagine something like:

// page.tsx
export default function Page() {
  return <MyDataComponent />
}

// MyDataComponent.txs
"use client";

export const MyDataComponent = () => {
  const [page, setPage] = useState(0);
  // use a hypothetical suspense loading framework
  const data = useData({
    page,
    authorization: typeof window === undefined
      // For SSR, we want to forward the authentication to whatever API we're using
      // This is currently a build-time error because importing headers is not allowed
      // in client components
      ? headers().get("cookie")
      // In the browser we generally just want to use the default credentials sent
      // by for XHR requests
      : null,
  });
}

Related links

A handful of people have requested this. There are related discussions on the next.js repository (though those are more specific that this one I believe).

• Stack Overflow: How to use cookies in Client Components in Next.js 13 and read them on initial SSR request when dynamic routing is enabled?
• Issue on Apollo NextJS library: useSuspenseQuery not sending cookies on Server Side query
• Discussion on next.js repository: Security issue when getting cookies/headers for the SSR pass

Proposal

It's beyond my expertise to suggest a proposal for this because NextJS + RSC + SSR is very complicated. Naively, I'd like to just be able to use cookies() or headers() inside client components but throw an error on the browser. Alternatively, maybe a separate ssrCookies() function if we still want using cookies() to raise an error at build time when used in client components.

[fabb]

I guess we need to fetch it in a server component and pass it to a client component as a prop. Makes react development more complicated.

[twavv]

I guess we need to fetch it in a server component and pass it to a client component as a prop.

Importantly, this is not generally ~~secure~~. Authorization cookies should generally™ be HttpOnly to reduce the risk of XSS attacks. Passing the cookie as a prop to the client component will result in the cookie value being serialized in the page and thus accessible to JavaScript.