feat: add setting to use cross-origin cookie for "detectBrowserLocale"

docs/browser-language-detection.md

@@ -69,3 +69,17 @@ To redirect the user every time they visit the app and keep their selected choic
   }
 }]
 ```
+
+To use the cookie within a cross-origin environment (e.g. in an iFrame), you can set `crossOriginCookie: true`. This will change the cookie settings from `SameSite=Lax` to `SameSite=None; Secure`.
+
+```js
+// nuxt.config.js
+
+['nuxt-i18n', {
+  // ...
+  detectBrowserLanguage: {
+    useCookie: true,
+    crossOriginCookie: true
+  }
+}]
+```

src/helpers/constants.js

@@ -32,6 +32,7 @@ exports.DEFAULT_OPTIONS = {
   rootRedirect: null,
   detectBrowserLanguage: {
     useCookie: true,
+    crossOriginCookie: false,
     cookieDomain: null,
     cookieKey: 'i18n_redirected',
     alwaysRedirect: false,

src/templates/plugin.main.js

@@ -62,7 +62,7 @@ export default async (context) => {
     })
   }
 
-  const { useCookie, cookieKey, cookieDomain } = detectBrowserLanguage
+  const { useCookie, cookieKey, cookieDomain, crossOriginCookie } = detectBrowserLanguage
 
   const loadAndSetLocale = async (newLocale, { initialSetup = false } = {}) => {
     // Abort if different domains option enabled
@@ -213,7 +213,7 @@ export default async (context) => {
     i18n.differentDomains = differentDomains
     i18n.beforeLanguageSwitch = beforeLanguageSwitch
     i18n.onLanguageSwitched = onLanguageSwitched
-    i18n.setLocaleCookie = locale => setLocaleCookie(locale, res, { useCookie, cookieDomain, cookieKey })
+    i18n.setLocaleCookie = locale => setLocaleCookie(locale, res, { useCookie, cookieDomain, cookieKey, crossOriginCookie })
     i18n.getLocaleCookie = () => getLocaleCookie(req, { useCookie, cookieKey, localeCodes })
     i18n.setLocale = (locale) => loadAndSetLocale(locale)
     i18n.__baseUrl = app.i18n.__baseUrl

src/templates/utils-common.js

@@ -170,17 +170,18 @@ export const getLocaleCookie = (req, { useCookie, cookieKey, localeCodes }) => {
 /**
  * @param {string} locale
  * @param {object} [res]
- * @param {{ useCookie: boolean, cookieDomain: string, cookieKey: string}} options
+ * @param {{ useCookie: boolean, cookieDomain: string, cookieKey: string, crossOriginCookie: boolean}} options
  */
-export const setLocaleCookie = (locale, res, { useCookie, cookieDomain, cookieKey }) => {
+export const setLocaleCookie = (locale, res, { useCookie, cookieDomain, cookieKey, crossOriginCookie }) => {
   if (!useCookie) {
     return
   }
   const date = new Date()
   const cookieOptions = {
     expires: new Date(date.setDate(date.getDate() + 365)),
     path: '/',
-    sameSite: 'lax'
+    sameSite: crossOriginCookie ? 'none' : 'lax',
+    secure: !!crossOriginCookie
   }
 
   if (cookieDomain) {

types/nuxt-i18n.d.ts

@@ -29,6 +29,7 @@ declare namespace NuxtVueI18n {
 
     interface DetectBrowserLanguageInterface {
       useCookie?: boolean
+      crossOriginCookie?: boolean
       cookieDomain?: string | null
       cookieKey?: string
       alwaysRedirect?: boolean