Construire une Content Security Policy

Generez des en-tetes CSP de maniere interactive avec toutes les directives, presets et sortie pour HTTP, meta tags, Nginx, Apache et Express.

Construisez et configurez des en-tetes Content Security Policy (CSP) visuellement avec un editeur interactif de directives. Ajoutez des sources par directive, previsualisez votre politique en direct et exportez sous forme d'en-tetes HTTP, de meta tags HTML ou de configurations Nginx, Apache ou Express.js. Tout est traite dans votre navigateur.

Loading...
Vos données restent dans votre navigateur
Cet outil vous a-t-il été utile ?
Tutoriel

Comment Construire un En-tete CSP

1
1

Choisissez les Directives

Commencez par default-src et ajoutez d'autres directives comme script-src, style-src ou img-src pour un controle plus granulaire.

2
2

Ajoutez les Sources Autorisees

Cliquez sur les valeurs predefinies comme 'self' ou 'none', ou tapez des domaines personnalises pour autoriser des origines specifiques.

3
3

Exportez la Politique

Basculez entre les onglets de sortie pour copier le CSP comme en-tete HTTP, meta tag ou extrait de configuration serveur.

Guide

Guide Complet de Content Security Policy

Pourquoi CSP est Important pour la Securite Web

Content Security Policy est l'une des defenses les plus efficaces contre les attaques de cross-site scripting (XSS). En declarant exactement quelles sources peuvent charger des scripts, des styles, des images et d'autres ressources, vous creez une liste blanche que les navigateurs appliquent automatiquement. Meme si un attaquant injecte du code malveillant dans votre page, le navigateur refuse de l'executer.

Comprendre les Directives CSP

Chaque directive controle un type specifique de ressource. La directive default-src agit comme solution de repli pour tout type non specifie. La directive script-src gouverne les sources JavaScript, style-src gere le CSS et img-src controle les images. Des directives plus specialisees comme connect-src restreignent fetch et XMLHttpRequest, tandis que frame-ancestors determine quels sites peuvent integrer le votre.

Valeurs de Source Courantes Expliquees

La valeur 'self' autorise le contenu de votre propre origine. La valeur 'none' bloque tout pour cette directive. Pour les scripts en ligne, 'unsafe-inline' les autorise mais affaiblit la securite; preferez les approches basees sur nonce ou hash. La valeur 'strict-dynamic' fait confiance aux scripts charges par des scripts deja approuves, simplifiant l'utilisation des CDN.

Deployer CSP en Production

Commencez par Content-Security-Policy-Report-Only pour collecter les rapports de violations sans casser la fonctionnalite. Analysez les rapports, ajustez votre politique puis passez a l'en-tete d'application. Utilisez les directives report-uri ou report-to pour envoyer les violations a un endpoint de journalisation. Surveillez regulierement car de nouvelles integrations peuvent provoquer des blocages inattendus.

Examples

Exemples de Configuration CSP

Site Web Basique Securise

Un site web qui ne charge que ses propres ressources et utilise Google Fonts.

1

Definir default-src sur 'self'

2

Definir font-src sur 'self' fonts.gstatic.com

3

Definir style-src sur 'self' fonts.googleapis.com

default-src 'self'; font-src 'self' fonts.gstatic.com; style-src 'self' fonts.googleapis.com

E-commerce avec Analytics

Une boutique en ligne utilisant Google Analytics, les paiements Stripe et un CDN pour les images.

1

Definir default-src sur 'self'

2

Definir script-src sur 'self' www.googletagmanager.com js.stripe.com

3

Definir connect-src sur 'self' www.google-analytics.com api.stripe.com

4

Definir img-src sur 'self' cdn.example.com data:

5

Definir frame-src sur js.stripe.com

default-src 'self'; script-src 'self' www.googletagmanager.com js.stripe.com; connect-src 'self' www.google-analytics.com api.stripe.com; img-src 'self' cdn.example.com data:; frame-src js.stripe.com

Cas d'utilisation

Cas d'Utilisation CSP

Bloquer le Contenu Mixte

Definissez default-src sur 'self' et upgrade-insecure-requests pour forcer HTTPS sur toutes les ressources. Cela empeche les navigateurs de charger des ressources HTTP sur des pages HTTPS, eliminant les avertissements de contenu mixte et ameliorant la securite.

Restreindre les Scripts Tiers

Configurez script-src pour autoriser uniquement 'self' et des domaines CDN specifiques comme cdn.jsdelivr.net. Cela bloque les scripts en ligne et le code tiers inconnu, reduisant considerablement la surface d'attaque pour les vulnerabilites XSS.

Verrouiller les Iframes

Utilisez frame-ancestors 'none' pour empecher votre site d'etre integre dans des iframes sur d'autres domaines. Cela fournit une protection contre le clickjacking similaire a X-Frame-Options DENY mais avec plus de flexibilite pour autoriser des parents de confiance.

Questions Frequemment Posees

?Qu'est-ce qu'une Content Security Policy?

CSP est un en-tete HTTP qui indique aux navigateurs quelles sources de contenu sont autorisees sur votre page, prevenant les attaques XSS et l'injection de donnees.

?Que controle default-src?

Il agit comme solution de repli pour tous les types de ressources. Si une directive specifique comme script-src n'est pas definie, le navigateur utilise default-src.

?Dois-je utiliser 'unsafe-inline' dans script-src?

Evitez-le autant que possible car il autorise les scripts en ligne, ce qui affaiblit la protection XSS. Utilisez des nonces ou des hashes comme alternatives plus sures.

?Puis-je tester mon CSP avant le deploiement?

Oui. Utilisez d'abord l'en-tete Content-Security-Policy-Report-Only. Il enregistre les violations sans bloquer les ressources, vous permettant d'affiner votre politique.

?Quelle est la difference entre en-tete HTTP et meta tag?

Les deux delivrent la meme politique. L'en-tete HTTP est prefere car les meta tags ne supportent pas les directives frame-ancestors et report-uri.

?Mes donnees sont-elles privees?

Oui. Tout s'execute localement dans votre navigateur. Aucune donnee n'est envoyee a un serveur. Votre configuration CSP ne quitte jamais votre machine.

?Cet outil est-il gratuit?

Oui. Completement gratuit sans limites ni inscription requise. Construisez autant de politiques que necessaire sans aucune restriction.

Aidez-nous à améliorer

Aimez-vous cet outil ?

Chaque outil Kitmul est construit à partir de vraies demandes d'utilisateurs. Votre note et vos suggestions nous aident à corriger des bugs, ajouter des fonctionnalités manquantes et créer les outils dont vous avez vraiment besoin.

Notez cet outil

Cliquez sur une étoile pour nous dire si cet outil vous a été utile.

Suggérez une amélioration ou signalez un bug

Une fonctionnalité manque ? Vous avez trouvé un bug ? Une idée ? Dites-le-nous et nous l'examinerons.

Outils associés

Lectures Recommandées

Livres Recommandes sur la Securite Web et CSP

En tant que partenaire Amazon, nous percevons une commission sur les achats qualifiés.

Boostez vos Compétences

Outils de Securite pour Developpeurs Web

En tant que partenaire Amazon, nous percevons une commission sur les achats qualifiés.

Newsletter

Recevez des Conseils Productivité et les Nouveaux Outils en Premier

Rejoignez les créateurs et développeurs qui valorisent la confidentialité. Chaque édition : nouveaux outils, astuces productivité et mises à jour — sans spam.

Accès prioritaire aux nouveaux outils
Désabonnez-vous à tout moment, sans questions