Standalone favicon inlining, container hardening en CI rename

- Inline favicon als data-URI in standalone HTML via custom Vite plugin
- Kopieer favicon naar boekhouding-frontend public/ voor /favicon.ico
- Voeg security headers toe aan standalone invulhulpen nginx location
- Hernoem workflow naar "Build Containers"

Author: robbertbos

.github/workflows/build-containers.yaml

@@ -1,4 +1,4 @@
-name: Build Experimental Containers
+name: Build Containers
 
 on:
   push:

apps/standalone-form/vite.config.ts

@@ -1,16 +1,51 @@
+import { readFileSync } from 'node:fs'
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, type Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { viteSingleFile } from 'vite-plugin-singlefile'
 
+/** Inline favicon as data-URI in built HTML so the output is truly a single file. */
+function inlineFavicon(): Plugin {
+  return {
+    name: 'inline-favicon',
+    enforce: 'post',
+    generateBundle(_, bundle) {
+      // Find the favicon asset and the HTML entry
+      let faviconKey: string | undefined
+      let faviconData: Uint8Array | undefined
+      for (const [key, chunk] of Object.entries(bundle)) {
+        if (key.endsWith('.ico') && chunk.type === 'asset') {
+          faviconKey = key
+          faviconData = chunk.source as Uint8Array
+          break
+        }
+      }
+      if (!faviconKey || !faviconData) return
+
+      const base64 = Buffer.from(faviconData).toString('base64')
+
+      // Replace favicon href in HTML and remove the loose asset
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type === 'asset' && chunk.fileName.endsWith('.html')) {
+          chunk.source = (chunk.source as string).replace(
+            new RegExp(`<link rel="icon" href="[^"]*${faviconKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}"[^>]*>`),
+            `<link rel="icon" href="data:image/x-icon;base64,${base64}" />`,
+          )
+        }
+      }
+      delete bundle[faviconKey]
+    },
+  }
+}
 
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => ({
   plugins: [
     vue(),
     mode === 'development' && vueDevTools(),
+    inlineFavicon(),
     viteSingleFile(),
   ],
   base: '/',

containers/frontend/Containerfile

@@ -26,6 +26,10 @@ COPY apps/boekhouding-frontend/ apps/boekhouding-frontend/
 WORKDIR /app/apps/standalone-form
 RUN npx vite build
 
+RUN mkdir -p /app/apps/boekhouding-frontend/public && \
+    cp /app/apps/boekhouding-frontend/node_modules/@nl-rvo/assets/images/favicon/favicon.ico \
+       /app/apps/boekhouding-frontend/public/favicon.ico
+
 # Build frontend SPA
 WORKDIR /app/apps/boekhouding-frontend
 RUN npx vite build

containers/frontend/default.conf

@@ -28,9 +28,17 @@ server {
     }
 
     # Standalone invulhulp (single-file SPA via viteSingleFile)
+    # viteSingleFile inlinet alle JS/CSS → vereist 'unsafe-inline' voor script-src
     location /invulhulpen/ {
         alias /usr/share/nginx/html/invulhulpen/;
         try_files $uri /invulhulpen/index.html;
+
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self';" always;
+        add_header Strict-Transport-Security "max-age=31536000" always;
     }
 
     # Hoofd-SPA met Vue Router fallback