javascriptvue.jscookiesnuxt3.js

Why I can access httpOnly Cookies using Nuxt useCookie() composable?


In my Nuxt app, I've implemented custom authentication middleware and composables. On the backend (Spring Boot), my /login route sets a refreshToken as an HttpOnly cookie and returns an accessToken in the response body.

From my research, I understand that HttpOnly cookies should not be accessible via JavaScript on the client side. However, in my Nuxt custom composable useAuth(), I’m able to access the refreshToken using the useCookie('refreshToken') composable — even though the cookie was set with the HttpOnly flag.

This behaviour confuses me. I was under the impression that such cookies are strictly inaccessible from JavaScript. Is Nuxt doing something under the hood that exposes these cookies? Or could this be a misconfiguration on my part?

Clarifications:

  1. I'm certain that my cookie is httpOnly from browser devtools

Solution

  • SSR has access to HttpOnly because it processes the request as a real server.
    You don't provide code to reproduce the problem, but I'm pretty sure that on the client your refreshToken is not available if you're doing everything correctly.
    If refreshToken has the HttpOnly flag, then refreshToken.value will be null in this example:

    <script setup lang='ts'>
    import { onMounted } from 'vue'
    
    const refreshToken = useCookie('refreshToken')
    
    onMounted(() => console.log('Client refreshToken:', refreshToken.value))
    </script>