@dargmuesli/nuxt-vio 8.2.4 → 8.3.4

package/app.config.ts

@@ -6,27 +6,11 @@ export default defineAppConfig({
         headers: {
           csp: {
             default: {
-              'Cross-Origin-Opener-Policy': 'same-origin',
-              // 'Cross-Origin-Embedder-Policy', 'require-corp') // https://stackoverflow.com/questions/71904052/getting-notsameoriginafterdefaultedtosameoriginbycoep-error-with-helmet
-              'Cross-Origin-Resource-Policy': 'same-origin',
-              // 'Expect-CT', 'max-age=0') // deprecated (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expect-CT)
               NEL: '\'{"report_to":"default","max_age":31536000,"include_subdomains":true}\'',
-              'Origin-Agent-Cluster': '?1',
-              'Permissions-Policy': '',
-              'Referrer-Policy': 'no-referrer',
               'Report-To':
                 '\'{"group":"default":"max_age":31536000:"endpoints":[{"url":"https://dargmuesli.report-uri.com/a/d/g"}]:"include_subdomains":true}\'',
-              'X-Content-Type-Options': 'nosniff',
-              'X-DNS-Prefetch-Control': 'off',
-              'X-Download-Options': 'noopen',
-              'X-Frame-Options': 'SAMEORIGIN',
-              'X-Permitted-Cross-Domain-Policies': 'none',
-              'X-XSS-Protection': '1; mode=block', // TODO: set back to `0` once CSP does not use `unsafe-*` anymore (https://github.com/maevsi/maevsi/issues/1047)
-            },
-            production: {
-              'Strict-Transport-Security':
-                'max-age=31536000; includeSubDomains; preload',
             },
+            production: {} as Record<string, string>,
           },
         },
       },

package/components/vio/_/VioError.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>{{ `${statusCode ? `${statusCode} - ` : ''}${statusReason}` }}</h1>
+    <h1>{{ title }}</h1>
     <div>
       {{ description }}
     </div>
@@ -29,9 +29,14 @@ const props = withDefaults(defineProps<Props>(), {
 const runtimeConfig = useRuntimeConfig()
 const { locale, t } = useI18n()
 
-// computations
-const statusReason = computed(() => {
-  return status(props.statusCode, locale.value) || t('error')
+// data
+const title = `${props.statusCode ? `${props.statusCode} - ` : ''}${
+  status(props.statusCode, locale.value) || t('error')
+}`
+
+// initialization
+useHeadDefault({
+  title,
 })
 </script>
 

package/components/vio/_/VioLink.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { NuxtLinkProps } from '#app'
+import type { NuxtLinkProps } from '#app'
 
 interface Props {
   ariaLabel?: string

package/components/vio/loader/Loader.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script setup lang="ts">
-import { UnwrapRef } from 'vue'
+import type { UnwrapRef } from 'vue'
 
-import { ApiData } from '@dargmuesli/nuxt-vio/types/api'
+import type { ApiData } from '@dargmuesli/nuxt-vio/types/api'
 
 interface Props {
   api: UnwrapRef<ApiData>

package/composables/useDateTime.ts

@@ -1,4 +1,4 @@
-import { Dayjs } from 'dayjs'
+import type { Dayjs } from 'dayjs'
 
 export const useDateTime = () => {
   const { $dayjs, ssrContext } = useNuxtApp()

package/composables/useFireError.ts

@@ -1,6 +1,6 @@
 import { consola } from 'consola'
 import Swal from 'sweetalert2'
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 export const useFireError = () => {
   const { t } = useI18n()

package/error.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { NuxtError } from 'nuxt/app'
+import type { NuxtError } from 'nuxt/app'
 
 interface Props {
   error: NuxtError

package/nuxt.config.ts

@@ -43,13 +43,44 @@ export default defineNuxtConfig(
       },
       modules: [
         '@dargmuesli/nuxt-cookie-control',
+        '@nuxt/devtools',
         '@nuxt/image',
         '@nuxtjs/color-mode',
         '@nuxtjs/html-validator',
         '@nuxtjs/i18n',
         '@nuxtjs/tailwindcss',
-        '@nuxtseo/module',
         '@pinia/nuxt',
+        // nuxt-security: remove invalid `'none'`s
+        (_options, nuxt) => {
+          const nuxtConfigSecurity = nuxt.options.security
+
+          if (
+            typeof nuxtConfigSecurity.headers !== 'boolean' &&
+            nuxtConfigSecurity.headers.contentSecurityPolicy &&
+            typeof nuxtConfigSecurity.headers.contentSecurityPolicy !==
+              'boolean' &&
+            typeof nuxtConfigSecurity.headers.contentSecurityPolicy !== 'string'
+          ) {
+            for (const [key, value] of Object.entries(
+              nuxtConfigSecurity.headers.contentSecurityPolicy,
+            )) {
+              if (!Array.isArray(value)) continue
+
+              const valueFiltered = value.filter((x) => x !== "'none'")
+
+              if (valueFiltered.length) {
+                ;(
+                  nuxtConfigSecurity.headers.contentSecurityPolicy as Record<
+                    string,
+                    any
+                  >
+                )[key] = valueFiltered
+              }
+            }
+          }
+        },
+        'nuxt-security',
+        '@nuxtseo/module',
       ],
       nitro: {
         compressPublicAssets: true,
@@ -136,6 +167,146 @@ export default defineNuxtConfig(
       linkChecker: {
         failOnError: true,
       },
+      robots: {
+        credits: false,
+      },
+      security: {
+        headers: {
+          contentSecurityPolicy: defu(
+            {
+              // Cloudflare
+              ...(process.env.NODE_ENV === 'production'
+                ? {
+                    'connect-src': [`${SITE_URL}/cdn-cgi/rum`],
+                    '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': [`${SITE_URL}/site.webmanifest`],
+              'script-src-elem': [
+                'https://polyfill.io/v3/polyfill.min.js', // ESLint plugin compat
+              ],
+            },
+            {
+              // @nuxt/devtools
+              'frame-src': [
+                ...(process.env.NODE_ENV === 'development'
+                  ? ['http://localhost:3000/__nuxt_devtools__/client/']
+                  : []),
+              ],
+            },
+            {
+              // nuxt-link-checker
+              'connect-src': [
+                ...(process.env.NODE_ENV === 'development'
+                  ? ['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-elem': ['https://cdn.tailwindcss.com/'],
+                    '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-elem': [`${SITE_URL}/__sitemap__/style.xsl`],
+            },
+            {
+              // nuxt
+              'connect-src': [
+                ...(process.env.NODE_ENV === 'development'
+                  ? [
+                      'http://localhost:3000/_nuxt/', // Nuxt development
+                      'https://localhost:3000/_nuxt/', // Nuxt development
+                      'ws://localhost:3000/_nuxt/', // Nuxt development
+                      'wss://localhost:3000/_nuxt/', // Nuxt development
+                    ]
+                  : ["'self'"]), // Nuxt build metadata and payloads
+              ],
+              'img-src': [
+                "'self'", // TODO: replace with `"'nonce-{{nonce}}'",`
+                'data:', // external link icon
+              ],
+              'script-src-elem': ["'nonce-{{nonce}}'"],
+              '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)
+              ],
+            },
+            {
+              // base
+              'base-uri': ["'none'"], // does not fallback to `default-src`
+              'child-src': [],
+              'connect-src': [],
+              'default-src': ["'none'"],
+              'font-src': [],
+              'form-action': ["'none'"], // does not fallback to `default-src`
+              'frame-ancestors': ["'none'"], // does not fallback to `default-src`
+              'frame-src': [],
+              'img-src': [],
+              'media-src': [],
+              'navigate-to': [],
+              'object-src': [],
+              'prefetch-src': [],
+              'report-to': [],
+              'report-uri': [],
+              // 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: [],
+              'script-src': [],
+              'script-src-attr': [],
+              'script-src-elem': [],
+              'style-src': [],
+              'style-src-attr': [],
+              'style-src-elem': [],
+              'upgrade-insecure-requests': false, // TODO: set to `process.env.NODE_ENV === 'production'` or `true` when tests run on https
+              'worker-src': [],
+            },
+          ),
+          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,
+          xXSSProtection: '1; mode=block', // TODO: set back to `0` once CSP does not use `unsafe-*` anymore (https://github.com/maevsi/maevsi/issues/1047)
+        },
+        nonce: {
+          enabled: true,
+        },
+      },
       seo: {
         splash: false,
       },
@@ -145,6 +316,7 @@ export default defineNuxtConfig(
         url: SITE_URL,
       },
       sitemap: {
+        credits: false,
         exclude: I18N_MODULE_CONFIG.locales.map(
           (locale) =>
             `/${locale.code !== 'en' ? `${locale.code}/` : ''}api/pages/**`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "8.2.4",
+  "version": "8.3.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dargmuesli/vio.git"
@@ -37,6 +37,7 @@
     "build": "pnpm run build:node",
     "build:node": "nuxt build .playground",
     "build:static": "nuxt generate .playground",
+    "build:static:test": "cross-env NODE_ENV=production SITE_URL=http://localhost:3002 pnpm run build:static",
     "dev": "pnpm run start:dev",
     "generate": "pnpm run build:static",
     "lint:fix": "pnpm run lint:js --fix && pnpm run lint:ts --fix && pnpm run lint:style --fix",
@@ -50,6 +51,7 @@
     "start:dev": "nuxt dev .playground",
     "start:node": "node .playground/.output/server/index.mjs",
     "start:static": "serve .playground/.output/public",
+    "start:static:test": "cross-env NODE_ENV=production PORT=3002 SITE_URL=http://localhost:3002 pnpm run start:static",
     "test:e2e:docker:br": "pnpm run test:e2e:docker:build && pnpm run test:e2e:docker:run",
     "test:e2e:docker:build": "docker build -t test-e2e_base --build-arg UID=$(id -u) --build-arg GID=$(id -g) --target test-e2e_base ..",
     "test:e2e:docker:run": "docker run --rm -v \"$PWD/..:/srv/app\" -v \"$(pnpm store path):/srv/.pnpm-store\" test-e2e_base",
@@ -66,57 +68,66 @@
   },
   "dependencies": {
     "@axe-core/playwright": "4.8.1",
-    "@dargmuesli/nuxt-cookie-control": "7.0.0-beta.1",
+    "@dargmuesli/nuxt-cookie-control": "7.0.1",
     "@heroicons/vue": "2.0.18",
     "@http-util/status-i18n": "0.8.1",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.4",
-    "@nuxt/image": "1.0.0-rc.3",
+    "@nuxt/devtools": "1.0.0",
+    "@nuxt/image": "1.0.0",
     "@nuxtjs/color-mode": "3.3.0",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@nuxtjs/html-validator": "1.5.2",
-    "@nuxtjs/i18n": "8.0.0-rc.5",
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge@8.0.0-rc.5-28296269.d5d5540",
     "@nuxtjs/tailwindcss": "6.8.0",
-    "@nuxtseo/module": "2.0.0-beta.37",
+    "@nuxtseo/module": "2.0.0-beta.39",
     "@pinia/nuxt": "0.5.1",
     "@playwright/test": "1.39.0",
     "@tailwindcss/forms": "0.5.6",
     "@tailwindcss/typography": "0.5.10",
-    "@types/cookie": "0.5.2",
-    "@types/lodash-es": "4.17.9",
-    "@urql/core": "4.1.3",
+    "@types/lodash-es": "4.17.10",
+    "@unhead/vue": "1.7.4",
+    "@urql/core": "4.1.4",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "6.3.3",
     "@urql/vue": "1.1.2",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
     "clipboard": "2.0.11",
-    "cookie": "0.5.0",
+    "consola": "3.2.3",
+    "cookie-es": "1.0.0",
     "cross-env": "7.0.3",
     "dayjs": "2.0.0-alpha.4",
-    "eslint": "8.51.0",
+    "defu": "6.1.2",
+    "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-nuxt": "4.0.0",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-yml": "1.10.0",
+    "h3": "1.8.2",
     "is-https": "4.0.0",
     "jiti": "1.20.0",
     "jose": "4.15.4",
-    "lint-staged": "15.0.1",
+    "lint-staged": "15.0.2",
     "lodash-es": "4.17.21",
-    "nuxt": "3.7.4",
+    "nuxt": "3.8.0",
+    "nuxt-security": "1.0.0-rc.2",
+    "ofetch": "1.3.3",
     "pinia": "2.1.7",
     "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "0.5.6",
     "serve": "14.2.1",
-    "stylelint": "15.10.3",
+    "stylelint": "15.11.0",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-no-unsupported-browser-features": "7.0.0",
     "sweetalert2": "11.7.32",
     "tailwindcss": "3.3.3",
-    "vue": "3.3.4",
+    "ufo": "1.3.1",
+    "unhead": "1.7.4",
+    "vue": "3.3.6",
     "vue-gtag": "2.0.1",
+    "vue-router": "4.2.5",
     "vue-tsc": "1.8.19"
   },
   "peerDependencies": {

package/playwright.config.ts

@@ -87,7 +87,7 @@ export default defineConfig({
       NUXT_PUBLIC_VIO_IS_TESTING: 'true',
     },
     timeout: process.env.NODE_ENV === 'production' ? 10000 : 100000,
-    url: process.env.SITE_URL || SITE_URL,
+    url: SITE_URL,
     reuseExistingServer: !process.env.CI,
   },
 

package/server/middleware/headers.ts

@@ -1,26 +1,15 @@
 import { appendHeader, defineEventHandler } from 'h3'
 import type { H3Event } from 'h3'
-import { AppConfig } from 'nuxt/schema'
+import type { AppConfig } from 'nuxt/schema'
 
 import { TIMEZONE_HEADER_KEY } from '../../utils/constants'
 import { getTimezone } from '../../utils/networking'
 
 export default defineEventHandler(async (event) => {
   setRequestHeader(event, TIMEZONE_HEADER_KEY, await getTimezone(event))
-  // setContentSecurityPolicy(event);
   setResponseHeaders(event)
 })
 
-// const setContentSecurityPolicy = (event: H3Event) => {
-//   const config = useAppConfig();
-
-//   appendHeader(
-//     event,
-//     "Content-Security-Policy",
-//     getCspAsString(config.public.vio.server.middleware.headers.csp)
-//   );
-// };
-
 const setRequestHeader = (event: H3Event, name: string, value?: string) => {
   event.node.req.headers[name] = value
 }

package/store/auth.ts

@@ -1,4 +1,4 @@
-import { decodeJwt, JWTPayload } from 'jose'
+import { decodeJwt, type JWTPayload } from 'jose'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 

package/utils/auth.ts

@@ -1,9 +1,9 @@
 import { IncomingMessage, ServerResponse } from 'node:http'
 
 import { consola } from 'consola'
-import { parse, serialize } from 'cookie'
+import { parse, serialize } from 'cookie-es'
 import { decodeJwt } from 'jose'
-import { Store } from 'pinia'
+import type { Store } from 'pinia'
 
 import { useVioAuthStore } from '../store/auth'
 import { xhrPromise } from '../utils/networking'

package/utils/networking.ts

@@ -2,7 +2,7 @@ import { CombinedError } from '@urql/core'
 import { H3Event, getCookie } from 'h3'
 
 import { ofetch } from 'ofetch'
-import { Ref } from 'vue'
+import { type Ref } from 'vue'
 
 import type { ApiData, BackendError } from '../types/api'
 import { TIMEZONE_COOKIE_NAME } from './constants'

package/utils/utils.ts

@@ -1,4 +1,4 @@
-import { RouteLocationRaw } from '#vue-router'
+import { type RouteLocationRaw } from '#vue-router'
 
 export const append = (path: string, pathToAppend?: RouteLocationRaw) =>
   path + (path.endsWith('/') ? '' : '/') + (pathToAppend ?? '')

package/server/utils/util.ts

@@ -1,2 +0,0 @@
-export const getCspAsString = (csp = {} as Record<string, Array<string>>) =>
-  Object.keys(csp).reduce((p, c) => (p += `${c} ${csp[c].join(' ')};`), '')