CSP POUR LES SITES STATIQUES

Content Security Policy est un en-tête HTTP qui dit au navigateur quelles origines sont autorisées à charger des ressources pour votre page. Bien fait, cela prévient la plupart des attaques XSS, du clickjacking et des attaques de chaîne d'approvisionnement. Mal fait, cela casse silencieusement des fonctionnalités de manière que les diagnostiquer peut prendre des jours.

Les sites statiques ont tendance à sous-documenter leur CSP parce que le risque perçu est plus faible. La réalité est qu'un site statique avec une directive CSP manquante peut interrompre la lecture vidéo, le chargement d'images, la fonctionnalité de recherche ou le rendu des polices, et le message de la console du navigateur est le seul signal que vous recevez.

La directive qui contrôle chaque type de ressource :

img-src pour les balises img. media-src pour les éléments video, audio, source. frame-src pour iframe. connect-src pour fetch et WebSocket. script-src pour les balises script. style-src pour les balises style et link rel=stylesheet. font-src pour @font-face.

Critique : default-src "self" ne couvre PAS les vidéos d'un hôte tiers. Une vidéo de Supabase Storage ne jouera pas en silence si vous oubliez media-src, seul le poster s'affichera. La console du navigateur affiche la directive qui l'a bloquée ; vérifiez cela en premier si la vidéo refuse mystérieusement de jouer.

Sur gautamkhorana.com en mai 2026, un MP4 Kling hébergé sur Supabase Storage a rendu le HTML correctement mais n'a jamais joué. Le poster s'affichait ; la vidéo ne démarrait pas. Vingt minutes de débogage plus tard, la réponse était que la CSP n'avait pas de directive media-src et le navigateur bloquait silencieusement l'élément vidéo.

La solution était un ajout d'une ligne à netlify.toml : media-src "self" https://*.supabase.co. Le symptôme poster-mais-pas-de-lecture est le motif révélateur : cela signifie que la CSP autorise l'image mais pas la vidéo.

Pagefind, Stork, Tinysearch et autres bibliothèques de recherche de sites statiques utilisent WebAssembly plus Web Workers. La CSP doit inclure script-src "wasm-unsafe-eval" ET worker-src "self" blob: ou la recherche reste bloquée indéfiniment sur « Searching... » sans erreur console.

Deuxième incident sur gautamkhorana.com en mai 2026 : le tiroir de recherche bloqué sur « Searching... » parce que pagefind.init() a échoué silencieusement quand wasm a été bloqué. La solution était d'ajouter "wasm-unsafe-eval" à script-src et "self" blob: à worker-src.

Requis :

img-src self https://*.supabase.co https://*.fal.media, pour les images de héros et les ressources générées par FAL. media-src self https://*.supabase.co, pour les vidéos. connect-src self https://*.supabase.co, pour les appels à l'API Supabase. script-src self "wasm-unsafe-eval", pour Pagefind. worker-src self blob:, pour les workers Pagefind. style-src self "unsafe-inline", pour les styles scopés d'Astro. font-src self, pour les polices auto-hébergées.

Chaque fois que vous ajoutez un nouvel hôte de ressources (Cloudinary, Bunny, R2, n'importe lequel), auditez netlify.toml ou vercel.json et ajoutez l'hôte à chaque directive qui pourrait concerner ce type de ressource. Le risque en cas d'erreur est une défaillance silencieuse qui se manifeste en production.

Le mode CSP-Report-Only vous permet de tester des modifications de politique en production sans rien casser. Le navigateur enregistre les violations potentielles dans un point de terminaison de rapport au lieu de bloquer la requête. Exécutez toute nouvelle directive en mode rapport pendant une semaine, examinez les violations, puis promouvez en mode d'application.

La plupart des défaillances CSP sont silencieuses en production. Un point de terminaison de rapport est le seul moyen de savoir ce que vous avez réellement cassé. Configurez-en un avant de déployer toute modification CSP non triviale.