Csp - Balise - arleo.eu

Hugo : gel des diagrammes Mermaid en SVG statiques dark/light

Jmr — Fri, 29 May 2026 20:00:00 +0200

Problème

Les diagrammes Mermaid sur arleo.eu rendaient côté client via cdn.jsdelivr.net. Trois conséquences concrètes :

CSP contrainte — script-src cdn.jsdelivr.net et worker-src cdn.jsdelivr.net obligatoires (Mermaid v11 utilise des Web Workers pour ses parsers).
Flash de rendu — le diagramme apparaît après l’exécution JS, créant un décalage visible.
Thème dark ignoré — Mermaid initialisait le SVG en mode clair même quand le thème du site était dark.

La solution : générer les SVG au build avec mmdc, en dehors de tout contexte navigateur.

CSP A+ sur Hugo + Cloudflare : de hash-based à origin allowlist, monitoring auto et durcissement

Jmr — Thu, 28 May 2026 23:40:12 +0200

Contexte

arleo.eu tourne sur Hugo (VM KVM) → OpenResty (NUC) → Cloudflare (CDN/WAF). Objectif : score A+ sur Mozilla Observatory avec une CSP stricte qui résiste aux injections côté edge.

Le parcours a traversé trois stratégies en quelques semaines — nonces, hashes, puis origin allowlist — avant d’aboutir à une solution stable et automatisée.

Acte 1 : pourquoi hash-based a échoué

L’idée de départ semblait solide : Hugo Pipes externalise tout le JS avec SRI, on liste les hashes dans la CSP, résultat propre. En pratique, deux problèmes ont rendu l’approche impossible.

CSP Hash sur Hugo : migrer du nonce vers le hash pour préserver le cache CDN

Jmr — Sat, 16 May 2026 00:00:00 +0000

Le nonce CSP et le cache CDN sont incompatibles par design. Sur un site Hugo statique, le hash SHA-256 est l’approche native : il est calculé au build, reste stable entre les requêtes, et laisse Cloudflare cacher le HTML.