sidebase
Unable to use httpOnly attribute for authCookie
Environment
- Operating System:
Darwin - Node Version:
v22.6.0 - Nuxt Version:
3.12.3 - CLI Version:
3.12.0 - Nitro Version:
2.9.7 - Package Manager:
[email protected] - Builder:
- - User Config:
ssr,app,css,runtimeConfig,modules,apiParty,auth,plugins,components,build,devServer,compatibilityDate - Runtime Modules:
[email protected],@sidebase/[email protected] - Build Modules:
-
Reproduction
Turn on httpOnlyCookieAttribute to true in nuxt.config.js. Try to login and refresh the page.
Describe the bug
Hello,
I opened a pull request yesterday (that has been merged).
The issue, like I said in the PR, is that the cookie is not saved after logging in if we set httpOnlyCookieAttribute to true (this is enabling httpOnly attribute for the cookie, preventing JS access and thus XSS attacks). This is caused by the way the cookie is saved. Indeed, the cookie is saved by useCookie and watch method in useAuthState file composable (see here), and this is client-side.
To fix the issue (what I am trying to work on), we have to change the way of defining the cookie, from client-side to server-side. With this, the cookie will be created, saved, modified or deleted on server-side, thus we will be able to use httpOnly attribute for the auth cookie, providing us a better app security.
I would really appreciate some help on this!
Thanks you.
Additional context
No response
Logs
No response
I see your point - you want to attach cookies server-side instead of manually setting them on the client. This is very tricky due to the fact local provider works with both Nuxt/non-Nuxt backends and authentication markers (cookies, etc.) greatly differ between all of them.
useCookie is mostly used to preserve state (i.e. tokens) within the session and cookies being set on SSR is mostly a side-effect.
I agree that it's better if JS has no access to the cookie, however in that case we also have no reliable way of knowing the authentication state:
- SSR sees the cookie and says that a user is authenticated -> renders authenticated view;
- CSR hydrates but doesn't see the cookie -> hydration mismatch -> renders unauthenticated view.
Not relying on useCookie at the client means that authentication state needs to be correctly set on the server and then transferred and preserved in memory during the session. This is of course doable but requires noticeable effort to think through and implement. I would love to hear your take on how it can be implemented using known building blocks of Nuxt (like useCookie and useState).
Concepts are welcome
Hi, I've been trying to implement an approach similar to the one discussed in this issue (using HTTP-only cookies) for one of my services. It's been a lot of work!
The first problem you'll encounter is that Set-Cookie headers don't work in a server-side rendering (SSR) environment.
await $fetch.raw(API_ENDPOINTS.GENERATE_COOKIES); // Generates new cookies
await $fetch.raw(API_ENDPOINTS.RUN_WITH_NEW_COOKIES); // Should run with new cookies, but...
In an SSR context, the second API call doesn't have access to the cookies set by the first call. To handle this, you'll need a shared state to pass headers between requests.
Aside from that, the rest is fairly straightforward. We can make the API call and use an interceptor (onResponseError) to check for 401 or 403 responses, then execute the refresh API. For the client-side, there's no issue, as the set-cookie header works as expected. However, in SSR, we need to handle this manually by passing the cookies to the next request. If anyone has suggestions to improve my approach, I’d greatly appreciate it! I’ve been stuck on this issue for three days, trying to handle edge cases, but haven’t had any luck so far.
Hi, is this issue being solved for. Because I'm in dire need of setting httpOnly cookies and setting httpOnlyAtrribute to true in nuxt.config.ts is just not working. If not then is there any workaround I can do for this, need to solve this as security risk asap? @zoey-kaiser
@maximehamou were you able to find a workaround around this for now?
Same issue
If I set httpOnlyCookieAttribute: true for local provider, I can't see cookie in the browser devtools at all.
same issue here too.
If I set httpOnlyCookieAttribute: true for local provider, I can't see cookie for auth.token in the browser. And if I set it for refreshToken it is same issue. Please let me know, if you solved the problem. It is very importent for my project. thx
For that we need to have server part (nuxt) which will process this cookie. Like it's done here: @hebilicious/authjs-nuxt
It seems that Nuxt Auth doesn't work with httponly, is that what I understood? Another discussion was opened and closed saying that it was a duplicate of this one, and in this discussion there seems to be no guidance from the module developers. I've been struggling with these httponly cookies for days, I see this in other systems and I'm starting to get worried. Any opinion on whether we can use httponly as stated in the doc or not?
Thanks for your attention!
https://github.com/sidebase/nuxt-auth/issues/412#issuecomment-1758873330 This is a patch to a slightly older version, but is there any way to make it httponly with a fix similar to this URL?
P.S. I haven't tried it properly. Sorry about that.
At the moment NuxtAuth does not support using HttpOnly flag for the local provider, as it relies on reading this value and also sending it to your backend.
See this article by OWASP:
If the HttpOnly flag (optional) is included in the HTTP response header, the cookie cannot be accessed through client side script
It might become possible in a future version of this module to use local provider without ever reading the cookies, if it is even possible with the fetch implementation. We need to properly research how setting such cookies impacts the requests made from NuxtAuth.