feat: update security headers and improve content security policy; enhance hero image component and loading states in public news

apache-ssl-config.conf

@@ -32,7 +32,7 @@
     Header always set Content-Security-Policy "frame-ancestors 'self' https://harheimertc.de https://www.harheimertc.de"
 
     # Optional: Vollständige Content Security Policy (zusätzlich zu frame-ancestors)
-    # Header always set Content-Security-Policy-Report-Only "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self' https://harheimertc.de https://www.harheimertc.de; font-src 'self' https://fonts.gstatic.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: blob:; connect-src 'self'"
+    # Header always set Content-Security-Policy-Report-Only "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self' https://harheimertc.de https://www.harheimertc.de; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data: blob:; connect-src 'self'"
 
     # Proxy alle Anfragen an Nuxt Server (Port 3100)
     ProxyPreserveHost On

apache-static.conf

@@ -32,7 +32,7 @@
     Header always set Content-Security-Policy "frame-ancestors 'self' https://harheimertc.de https://www.harheimertc.de"
 
     # Optional: Vollständige Content Security Policy (zusätzlich zu frame-ancestors)
-    # Header always set Content-Security-Policy-Report-Only "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self' https://harheimertc.de https://www.harheimertc.de; font-src 'self' https://fonts.gstatic.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: blob:; connect-src 'self'"
+    # Header always set Content-Security-Policy-Report-Only "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self' https://harheimertc.de https://www.harheimertc.de; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data: blob:; connect-src 'self'"
 
     # SPA Fallback für Nuxt.js
     <Directory "/var/www/harheimertc/dist">

assets/css/main.css

@@ -4,12 +4,12 @@
 
 @layer base {
   html {
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     scroll-behavior: smooth;
   }
   
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Montserrat', system-ui, sans-serif;
+    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
   }
 }
 

components/Hero.vue

@@ -19,6 +19,8 @@
           alt=""
           aria-hidden="true"
           class="w-full h-full object-cover"
+          width="1600"
+          height="900"
           loading="eager"
           fetchpriority="high"
           decoding="async"

components/PublicNews.vue

@@ -1,7 +1,6 @@
 <template>
   <section
-    v-if="news.length > 0"
+    class="py-16 sm:py-20 bg-white min-h-[32rem]"
-    class="py-16 sm:py-20 bg-white"
   >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-16">
@@ -14,7 +13,29 @@
         </p>
       </div>
 
-      <div class="flex justify-center">
+      <div
+        v-if="isLoading"
+        class="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      >
+        <div
+          v-for="placeholder in 3"
+          :key="`news-placeholder-${placeholder}`"
+          class="bg-gray-50 rounded-xl p-6 border border-gray-200"
+        >
+          <div class="h-4 w-32 bg-gray-200 rounded animate-pulse mb-4" />
+          <div class="h-7 w-3/4 bg-gray-200 rounded animate-pulse mb-4" />
+          <div class="space-y-2">
+            <div class="h-4 w-full bg-gray-200 rounded animate-pulse" />
+            <div class="h-4 w-5/6 bg-gray-200 rounded animate-pulse" />
+            <div class="h-4 w-2/3 bg-gray-200 rounded animate-pulse" />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else-if="news.length > 0"
+        class="flex justify-center"
+      >
         <div
           class="grid gap-8"
           :class="getGridClass()"
@@ -43,6 +64,18 @@
           </article>
         </div>
       </div>
+
+      <div
+        v-else
+        class="max-w-xl mx-auto text-center bg-gray-50 border border-gray-200 rounded-xl p-8"
+      >
+        <p class="text-gray-700 font-semibold mb-2">
+          Aktuell keine News
+        </p>
+        <p class="text-gray-600 text-sm">
+          Neue Vereinsnachrichten erscheinen hier automatisch.
+        </p>
+      </div>
     </div>
 
     <!-- News Modal -->
@@ -91,13 +124,16 @@ import { Calendar, X } from 'lucide-vue-next'
 
 const news = ref([])
 const selectedNews = ref(null)
+const isLoading = ref(true)
 
 const loadNews = async () => {
   try {
     const response = await $fetch('/api/news-public')
-    news.value = response.news
+    news.value = Array.isArray(response?.news) ? response.news : []
   } catch (error) {
     console.error('Fehler beim Laden der öffentlichen News:', error)
+  } finally {
+    isLoading.value = false
   }
 }
 

nuxt.config.js

@@ -76,13 +76,7 @@ export default defineNuxtConfig({
         { property: 'twitter:description', content: 'Offizielle Website des Harheimer Tischtennis-Club 1954 e.V.' }
       ],
       link: [
-        { rel: 'canonical', href: 'https://www.harheimertc.de/' },
+        { rel: 'canonical', href: 'https://www.harheimertc.de/' }
-        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-        { 
-          rel: 'stylesheet', 
-          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap' 
-        }
       ]
     }
   },

pages/index.vue

@@ -226,17 +226,39 @@
 </template>
 
 <script setup>
-import { computed, defineAsyncComponent, ref } from 'vue'
+import { computed, defineAsyncComponent, h, ref } from 'vue'
 import { SlidersHorizontal, X } from 'lucide-vue-next'
 import Hero from '~/components/Hero.vue'
-const HomeTermine = defineAsyncComponent(() => import('~/components/HomeTermine.vue'))
+
-const Spielplan = defineAsyncComponent(() => import('~/components/Spielplan.vue'))
+const SectionLoadingPlaceholder = {
-const PublicNews = defineAsyncComponent(() => import('~/components/PublicNews.vue'))
+  name: 'SectionLoadingPlaceholder',
-const HomeActions = defineAsyncComponent(() => import('~/components/HomeActions.vue'))
+  render() {
-const HomeTrainingTeaser = defineAsyncComponent(() => import('~/components/HomeTrainingTeaser.vue'))
+    return h('section', { class: 'py-16 sm:py-20 bg-white' }, [
-const HomeLinksTeaser = defineAsyncComponent(() => import('~/components/HomeLinksTeaser.vue'))
+      h('div', { class: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' }, [
-const HomeVereinsmeisterschaftenTeaser = defineAsyncComponent(() => import('~/components/HomeVereinsmeisterschaftenTeaser.vue'))
+        h('div', { class: 'h-10 max-w-xs mx-auto rounded bg-gray-200 animate-pulse mb-8' }),
-const HomeSpielplanTeamWidget = defineAsyncComponent(() => import('~/components/HomeSpielplanTeamWidget.vue'))
+        h('div', { class: 'h-56 rounded-2xl bg-gray-100 animate-pulse' })
+      ])
+    ])
+  }
+}
+
+function loadHomeSection(loader) {
+  return defineAsyncComponent({
+    loader,
+    loadingComponent: SectionLoadingPlaceholder,
+    delay: 0,
+    suspensible: false
+  })
+}
+
+const HomeTermine = loadHomeSection(() => import('~/components/HomeTermine.vue'))
+const Spielplan = loadHomeSection(() => import('~/components/Spielplan.vue'))
+const PublicNews = loadHomeSection(() => import('~/components/PublicNews.vue'))
+const HomeActions = loadHomeSection(() => import('~/components/HomeActions.vue'))
+const HomeTrainingTeaser = loadHomeSection(() => import('~/components/HomeTrainingTeaser.vue'))
+const HomeLinksTeaser = loadHomeSection(() => import('~/components/HomeLinksTeaser.vue'))
+const HomeVereinsmeisterschaftenTeaser = loadHomeSection(() => import('~/components/HomeVereinsmeisterschaftenTeaser.vue'))
+const HomeSpielplanTeamWidget = loadHomeSection(() => import('~/components/HomeSpielplanTeamWidget.vue'))
 
 const { data: config } = await useFetch('/api/config')
 const { data: authStatus } = await useFetch('/api/auth/status')

server/api/hero-images.get.js

@@ -36,6 +36,15 @@ async function fileExists(filePath) {
   }
 }
 
+function isAllowedVariantKey(key) {
+  return /^[A-Za-z0-9_-]+$/.test(key)
+}
+
+function appendPathSegment(rootDir, segment) {
+  if (!isAllowedVariantKey(segment)) return null
+  return `${rootDir}${path.sep}${segment}`
+}
+
 async function listHeroVariants(heroRoot) {
   const dirEntries = await fs.readdir(heroRoot, { withFileTypes: true })
   const variants = []
@@ -44,12 +53,17 @@ async function listHeroVariants(heroRoot) {
     if (!entry.isDirectory()) continue
 
     const key = entry.name
-    const variantDir = path.join(heroRoot, key)
+    if (!isAllowedVariantKey(key)) continue
+
+    const variantDir = appendPathSegment(heroRoot, key)
+    if (!variantDir) continue
+
     const mobileFile = 'hero_960.webp'
     const desktopFile = 'hero_1600.webp'
 
-    const mobilePath = path.join(variantDir, mobileFile)
+    const mobilePath = `${variantDir}${path.sep}${mobileFile}`
-    const desktopPath = path.join(variantDir, desktopFile)
+    const desktopPath = `${variantDir}${path.sep}${desktopFile}`
+    if (!mobilePath || !desktopPath) continue
 
     if (!(await fileExists(mobilePath)) || !(await fileExists(desktopPath))) {
       continue
@@ -57,7 +71,8 @@ async function listHeroVariants(heroRoot) {
 
     let fallbackFile = desktopFile
     for (const candidate of FALLBACK_FILE_CANDIDATES) {
-      if (await fileExists(path.join(variantDir, candidate))) {
+      const fallbackPath = `${variantDir}${path.sep}${candidate}`
+      if (fallbackPath && await fileExists(fallbackPath)) {
         fallbackFile = candidate
         break
       }

server/middleware/security-headers.js

@@ -38,9 +38,8 @@ export default defineEventHandler((event) => {
         "base-uri 'self'",
         "object-src 'none'",
         `frame-ancestors ${allowedFrameAncestors}`,
-        // Nuxt lädt Fonts ggf. von Google (siehe nuxt.config.js)
+        "font-src 'self' data:",
-        "font-src 'self' https://fonts.gstatic.com data:",
+        "style-src 'self' 'unsafe-inline'",
-        "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
         // Script: Nuxt kann in Dev eval nutzen; diese CSP ist primär für Produktion gedacht.
         "script-src 'self'",
         "img-src 'self' data: blob:",