Security issue when getting cookies/headers for the SSR pass

[iamkd]

Our project is using Apollo as a GraphQL client. To the best of my understanding, if we use the latest Apollo library (https://github.com/apollographql/apollo-client-nextjs), we have it running in three contexts: RSC, SSR and browser.

Everything is working as expected, but the main problem I've encountered is passing the authorization header in all three contexts.
RSC is easy because we have access to headers and cookies functions to set everything up. Browser is easy, because we have access to local storage, cookies, and the rest of browser APIs. However, SSR does not have access to anything those two do.

So, in order to provide an auth header to Apollo in SSR, I've passed the result of a cookies() function from RSC into a Client Component that sets up Apollo and provides context. This works fine and solves the problem, but I believe it enables a pretty obvious vulnerability.

When passing data from RSC into a Client Component, the data is serialized into the HTML response in order to hydrate properly, so we are ending up with an XSS vulnerability where cookies are available in plaintext in the response. Without setting SameSite to strict, anyone can retrieve the cookies by just sending a GET request.

Is there any other way to do this or maybe I am missing something? Thanks!

[iamkd]

Someone suggested a really hacky solution to that: apollographql/apollo-client-nextjs#85 (comment)

Encrypting the cookie so that you can decrypt it in the SSR pass because you have access to env variables, while the browser will receive an encrypted string.

[phryneas]

It's hacky, but the only solution to this that I've seen so far - so I've published that approach as an npm package to make it easier to implement: https://www.npmjs.com/package/ssr-only-secrets

[mgreenw]

+1, this is an important issue that is blocking App Router adoption for trivial authenticated data fetching applications.

I also wrote a bit about this in bullet #3 of "Other Learning" in this comment on @tanstack/react-query.

[marcoripa96]

Do you have anymore suggestions for implementing this behaviour right now with react query?

[mgreenw]

Check out point number 3 in the comment I linked above! I give some options on how to do this.

[fitimbytyqi]

+1, I noticed calling cookies() resulted in undefined when using trpc & react query to make a fetch from a client component which is bad for authenticated calls.