Tighten CSP: remove inline styles + unused icon font (style-src & font-src → 'self')

_includes/head.html

@@ -15,11 +15,11 @@
   embeds, and only same-origin CSS/images (verified at time of writing: no
   <script> tags, no external iframes, all assets under /assets/...).
 
-  style-src includes 'unsafe-inline' because several Webflow-exported pages
-  in _pages/ use inline style="..." attributes (e.g. _pages/projekte.html,
-  _pages/offenerbrief-epa-2025.html for background-color/text-align). A
-  stricter style-src without 'unsafe-inline' would break their layout, and a
-  CSP that breaks styling is worse than no CSP.
+  style-src is 'self' only (no 'unsafe-inline'): all styling lives in the
+  same-origin stylesheets. The few inline styling attributes that used to be on
+  Webflow-exported pages were moved into classes in custom.css so this
+  directive could be tightened. Do NOT reintroduce inline styling attributes,
+  inline style blocks, or on*= handlers — they would be blocked.
 
   X-Content-Type-Options, X-Frame-Options, and the CSP `frame-ancestors`
   directive are deliberately NOT included here: they are only honored by
@@ -29,12 +29,14 @@
   fronting the site with something that can inject headers (e.g. Cloudflare
   Transform Rules / a Worker).
 
-  font-src allows data: because the Webflow CSS embeds an icon font as a
-  data:application/x-font-ttf URI.
+  All fonts are same-origin (the Inter webfont under /assets/fonts/), so
+  font-src is 'self'. The unused Webflow icon font that was embedded as a
+  data: URI has been removed from webflow.css, so no data: font allowance is
+  needed.
 -->
 <meta
   http-equiv="Content-Security-Policy"
-  content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'">
+  content="default-src 'self'; img-src 'self' data:; style-src 'self'; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'">
 <meta name="referrer" content="strict-origin-when-cross-origin">
 
 <!-- title -->

_pages/offenerbrief-epa-2025.html

@@ -18,7 +18,7 @@ <h1 class="single-page-title">
   <div class="block-content">
     <div class="">
       <div class="content-box">
-        <p style="text-align: end">14. Januar 2025</p>
+        <p class="text-end">14. Januar 2025</p>
         <p class="insurance-paragraph">Sehr geehrter Herr Bundesminister Lauterbach,</p>
 
         <p class="insurance-paragraph">

_pages/projekte.html

@@ -35,7 +35,7 @@ <h3 class="insurance-title">Die Datenschnittstelle des Gesundheitsamts</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: #fceed5;">
+      <div class="projekt-block projekt-block--impfen">
         <img src="/assets/images/impfen.png" height="60" width="63" alt="" class="_0margin">
         <h3 class="insurance-title">Impfterminvermittlung</h3>
         <p class="insurance-paragraph">
@@ -49,7 +49,7 @@ <h3 class="insurance-title">Impfterminvermittlung</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: rgba(129, 198, 255, 0.61);">
+      <div class="projekt-block projekt-block--labhive">
         <img src="/assets/images/logo-green.bda867af.svg" height="60" width="189" alt="" class="_0margin">
         <h3 class="insurance-title">Testkapazitäten im Blick behalten</h3>
         <p class="insurance-paragraph">
@@ -59,7 +59,7 @@ <h3 class="insurance-title">Testkapazitäten im Blick behalten</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: rgba(214, 205, 208, 0.61);">
+      <div class="projekt-block projekt-block--coronika">
         <img src="/assets/images/Element-4coronika.svg" height="60" width="184" alt="" class="_0margin">
         <h3 class="insurance-title">Ein Kontakttagebuch für die Gesundheit aller</h3>
         <p class="insurance-paragraph">
@@ -72,7 +72,7 @@ <h3 class="insurance-title">Ein Kontakttagebuch für die Gesundheit aller</h3>
       <!-- block end -->
       <!-- block start -->
 
-      <div class="projekt-block" style="background-color: #f2feff;">
+      <div class="projekt-block projekt-block--dw">
         <img src="/assets/images/Element-1dw.svg" height="60" width="173" alt="" class="_0margin">
         <h3 class="insurance-title">Meldepflicht. Einfach. Online.</h3>
         <p class="insurance-paragraph">
@@ -83,7 +83,7 @@ <h3 class="insurance-title">Meldepflicht. Einfach. Online.</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: rgba(40, 0, 219, 0.09);">
+      <div class="projekt-block projekt-block--did">
         <img src="/assets/images/DID-Logo.svg" height="102" width="234" alt="" class="_0margin">
         <h3 class="insurance-title">Schnell. Einfach. Regional.</h3>
         <p class="insurance-paragraph">

assets/css/custom.css

@@ -17,3 +17,27 @@
 .skip-link:focus {
   left: 0;
 }
+
+/* Per-project card tints. Extracted from inline style="background-color: …"
+   attributes on the .projekt-block cards in _pages/projekte.html so the CSP
+   can drop 'unsafe-inline' from style-src. Colours are unchanged. */
+.projekt-block--impfen {
+  background-color: #fceed5;
+}
+.projekt-block--labhive {
+  background-color: rgba(129, 198, 255, 0.61);
+}
+.projekt-block--coronika {
+  background-color: rgba(214, 205, 208, 0.61);
+}
+.projekt-block--dw {
+  background-color: #f2feff;
+}
+.projekt-block--did {
+  background-color: rgba(40, 0, 219, 0.09);
+}
+
+/* Text alignment utility (was inline style="text-align: end"). */
+.text-end {
+  text-align: end;
+}

assets/css/webflow.css

@@ -1,10 +1,3 @@
-@font-face {
-  font-family: "webflow-icons";
-  src: url("data:application/x-font-ttf;charset=utf-8;base64,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")
-    format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
 [class^="w-icon-"],
 [class*=" w-icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */

memory/csp-policy.md

@@ -5,17 +5,19 @@ The site has no HTTP-header control (GitHub Pages), so the CSP is a `<meta http-
 Current policy:
 
 ```
-default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';
-font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'
+default-src 'self'; img-src 'self' data:; style-src 'self';
+font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'
 ```
 
 Why each non-obvious part is there:
 
-- **`style-src 'unsafe-inline'`** — several Webflow-exported pages (`_pages/projekte.html`, `_pages/offenerbrief-epa-2025.html`) use inline `style=` attributes.
-  Removing it breaks their layout; a CSP that breaks styling is worse than none.
-- **`font-src 'self' data:`** — `webflow.css` embeds an icon font as a `data:application/x-font-ttf` URI. Without `data:` the font is blocked (was a real
-  console error after the CSP first shipped).
-- **`img-src 'self' data:`** — same reason (data-URI images in the CSS).
+- **`style-src 'self'`** — no inline styles. The Webflow-exported pages originally had inline `style=` attributes (per-project card tints on `projekte.html`, a
+  `text-align` on `offenerbrief`); these were moved into classes in `custom.css` (`.projekt-block--*`, `.text-end`) so `'unsafe-inline'` could be dropped. Do
+  NOT reintroduce inline styles / `<style>` blocks / `on*=` handlers.
+- **`font-src 'self'`** — all fonts are the same-origin Inter webfont under `/assets/fonts/`. `webflow.css` used to embed an unused `webflow-icons` font as a
+  `data:application/x-font-ttf` URI (which forced `font-src data:`); that `@font-face` was removed since no `w-icon-` class is used anywhere, so `data:` is no
+  longer needed.
+- **`img-src 'self' data:`** — data-URI images still appear in the CSS, so this one keeps `data:`.
 
 Cannot be enforced via a meta tag (header-only — omitted to avoid console noise / false sense of security): `X-Content-Type-Options`, `X-Frame-Options`, and CSP
 `frame-ancestors`. Enforcing those needs a header-capable front (e.g. Cloudflare).