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

2026-05-31 14:19:15 +02:00
parent 6983186caf
commit bf1caefde4
9 changed files with 99 additions and 31 deletions
--- a/apache-ssl-config.conf
+++ b/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
--- a/apache-static.conf
+++ b/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">
--- a/assets/css/main.css
+++ b/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;
  }
 }

--- a/components/Hero.vue
+++ b/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"
--- a/components/PublicNews.vue
+++ b/components/PublicNews.vue
@@ -1,7 +1,6 @@
 <template>
  <section
-    v-if="news.length > 0"
-    class="py-16 sm:py-20 bg-white"
+    class="py-16 sm:py-20 bg-white min-h-[32rem]"
  >
    <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
  }
 }

--- a/nuxt.config.js
+++ b/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: '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' 
-        }
+        { rel: 'canonical', href: 'https://www.harheimertc.de/' }
      ]
    }
  },
--- a/pages/index.vue
+++ b/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 PublicNews = defineAsyncComponent(() => import('~/components/PublicNews.vue'))
-const HomeActions = defineAsyncComponent(() => import('~/components/HomeActions.vue'))
-const HomeTrainingTeaser = defineAsyncComponent(() => import('~/components/HomeTrainingTeaser.vue'))
-const HomeLinksTeaser = defineAsyncComponent(() => import('~/components/HomeLinksTeaser.vue'))
-const HomeVereinsmeisterschaftenTeaser = defineAsyncComponent(() => import('~/components/HomeVereinsmeisterschaftenTeaser.vue'))
-const HomeSpielplanTeamWidget = defineAsyncComponent(() => import('~/components/HomeSpielplanTeamWidget.vue'))
+
+const SectionLoadingPlaceholder = {
+  name: 'SectionLoadingPlaceholder',
+  render() {
+    return h('section', { class: 'py-16 sm:py-20 bg-white' }, [
+      h('div', { class: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' }, [
+        h('div', { class: 'h-10 max-w-xs mx-auto rounded bg-gray-200 animate-pulse mb-8' }),
+        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')
--- a/server/api/hero-images.get.js
+++ b/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 desktopPath = path.join(variantDir, desktopFile)
+    const mobilePath = `${variantDir}${path.sep}${mobileFile}`
+    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
      }
--- a/server/middleware/security-headers.js
+++ b/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' https://fonts.gstatic.com data:",
-        "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+        "font-src 'self' data:",
+        "style-src 'self' 'unsafe-inline'",
        // Script: Nuxt kann in Dev eval nutzen; diese CSP ist primär für Produktion gedacht.
        "script-src 'self'",
        "img-src 'self' data: blob:",