CSP POUR LES SITES STATIQUES

La politique de sécurité du contenu (Content Security Policy) est un en-tête HTTP qui indique au navigateur quelles origines sont autorisées à charger des ressources pour votre page. Correctement mise en œuvre, elle permet d'empêcher la plupart des attaques XSS, de « clickjacking » et de la chaîne d'approvisionnement. Mal configurée, elle perturbe discrètement le fonctionnement de certaines fonctionnalités, ce qui peut prendre plusieurs jours à diagnostiquer.

Les sites statiques ont tendance à négliger la documentation relative à leur CSP, car le risque perçu est moindre. Or, en réalité, un site statique dépourvu de directive CSP peut entraîner des dysfonctionnements au niveau de la lecture des vidéos, du chargement des images, de la fonctionnalité de recherche ou du rendu des polices, et le message affiché dans la console du navigateur est le seul indice dont vous disposez.

La directive qui gère chaque type de ressource :

img-src pour les balises img. media-src pour les éléments vidéo, audio et source. frame-src pour les iframes. connect-src pour fetch et WebSocket. script-src pour les balises script. style-src pour les balises style et les liens rel=stylesheet. font-src pour @font-face.

Important : la valeur par défaut « self » pour `src` ne prend PAS en charge les vidéos provenant d'un hébergeur tiers. Une vidéo hébergée sur Supabase Storage ne s'affichera pas (sans message d'erreur) et seule son image d'aperçu sera visible si vous oubliez de spécifier `media-src`. La console du navigateur affiche la directive qui a bloqué la lecture ; vérifiez-la en premier lieu lorsque la vidéo ne s'affiche pas sans raison apparente.

En mai 2026, sur le site gautamkhorana.com, un fichier Kling au format MP4 hébergé sur Supabase Storage s’affichait correctement au format HTML, mais ne se lançait jamais. L’image d’aperçu s’affichait, mais la vidéo ne démarrait pas. Après vingt minutes de débogage, il s’est avéré que la politique de sécurité du contenu (CSP) ne comportait aucune directive « media-src » et que le navigateur bloquait silencieusement l’élément vidéo.

La solution consistait à ajouter une seule ligne au fichier netlify.toml : media-src "self" https://*.supabase.co. Le symptôme « l'image s'affiche mais la lecture ne fonctionne pas » est révélateur : cela signifie que la politique CSP autorise l'image mais pas la vidéo.

Pagefind, Stork, Tinysearch et d'autres bibliothèques de recherche pour sites statiques utilisent WebAssembly et les Web Workers. La politique de sécurité du contenu (CSP) doit inclure les règles script-src « wasm-unsafe-eval » ET worker-src « self » blob : sinon, la recherche reste bloquée indéfiniment sur « Recherche en cours... » sans afficher d'erreur dans la console.

Deuxième incident sur gautamkhorana.com en mai 2026 : le volet de recherche restait bloqué sur « Recherche en cours... » car la fonction pagefind.init() échouait silencieusement lorsque WASM était bloqué. La solution a consisté à ajouter « wasm-unsafe-eval » à script-src et « self » au blob : à worker-src.

Obligatoire :

img-src self https://*.supabase.co https://*.fal.media, pour les images d'en-tête 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 Astro. font-src self, pour les polices auto-hébergées.

Chaque fois que vous ajoutez un nouvel hébergeur de ressources (Cloudinary, Bunny, R2, etc.), vérifiez le fichier netlify.toml ou vercel.json et ajoutez cet hébergeur à toutes les directives susceptibles d'être utilisées par ce type de ressource. Une erreur à ce niveau peut entraîner une panne silencieuse qui n'apparaîtra qu'en production.

Le mode « CSP-Report-Only » vous permet de tester les modifications apportées aux règles en environnement de production sans causer de dysfonctionnements. Le navigateur enregistre les violations potentielles sur un point de terminaison de rapport au lieu de bloquer la requête. Testez toute nouvelle directive en mode « Report-Only » pendant une semaine, examinez les violations, puis passez en mode « Enforcement ».

La plupart des défaillances des CSP passent inaperçues en production. Un point de terminaison de signalement est le seul moyen de savoir ce qui a réellement cessé de fonctionner. Configurez-en un avant de déployer toute modification non négligeable d'un CSP.