N
Nuxt•4w ago
Omnislash

SameSite "does not have a proper SameSite attribute"

Hello, I try add a cookie this way : 
const token = useCookie('token', {
            sameSite: 'lax',
            secure: true,
        })
const token = useCookie('token', {
            sameSite: 'lax',
            secure: true,
        })
not matter what I do for sameSite, firefox keeps telling me this : Cookie “token” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite Google looks happy about this though
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with Firefox's warning about the SameSite attribute is related to how browsers handle cookies and their security attributes. Based on the knowledge sources, the useCookie composable in Nuxt accepts a sameSite option that can be set to different values: - true (sets it to 'Strict') - false (doesn't set the attribute) - 'lax' (sets it to 'Lax') - 'none' (sets it to 'None') - 'strict' (sets it to 'Strict') According to the documentation, you're using the correct syntax: 
const token = useCookie('token', {
    sameSite: 'lax',
    secure: true,
})
const token = useCookie('token', {
    sameSite: 'lax',
    secure: true,
})
However, Firefox seems to be warning you about the SameSite attribute. This could be due to a few reasons: 1. If you're using sameSite: 'none', you must also set secure: true (which you are doing correctly). 2. There might be a case sensitivity issue - try using sameSite: 'Lax' with a capital 'L'. 3. There could be a bug in the version of Nuxt you're using. Since Nuxt 3.10, there's a new utility called refreshCookie that can help refresh cookie values when they change. This might be relevant if you're updating cookies and experiencing issues: Docs > Api > Utils > refreshCookie Also, recent updates to the cookie-es dependency (which Nuxt uses internally for cookie handling) have improved compatibility with SameSite attributes: - In version 1.2.1, they fixed compatibility with the sameSite type for parsing. - In version 1.2.0, they added support for parsing set-cookie headers. If you're using an older version of Nuxt, you might want to update to the latest version to benefit from these improvements. If the issue persists, you could try setting the cookie directly using H3's setCookie utility in a server route, which gives you more direct control over the cookie headers: 
import { defineEventHandler, setCookie } from "h3";

export default defineEventHandler(async (event) => {
  setCookie(event, "token", "value", { 
    sameSite: "lax",
    secure: true 
  });
  // rest of your handler
});
import { defineEventHandler, setCookie } from "h3";

export default defineEventHandler(async (event) => {
  setCookie(event, "token", "value", { 
    sameSite: "lax",
    secure: true 
  });
  // rest of your handler
});
The warning in Firefox is primarily informational - it's letting you know about upcoming changes in how browsers handle cookies without proper SameSite attributes. Since Google Chrome is not showing warnings, it suggests the cookie is being set correctly but Firefox might be more strict in its implementation or warnings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?