@dargmuesli/nuxt-vio 11.2.6 → 12.0.0

package/app.config.ts

@@ -1,20 +1,6 @@
 export default defineAppConfig({
   vio: {
     pages: undefined,
-    server: {
-      middleware: {
-        headers: {
-          csp: {
-            default: {
-              NEL: '\'{"report_to":"default","max_age":31536000,"include_subdomains":true}\'',
-              'Report-To':
-                '\'{"group":"default":"max_age":31536000:"endpoints":[{"url":"https://dargmuesli.report-uri.com/a/d/g"}]:"include_subdomains":true}\'',
-            },
-            production: {} as Record<string, string>,
-          },
-        },
-      },
-    },
     themeColor: undefined,
   },
 })
@@ -66,12 +52,7 @@ declare module 'nuxt/schema' {
       }
       server?: {
         middleware: {
-          headers: {
-            csp: {
-              default: Record<string, string>
-              production: Record<string, string>
-            }
-          }
+          headers: Record<string, string>
         }
       }
       themeColor?: string

package/composables/dateTime.ts

@@ -0,0 +1,11 @@
+import type { Dayjs } from 'dayjs'
+
+export const useDateTime = () => {
+  const { $dayjs, ssrContext } = useNuxtApp()
+  const timezone = ssrContext
+    ? ssrContext.event.context.$timezone
+    : getTimezone()
+
+  return (dateTime?: string | number | Dayjs | Date | null) =>
+    $dayjs(dateTime).tz(timezone)
+}

package/composables/useAppLayout.ts

@@ -10,8 +10,8 @@ export const useAppLayout = () => {
     },
   })
 
-  // TODO: convert to `useServerHeadSafe` (https://github.com/harlan-zw/nuxt-seo-kit/issues/98)
-  useSeoMeta({
+  // TODO: convert to `useServerHeadSafe` (https://github.com/unjs/unhead/issues/221)
+  useServerSeoMeta({
     titleTemplate: (title) =>
       TITLE_TEMPLATE({
         siteName: siteConfig.name,

package/nuxt.config.ts

@@ -9,6 +9,7 @@ import {
   TIMEZONE_COOKIE_NAME,
   GTAG_COOKIE_ID,
   VIO_NUXT_BASE_CONFIG,
+  GET_CSP,
 } from './utils/constants'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
@@ -29,9 +30,6 @@ export default defineNuxtConfig(
         },
       },
       devtools: {
-        enabled:
-          process.env.NODE_ENV === 'development' &&
-          !process.env.NUXT_PUBLIC_VIO_IS_TESTING,
         timeline: {
           enabled: true,
         },
@@ -48,31 +46,42 @@ export default defineNuxtConfig(
         '@nuxtjs/tailwindcss',
         '@pinia/nuxt',
         'nuxt-gtag',
+        (_options, nuxt) => {
+          if (nuxt.options._generate) {
+            nuxt.options.features.inlineStyles = false
+          }
+        },
         // nuxt-security: remove invalid `'none'`s and duplicates
         (_options, nuxt) => {
-          const nuxtConfigSecurity = nuxt.options.security
+          const nuxtConfigSecurityHeaders = nuxt.options.security.headers
 
           if (
-            typeof nuxtConfigSecurity.headers !== 'boolean' &&
-            nuxtConfigSecurity.headers.contentSecurityPolicy &&
-            typeof nuxtConfigSecurity.headers.contentSecurityPolicy !==
-              'boolean' &&
-            typeof nuxtConfigSecurity.headers.contentSecurityPolicy !== 'string'
+            typeof nuxtConfigSecurityHeaders !== 'boolean' &&
+            nuxtConfigSecurityHeaders.contentSecurityPolicy
           ) {
-            for (const [key, value] of Object.entries(
-              nuxtConfigSecurity.headers.contentSecurityPolicy,
-            )) {
+            if (nuxt.options._generate) {
+              nuxtConfigSecurityHeaders.contentSecurityPolicy = defu(
+                {
+                  'script-src-elem': [
+                    "'unsafe-inline'", // nuxt-color-mode (https://github.com/nuxt-modules/color-mode/issues/266), runtimeConfig (static)
+                  ],
+                },
+                GET_CSP(SITE_URL),
+                nuxtConfigSecurityHeaders.contentSecurityPolicy,
+              )
+            }
+
+            const csp = nuxtConfigSecurityHeaders.contentSecurityPolicy
+
+            for (const [key, value] of Object.entries(csp)) {
               if (!Array.isArray(value)) continue
 
               const valueFiltered = value.filter((x) => x !== "'none'")
 
               if (valueFiltered.length) {
-                ;(
-                  nuxtConfigSecurity.headers.contentSecurityPolicy as Record<
-                    string,
-                    unknown
-                  >
-                )[key] = [...new Set(valueFiltered)]
+                ;(csp as Record<string, unknown>)[key] = [
+                  ...new Set(valueFiltered),
+                ]
               }
             }
           }
@@ -81,32 +90,24 @@ export default defineNuxtConfig(
       ],
       nitro: {
         compressPublicAssets: true,
-        experimental: {
-          openAPI: process.env.NODE_ENV === 'development',
-        },
       },
       runtimeConfig: {
         public: {
-          i18n: {
-            ...(process.env.NODE_ENV === 'development'
-              ? {}
-              : { baseUrl: SITE_URL }),
+          site: {
+            url: SITE_URL,
           },
           vio: {
-            isInProduction: process.env.NODE_ENV === 'production',
             isTesting: false,
           },
         },
       },
-      typescript: {
-        shim: false,
-        strict: true,
-        // tsConfig: {
-        //   compilerOptions: {
-        //     noErrorTruncation: true,
-        //   },
-        // },
-      },
+      // typescript: {
+      //   tsConfig: {
+      //     compilerOptions: {
+      //       noErrorTruncation: true,
+      //     },
+      //   },
+      // },
 
       // modules
       colorMode: {
@@ -160,9 +161,7 @@ export default defineNuxtConfig(
       },
       gtag: {
         config: {
-          cookie_flags: `samesite=strict${
-            process.env.NODE_ENV === 'production' ? ';secure' : ''
-          }`,
+          cookie_flags: 'samesite=strict',
         },
         enabled: false,
         initCommands: [
@@ -195,164 +194,43 @@ export default defineNuxtConfig(
       },
       security: {
         headers: {
-          contentSecurityPolicy: defu(
-            {
-              // Cloudflare
-              ...(process.env.NODE_ENV === 'production'
-                ? {
-                    'connect-src': ['https://cloudflareinsights.com'],
-                    'script-src': ['https://static.cloudflareinsights.com'], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-                  }
-                : {}),
-            },
-            {
-              // Google Analytics 4 (https://developers.google.com/tag-platform/tag-manager/web/csp)
-              'connect-src': [
-                'https://*.analytics.google.com',
-                'https://*.google-analytics.com',
-                'https://*.googletagmanager.com',
-              ],
-              'img-src': [
-                'https://*.google-analytics.com',
-                'https://*.googletagmanager.com',
-              ],
-              'script-src': ['https://*.googletagmanager.com'], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-            },
-            {
-              // vio
-              'connect-src': ["'self'"], // `${SITE_URL}/api/healthcheck`
-              'manifest-src': [`${SITE_URL}/site.webmanifest`],
-              'script-src': [
-                'https://polyfill.io/v3/polyfill.min.js', // ESLint plugin compat
-              ], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-            },
-            {
-              // @nuxt/devtools
-              ...(process.env.NODE_ENV === 'development'
-                ? {
-                    'frame-src': [
-                      'http://localhost:3000/__nuxt_devtools__/client/',
-                    ],
-                  }
-                : {}),
-            },
-            {
-              // nuxt-i18n
-              ...(process.env.NODE_ENV === 'development'
-                ? {}
-                : {
-                    'script-src': ["'self'"], // 'http://localhost:3000/_nuxt/i18n.config.*.js' // TOD: add with subresource integrity?
-                  }),
-            },
-            {
-              // nuxt-link-checker
-              ...(process.env.NODE_ENV === 'development'
-                ? {
-                    'connect-src': ["'self'"], // 'http://localhost:3000/api/__link_checker__/inspect'
-                  }
-                : {}),
-            },
-            {
-              // nuxt-og-image
-              ...(process.env.NODE_ENV === 'development'
-                ? {
-                    'font-src': ['https://fonts.gstatic.com/s/inter/'],
-                    'frame-ancestors': ["'self'"],
-                    'frame-src': ["'self'"],
-                    'script-src': ['https://cdn.tailwindcss.com/'], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-                    'style-src': [
-                      // TODO: replace with `style-src-elem` once Webkit supports it
-                      'https://cdn.jsdelivr.net/npm/gardevoir https://fonts.googleapis.com/css2',
-                    ],
-                  }
-                : {}),
-            },
-            {
-              // nuxt-simple-sitemap
-              'script-src': [`${SITE_URL}/__sitemap__/style.xsl`], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-            },
-            {
-              // nuxt
-              'connect-src': [
-                ...(process.env.NODE_ENV === 'development'
-                  ? [
-                      'http://localhost:3000/_nuxt/', // hot reload
-                      'https://localhost:3000/_nuxt/', // hot reload
-                      'ws://localhost:3000/_nuxt/', // hot reload
-                      'wss://localhost:3000/_nuxt/', // hot reload
-                    ]
-                  : ["'self'"]), // build metadata and payloads
-              ],
-              'img-src': [
-                "'self'", // TODO: replace with `"'nonce-{{nonce}}'",`
-                'data:', // external link icon
-              ],
-              'script-src': ["'nonce-{{nonce}}'"], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-              'style-src': [
-                // TODO: replace with `style-src-elem` once Webkit supports it
-                "'self'", // TODO: replace with `"'nonce-{{nonce}}'",` (https://github.com/vitejs/vite/pull/11864)
-                "'unsafe-inline'", // TODO: replace with `"'nonce-{{nonce}}'",` (https://github.com/vitejs/vite/pull/11864)
-              ],
-            },
-            {
-              // nitro
-              'connect-src': ["'self'"] /* swagger
-              'http://localhost:3000/_nitro/openapi.json',
-              'http://localhost:3000/_nitro/swagger', */,
-              'script-src': [
-                'https://cdn.jsdelivr.net/npm/', // swagger // TODO: increase precision (https://github.com/unjs/nitro/issues/1757)
-              ], // TODO: replace with `script-src-elem` once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-              'style-src': [
-                'https://cdn.jsdelivr.net/npm/', // swagger // TODO: increase precision (https://github.com/unjs/nitro/issues/1757)
-              ],
-            },
-            {
-              // base
-              'base-uri': ["'none'"], // does not fallback to `default-src`
-              'child-src': false as const,
-              'connect-src': false as const,
-              'default-src': ["'none'"],
-              'font-src': false as const,
-              'form-action': ["'none'"], // does not fallback to `default-src`
-              'frame-ancestors': ["'none'"], // does not fallback to `default-src`
-              'frame-src': false as const,
-              'img-src': false as const,
-              'media-src': false as const,
-              'navigate-to': false as const,
-              'object-src': false as const,
-              'prefetch-src': false as const,
-              'report-to': undefined,
-              'report-uri': false as const,
-              // TODO: evaluate header (https://github.com/maevsi/maevsi/issues/830) // https://stackoverflow.com/questions/62081028/this-document-requires-trustedscripturl-assignment
-              // 'require-trusted-types-for': ["'script'"], // csp-evaluator
-              sandbox: false as const,
-              'script-src': false as const,
-              'script-src-attr': false as const, // TODO: enable once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-attr)
-              'script-src-elem': false as const, // TODO: enable once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_script-src-elem)
-              'style-src': false as const,
-              'style-src-attr': false as const, // TODO: enable once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_style-src-attr)
-              'style-src-elem': false as const, // TODO: enable once Webkit supports it (https://caniuse.com/mdn-http_headers_content-security-policy_style-src-elem)
-              'upgrade-insecure-requests': false, // TODO: set to `process.env.NODE_ENV === 'production'` or `true` when tests run on https
-              'worker-src': false as const,
-            },
-          ),
-          crossOriginEmbedderPolicy: false, // https://stackoverflow.com/questions/71904052/getting-notsameoriginafterdefaultedtosameoriginbycoep-error-with-helmet
-          strictTransportSecurity:
-            process.env.NODE_ENV === 'production'
-              ? {
-                  maxAge: 31536000,
-                  includeSubdomains: true,
-                  preload: true,
-                }
-              : false,
+          contentSecurityPolicy: {
+            'base-uri': ["'none'"], // does not fallback to `default-src`
+            'child-src': false as const,
+            'connect-src': false as const,
+            'default-src': ["'none'"],
+            'font-src': false as const,
+            'form-action': ["'none'"], // does not fallback to `default-src`
+            'frame-ancestors': ["'none'"], // does not fallback to `default-src`
+            'frame-src': false as const,
+            'img-src': false as const,
+            'media-src': false as const,
+            'navigate-to': false as const,
+            'object-src': false as const,
+            'prefetch-src': false as const,
+            'report-to': undefined,
+            'report-uri': false as const,
+            // 'require-trusted-types-for': ["'script'"], // csp-evaluator // TODO: wait for trusted type support in vue (https://github.com/vuejs/core/pull/10844)
+            sandbox: false as const,
+            'script-src': false as const,
+            'script-src-attr': false as const,
+            'script-src-elem': false as const,
+            'style-src': false as const,
+            'style-src-attr': false as const,
+            'style-src-elem': false as const,
+            'upgrade-insecure-requests': false, // TODO: set to `process.env.NODE_ENV === 'production'` or `true` when tests run on https
+            'worker-src': false as const,
+          },
           xXSSProtection: '1; mode=block', // TODO: set back to `0` once CSP does not use `unsafe-*` anymore (https://github.com/maevsi/maevsi/issues/1047)
         },
+        ssg: {
+          hashStyles: true,
+        },
       },
       seo: {
         splash: false,
       },
       site: {
-        debug: process.env.NODE_ENV === 'development',
         id: 'vio',
         url: SITE_URL,
       },
@@ -365,9 +243,58 @@ export default defineNuxtConfig(
 
       // environments
       $development: {
+        devtools: {
+          enabled: !process.env.NUXT_PUBLIC_VIO_IS_TESTING,
+        },
+        nitro: {
+          experimental: {
+            openAPI: true,
+          },
+        },
+        runtimeConfig: {
+          public: {
+            vio: {
+              isInProduction: false,
+            },
+          },
+        },
+
         // modules
         security: {
-          rateLimiter: false, // TODO: enable when nuxt-link-checker bundles requests (https://github.com/harlan-zw/nuxt-link-checker/issues/21)
+          headers: {
+            crossOriginEmbedderPolicy: 'unsafe-none',
+            strictTransportSecurity: false, // prevent endless reload in Chrome
+          },
+        },
+        site: {
+          debug: true,
+        },
+      },
+      $production: {
+        runtimeConfig: {
+          public: {
+            i18n: {
+              baseUrl: SITE_URL,
+            },
+            vio: {
+              isInProduction: true,
+            },
+          },
+        },
+
+        // modules
+        gtag: {
+          config: {
+            cookie_flags: 'samesite=strict;secure',
+          },
+        },
+        security: {
+          headers: {
+            strictTransportSecurity: {
+              maxAge: 31536000,
+              preload: true,
+            },
+          },
         },
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "11.2.6",
+  "version": "12.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dargmuesli/vio.git"
@@ -87,6 +87,7 @@
     "prettier": "3.2.5",
     "prettier-plugin-tailwindcss": "0.5.14",
     "serve": "14.2.3",
+    "sharp": "0.33.3",
     "stylelint": "16.5.0",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "36.0.0",
@@ -95,8 +96,7 @@
     "ufo": "1.5.3",
     "unhead": "1.9.10",
     "vue": "3.4.27",
-    "vue-router": "4.3.2",
-    "vue-tsc": "2.0.17"
+    "vue-router": "4.3.2"
   },
   "peerDependencies": {
     "nuxt": "3.11.2",

package/server/middleware/headers.ts

@@ -1,29 +1,9 @@
-import type { H3Event } from 'h3'
 import type { AppConfig } from 'nuxt/schema'
 
 export default defineEventHandler(async (event) => {
-  setRequestHeader(event, TIMEZONE_HEADER_KEY, await getTimezone(event))
-  setResponseHeaders(event)
-})
-
-const setRequestHeader = (event: H3Event, name: string, value?: string) => {
-  event.node.req.headers[name] = value
-}
-
-const setResponseHeaders = (event: H3Event) => {
   const config = useAppConfig() as AppConfig
 
-  for (const entry of Object.entries(
-    config.vio.server.middleware.headers.csp.default,
-  )) {
+  for (const entry of Object.entries(config.vio.server.middleware.headers)) {
     appendHeader(event, entry[0], entry[1])
   }
-
-  if (process.env.NODE_ENV === 'production') {
-    for (const entry of Object.entries(
-      config.vio.server.middleware.headers.csp.production,
-    )) {
-      appendHeader(event, entry[0], entry[1])
-    }
-  }
-}
+})

package/server/middleware/timezone.ts

@@ -0,0 +1,9 @@
+export default defineEventHandler(async (event) => {
+  event.context.$timezone = await getTimezoneServer(event)
+})
+
+declare module 'h3' {
+  interface H3EventContext {
+    $timezone?: string
+  }
+}

package/server/plugins/security.ts

@@ -0,0 +1,55 @@
+import { defu } from 'defu'
+import type { NuxtOptions } from 'nuxt/schema'
+import { GET_CSP } from '../../utils/constants'
+
+// remove invalid `'none'`s and duplicates
+const cleanupCsp = (
+  nuxtSecurityConfiguration: Partial<NuxtOptions['security']>,
+) => {
+  if (
+    nuxtSecurityConfiguration.headers &&
+    typeof nuxtSecurityConfiguration.headers !== 'boolean' &&
+    nuxtSecurityConfiguration.headers.contentSecurityPolicy
+  ) {
+    const csp = nuxtSecurityConfiguration.headers.contentSecurityPolicy
+
+    for (const [key, value] of Object.entries(csp)) {
+      if (!Array.isArray(value)) continue
+
+      const valueFiltered = value.filter((x) => x !== "'none'")
+
+      if (valueFiltered.length) {
+        ;(csp as Record<string, unknown>)[key] = [...new Set(valueFiltered)]
+      }
+    }
+  }
+
+  return nuxtSecurityConfiguration
+}
+
+export default defineNitroPlugin((nitroApp) => {
+  // TODO: migrate to nuxt-security (https://github.com/Baroshem/nuxt-security/discussions/454)
+  if (import.meta.dev) {
+    nitroApp.hooks.hook('render:html', (html, { event }) => {
+      html.head.push(
+        `<meta property="csp-nonce" nonce="${event.context.security.nonce}">`,
+      )
+    })
+  }
+
+  nitroApp.hooks.hook('nuxt-security:routeRules', async (routeRules) => {
+    const runtimeConfig = useRuntimeConfig()
+    const siteUrl = runtimeConfig.public.site.url
+
+    routeRules['/**'] = cleanupCsp(
+      defu(
+        {
+          headers: {
+            contentSecurityPolicy: GET_CSP(siteUrl),
+          },
+        },
+        routeRules['/**'],
+      ),
+    )
+  })
+})

package/server/utils/timezone.ts

@@ -0,0 +1,32 @@
+import type { H3Event } from 'h3'
+
+import { TIMEZONE_COOKIE_NAME } from '../../utils/constants'
+
+// TODO: rename to `getTimezone` (https://github.com/nuxt/cli/issues/266)
+export const getTimezoneServer = async (event: H3Event) => {
+  const timezoneBySsr = event.context.$timezone
+
+  if (timezoneBySsr) return timezoneBySsr
+
+  const timezoneByCookie = getCookie(event, TIMEZONE_COOKIE_NAME)
+
+  if (timezoneByCookie) return timezoneByCookie
+
+  const ip = event.node.req.headers['x-real-ip']
+
+  if (ip && !Array.isArray(ip)) {
+    const timezoneByIpApi = await getTimezoneByIpApi(ip)
+
+    if (timezoneByIpApi) return timezoneByIpApi
+  }
+}
+
+export const getTimezoneByIpApi = async (ip: string) => {
+  const ipApiResult = await $fetch<{ timezone: string }>(
+    `http://ip-api.com/json/${ip}`,
+  ).catch(() => {})
+
+  if (ipApiResult) {
+    return ipApiResult.timezone
+  }
+}

package/utils/autoImport.ts

@@ -0,0 +1,10 @@
+export const getTimezone = () =>
+  useNuxtApp().ssrContext?.event.context.$timezone ||
+  useCookie(TIMEZONE_COOKIE_NAME, {
+    httpOnly: false,
+    sameSite: 'strict',
+    secure: !import.meta.dev,
+  }).value ||
+  import.meta.client
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    : undefined

package/utils/constants.ts

@@ -1,4 +1,5 @@
 import { helpers } from '@vuelidate/validators'
+import { defu } from 'defu'
 
 export const SITE_NAME = 'Vio'
 
@@ -13,6 +14,115 @@ export const CACHE_VERSION = 'bOXMwoKlJr'
 export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
 export const COOKIE_SEPARATOR = '_'
 export const FETCH_RETRY_AMOUNT = 3
+export const GET_CSP = (siteUrl: string) =>
+  defu(
+    {
+      // Cloudflare
+      ...(process.env.NODE_ENV === 'production'
+        ? {
+            'connect-src': ['https://cloudflareinsights.com'],
+            'script-src-elem': ['https://static.cloudflareinsights.com'],
+          }
+        : {}),
+    },
+    {
+      // Google Analytics 4 (https://developers.google.com/tag-platform/tag-manager/web/csp)
+      'connect-src': [
+        'https://*.analytics.google.com',
+        'https://*.google-analytics.com',
+        'https://*.googletagmanager.com',
+      ],
+      'img-src': [
+        'https://*.google-analytics.com',
+        'https://*.googletagmanager.com',
+      ],
+      'script-src-elem': ['https://*.googletagmanager.com'],
+    },
+    {
+      // vio
+      'manifest-src': [`${siteUrl}/site.webmanifest`],
+      // 'script-src-elem': [
+      //   'https://polyfill.io/v3/polyfill.min.js', // ESLint plugin compat
+      // ],
+    },
+    {
+      // nuxt-link-checker
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            'connect-src': [`${siteUrl}/api/__link_checker__/inspect`],
+          }
+        : {}),
+    },
+    {
+      // nuxt-og-image
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            'connect-src': [`${siteUrl}/__og-image__/`],
+          }
+        : {}),
+    },
+    {
+      // nuxt-schema-org
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            'connect-src': [`${siteUrl}/__schema-org__/debug.json`],
+          }
+        : {}),
+    },
+    {
+      // nuxt-simple-robots
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            'connect-src': [
+              `${siteUrl}/__robots__/debug.json`,
+              `${siteUrl}/__robots__/debug-path.json`,
+            ],
+          }
+        : {}),
+    },
+    {
+      // nuxt-simple-sitemap
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            'connect-src': [`${siteUrl}/__sitemap__/debug.json`],
+          }
+        : {}),
+    },
+    {
+      // nuxt-site-config
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            'connect-src': [`${siteUrl}/__site-config__/debug.json`],
+          }
+        : {}),
+    },
+    {
+      // nuxt
+      'connect-src': [
+        "'self'", // e.g. `/_nuxt/builds/meta/`, `/_payload.json`, `/privacy-policy/_payload.json`
+        ...(process.env.NODE_ENV === 'development'
+          ? [
+              'http://localhost:3000/_nuxt/', // hot reload
+              'https://localhost:3000/_nuxt/', // hot reload
+              'ws://localhost:3000/_nuxt/', // hot reload
+              'wss://localhost:3000/_nuxt/', // hot reload
+            ] // TODO: generalize for different ports
+          : []),
+      ],
+      'img-src': [
+        "'self'", // e.g. favicon
+        'data:', // external link icon
+      ],
+      'script-src-elem': [
+        "'nonce-{{nonce}}'",
+        `${siteUrl}/_nuxt/`, // bundle
+      ],
+      'style-src': [
+        "'nonce-{{nonce}}'",
+        "'self'", // TODO: `${siteUrl}/_nuxt/`, // bundle
+      ], // TODO: use `style-src-elem` once Playwright WebKit supports it
+    },
+  )
 export const GTAG_COOKIE_ID = 'ga'
 export const I18N_MODULE_CONFIG = {
   langDir: 'locales',

package/utils/networking.ts

@@ -1,10 +1,9 @@
 import type { CombinedError } from '@urql/core'
-import { type H3Event, getCookie } from 'h3'
+import { type H3Event } from 'h3'
 
 import { type Ref } from 'vue'
 
 import type { ApiData, BackendError } from '../types/api'
-import { TIMEZONE_COOKIE_NAME } from './constants'
 
 export const getApiDataDefault = (): ApiData =>
   computed(() =>
@@ -109,23 +108,3 @@ export const getServiceHref = ({
     return `https://${nameSubdomainString}${getDomainTldPort(host)}`
   }
 }
-
-export const getTimezone = async (event: H3Event) => {
-  const timezoneCookie = getCookie(event, TIMEZONE_COOKIE_NAME)
-
-  if (timezoneCookie) {
-    return timezoneCookie
-  }
-
-  if (event.node.req.headers['x-real-ip']) {
-    const ipApiResult = await $fetch<{ timezone: string }>(
-      `http://ip-api.com/json/${event.node.req.headers['x-real-ip']}`,
-    ).catch(() => {})
-
-    if (ipApiResult) {
-      return ipApiResult.timezone
-    }
-  }
-
-  return undefined
-}

package/composables/useDateTime.ts

@@ -1,15 +0,0 @@
-import type { Dayjs } from 'dayjs'
-
-export const useDateTime = () => {
-  const { $dayjs, ssrContext } = useNuxtApp()
-  const timezoneCookie = useCookie(TIMEZONE_COOKIE_NAME)
-
-  const timezoneHeader = ssrContext?.event.node.req.headers[TIMEZONE_HEADER_KEY]
-  const timezone =
-    timezoneHeader && !Array.isArray(timezoneHeader)
-      ? timezoneHeader
-      : timezoneCookie.value || undefined
-
-  return (dateTime?: string | number | Dayjs | Date | null) =>
-    $dayjs(dateTime).tz(timezone)
-}

package/server/utils/util.ts

@@ -1,2 +0,0 @@
-export { TIMEZONE_HEADER_KEY } from '../../utils/constants'
-export { getTimezone } from '../../utils/networking'