Parcourir la source

CSP: stop htmx from injecting its inline indicator <style>

Strict CSP (style-src 'self') blocks htmx's built-in indicator
stylesheet on every page load, flooding the audit log with
csp_violation rows. Disable the auto-injection via
<meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
and ship the equivalent .htmx-indicator / .htmx-request rules from
app.css instead.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa il y a 1 jour
Parent
commit
4ae4db6b94
2 fichiers modifiés avec 15 ajouts et 0 suppressions
  1. 10 0
      assets/css/input.css
  2. 5 0
      views/layout.twig

+ 10 - 0
assets/css/input.css

@@ -28,6 +28,16 @@
 }
 
 @layer components {
+    /* htmx default indicator styles, shipped from our own stylesheet
+       instead of htmx's built-in inline <style> injection (disabled via
+       <meta name="htmx-config" content='{"includeIndicatorStyles":
+       false}'> in views/layout.twig). The strict CSP blocks the inline
+       injection and would otherwise log a `csp_violation` per page load. */
+    .htmx-indicator              { opacity: 0; visibility: hidden; }
+    .htmx-request .htmx-indicator,
+    .htmx-request.htmx-indicator { opacity: 1; visibility: visible;
+                                   transition: opacity 200ms ease-in; }
+
     /* Phase 15: big-screen / beamer presentation scope. Applied via
        views/sprints/present.php on the root <main>. Tightens typography
        and cell padding so the task table fits the viewport without

+ 5 - 0
views/layout.twig

@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>{{ title|default('Sprint Planner') }}</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    {# Disable htmx's built-in indicator <style> injection. With strict CSP
+       (style-src 'self', no inline) the browser blocks it on every page
+       load and floods the audit log with `csp_violation` rows. The
+       equivalent rules ship from app.css instead. #}
+    <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
     <script src="/assets/js/theme-init.js"></script>
     <link rel="stylesheet" href="/assets/css/app.css">
     <script src="/assets/js/vendor/htmx.min.js" defer></script>