feat(config): rename development indicator

maevsi · Oct 5, 2022 · 8151fe0 · 8151fe0
1 parent 6190749
commit 8151fe0
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 42 deletions.
diff --git a/nuxt/components/_/ImageUploadGallery.vue b/nuxt/components/_/ImageUploadGallery.vue
@@ -162,6 +162,7 @@ export default defineComponent({
     const { t } = useI18n()
     const store = useMaevsiStore()
     const TUSD_FILES_URL = useTusdFilesUrl()
+    const config = useRuntimeConfig()
 
     const { executeMutation: executeMutationUploadCreate } =
       useUploadCreateMutation()
@@ -327,7 +328,7 @@ export default defineComponent({
 
             data.uppy = new Uppy({
               id: 'profile-picture',
-              debug: process.env.NODE_ENV !== 'production',
+              debug: config.public.isInDevelopment,
               restrictions: {
                 maxFileSize: 1048576,
                 maxNumberOfFiles: 1,

diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
@@ -152,7 +152,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      dev: process.env.NODE_ENV !== 'production',
+      isInDevelopment: process.env.NODE_ENV !== 'production',
       // 'google-adsense': {
       //   id: process.env.GOOGLE_ADSENSE_ID,
       //   analyticsDomainName: process.env.GOOGLE_ANALYTICS_DOMAIN,

diff --git a/nuxt/pages/task/event/unlock.vue b/nuxt/pages/task/event/unlock.vue
@@ -159,7 +159,7 @@ export default defineComponent({
         invitationCode:
           route.query.ic === undefined ? undefined : route.query.ic,
       },
-      isDevelopmentActive: config.public.dev,
+      isDevelopmentActive: config.public.isInDevelopment,
       isFormSent: false,
       routeQueryIc: route.query.ic,
       title: t('title'),

diff --git a/nuxt/plugins/urql.ts b/nuxt/plugins/urql.ts
@@ -90,7 +90,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         (process.env.NUXT_ENV_STACK_DOMAIN || 'maevsi.test') +
         '/graphql',
     exchanges: [
-      ...(process.env.NODE_ENV === 'production' ? [] : [devtoolsExchange]),
+      ...(config.public.isInDevelopment ? [devtoolsExchange] : []),
       dedupExchange,
       cache,
       ssr, // add `ssr` before `fetchExchange`

diff --git a/nuxt/server/middleware/headers.ts b/nuxt/server/middleware/headers.ts
@@ -1,46 +1,57 @@
 import { appendHeader, defineEventHandler } from 'h3'
 
-import { STACK_DOMAIN } from '~/plugins/util/constants'
+function getCsp(host: string): Record<string, Array<string>> {
+  const hostName = host.replace(/:[0-9]+$/, '')
+  const config = useRuntimeConfig()
 
-const csp: Record<string, Array<string>> = {
-  'base-uri': ["'none'"], // Mozilla Observatory.
-  'connect-src': [
-    `http://localhost:24678/_nuxt/`, // Nuxt development
-    `ws://localhost:24678/_nuxt/`, // Nuxt development
-    `https://${STACK_DOMAIN}/cdn-cgi/rum`, // Cloudflare real user management (browser insights)
-    `https://postgraphile.${STACK_DOMAIN}`,
-    'https://www.google-analytics.com',
-  ],
-  'default-src': ["'none'"],
-  'font-src': ["'self'"],
-  'form-action': ["'none'"], // Mozilla Observatory.
-  'frame-ancestors': ["'none'"], // Mozilla Observatory.
-  'img-src': [
-    'blob:',
-    'data:',
-    `https://tusd.${STACK_DOMAIN}`,
-    'https://www.google-analytics.com',
-    'https://www.gravatar.com/avatar/',
-    "'self'",
-  ],
-  'manifest-src': ["'self'"],
-  'prefetch-src': ["'self'"],
-  'report-uri': ['https://dargmuesli.report-uri.com/r/d/csp/enforce'],
-  // TODO: https://stackoverflow.com/questions/62081028/this-document-requires-trustedscripturl-assignment
-  // 'require-trusted-types-for': ["'script'"], // csp-evaluator // https://github.com/maevsi/maevsi/issues/830
-  'script-src': [
-    'blob:',
-    "'self'",
-    'https://static.cloudflareinsights.com',
-    'https://www.google-analytics.com/analytics.js',
+  return {
+    'base-uri': ["'none'"], // Mozilla Observatory.
+    'connect-src': [
+      ...(config.public.isInDevelopment
+        ? [
+            `http://${hostName}:24678/_nuxt/`,
+            `https://${hostName}:24678/_nuxt/`,
+            `ws://${hostName}:24678/_nuxt/`,
+            `wss://${hostName}:24678/_nuxt/`,
+          ]
+        : [
+            `https://${host}/cdn-cgi/rum`, // Cloudflare real user management (browser insights)
+          ]),
+      `https://postgraphile.${host}`,
+      'https://www.google-analytics.com',
+    ],
+    'default-src': ["'none'"],
+    'font-src': ["'self'"],
+    'form-action': ["'self'"], // Mozilla Observatory: "none".
+    'frame-ancestors': ["'none'"], // Mozilla Observatory.
+    'img-src': [
+      'blob:',
+      'data:',
+      `https://tusd.${host}`,
+      'https://www.google-analytics.com',
+      'https://www.gravatar.com/avatar/',
+      "'self'",
+    ],
+    'manifest-src': ["'self'"],
+    'prefetch-src': ["'self'"],
+    'report-uri': ['https://dargmuesli.report-uri.com/r/d/csp/enforce'],
+    // TODO: https://stackoverflow.com/questions/62081028/this-document-requires-trustedscripturl-assignment
+    // 'require-trusted-types-for': ["'script'"], // csp-evaluator // https://github.com/maevsi/maevsi/issues/830
+    'script-src': [
+      'blob:',
+      "'self'",
+      'https://static.cloudflareinsights.com',
+      'https://www.google-analytics.com/analytics.js',
 
-    "'unsafe-inline'", // https://github.com/unjs/nitro/issues/81
-    "'unsafe-eval'", // https://github.com/unjs/nitro/issues/81
-  ],
-  'style-src': ["'self'", "'unsafe-inline'"], // Tailwind
+      "'unsafe-inline'", // https://github.com/unjs/nitro/issues/81
+      "'unsafe-eval'", // https://github.com/unjs/nitro/issues/81
+    ],
+    'style-src': ["'self'", "'unsafe-inline'"], // Tailwind
+  }
 }
 
-function getCspAsString(): string {
+function getCspAsString(host: string): string {
+  const csp = getCsp(host)
   let result = ''
 
   Object.keys(csp).forEach((key) => {
@@ -51,7 +62,9 @@ function getCspAsString(): string {
 }
 
 export default defineEventHandler((event) => {
-  appendHeader(event, 'Content-Security-Policy', getCspAsString())
+  const host = useHost()
+
+  appendHeader(event, 'Content-Security-Policy', getCspAsString(host))
   // appendHeader(event, 'Cross-Origin-Embedder-Policy', 'require-corp') // https://stackoverflow.com/questions/71904052/getting-notsameoriginafterdefaultedtosameoriginbycoep-error-with-helmet
   appendHeader(event, 'Cross-Origin-Opener-Policy', 'same-origin')
   appendHeader(event, 'Cross-Origin-Resource-Policy', 'same-origin')