Le Content Security Policy (CSP) est une couche de sécurité supplémentaire qui permet de détecter et d’atténuer certains types d’attaques, notamment les injections de données (XSS) et les détournements de clics.
Dans Nginx Proxy Manager, un CSP mal configuré peut bloquer l’affichage d’images, de vidéos ou même casser des fonctionnalités vitales comme les WebSockets ou les conversions vidéo.
Voici le bloc de base recommandé. Il autorise le chargement de ressources depuis votre propre domaine, ainsi que les images en data: et blob:, indispensables pour les miniatures dans la plupart des applications modernes.
# CSP standard : sécurisé mais flexible
add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' https: data: blob:; style-src 'self' 'unsafe-inline';";
Certains services exigent des directives spécifiques pour fonctionner correctement. Voici les réglages validés par Blabla Linux.
Ces outils utilisent des WebWorkers (FFmpeg en navigateur) et des blobs pour les aperçus.
worker-src et connect-src *.add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' https: data: blob:; worker-src 'self' blob:; connect-src *;";
Ces applications utilisent des WebSockets pour la synchronisation en direct.
wss: et https: dans connect-src.add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' wss: https:; img-src * data: blob:;";
frame-src pour les iframes et connect-src pour l’API GitHub.add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval'; frame-src 'self' https://peertube.votredomaine.be; connect-src 'self' https://github.com https://api.github.com;";
Si vous injectez un logo personnalisé sur vos sous-domaines (ex: sur picsur.blablalinux.be), vous devez être vigilant avec les headers d’isolation mémoire (COOP/COEP).
Le problème :
Lorsque vous activez des politiques de sécurité strictes pour FFmpeg (WASM), le navigateur refuse de charger toute image provenant d’un domaine différent de celui sur lequel vous vous trouvez. Si votre logo est hébergé sur blablalinux.be mais affiché sur un sous-domaine, il sera bloqué.
Les deux solutions Blabla Linux :
Cross-Origin-Embedder-Policy et Cross-Origin-Opener-Policy dans NPM pour laisser le logo s’afficher normalement.crossorigin="anonymous" dans votre balise d’image injectée via sub_filter :<img src="https://blablalinux.be/logo.png" crossorigin="anonymous">
Si un élément ne s’affiche pas :
Refused to load....worker-src ou frame-src).Note d’Amaury aka BlablaLinux : Toujours tester vos modifications en navigation privée pour forcer le navigateur à lire la nouvelle politique de sécurité.