Construire une Content Security Policy

Générez des en-tetes CSP de manière 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 éditeur 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 traité 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 contrôle 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 spécifiques.

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 Sécurité 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 créez une liste blanche que les navigateurs appliquent automatiquement. Même si un attaquant injecte du code malveillant dans votre page, le navigateur refuse de l'exécuter.

Comprendre les Directives CSP

Chaque directive contrôle un type spécifique de ressource. La directive default-src agit comme solution de repli pour tout type non spécifié. La directive script-src gouverne les sources JavaScript, style-src gère le CSS et img-src contrôle les images. Des directives plus specialisees comme connect-src restreignent fetch et XMLHttpRequest, tandis que frame-ancestors détermine quels sites peuvent intégrer 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 sécurité; preferez les approches basées sur nonce ou hash. La valeur 'strict-dynamic' fait confiance aux scripts charges par des scripts déjà approuves, simplifiant l'utilisation des CDN.

Déployer CSP en Production

Commencez par Content-Security-Policy-Report-Only pour collecter les rapports de violations sans casser la fonctionnalité. Analysez les rapports, ajustez votre politique puis passez à l'en-tete d'application. Utilisez les directives report-uri ou report-to pour envoyer les violations à un endpoint de journalisation. Surveillez régulièrement 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 utilisé 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

Définissez default-src sur 'self' et upgrade-insecure-requests pour forcer HTTPS sur toutes les ressources. Cela empêche les navigateurs de charger des ressources HTTP sur des pages HTTPS, eliminant les avertissements de contenu mixte et ameliorant la sécurité.

Restreindre les Scripts Tiers

Configurez script-src pour autoriser uniquement 'self' et des domaines CDN spécifiques 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 empêcher votre site d'être intégré dans des iframes sur d'autres domaines. Cela fournit une protection contre le clickjacking similaire a X-Frame-Options DENY mais avec plus de flexibilité pour autoriser des parents de confiance.

Questions Fréquemment Posees

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

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

?Que contrôle default-src?

Il agit comme solution de repli pour tous les types de ressources. Si une directive spécifique comme script-src n'est pas définie, le navigateur utilisé default-src.

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

Évitez-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 déploiement?

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 différence entre en-tete HTTP et meta tag?

Les deux delivrent la même politique. L'en-tete HTTP est préféré car les meta tags ne supportent pas les directives frame-ancestors et report-uri.

?Mes données sont-elles privées?

Oui. Tout s'exécuté localement dans votre navigateur. Aucune donnée n'est envoyée à 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 nécessaire 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 Recommandés sur la Sécurité Web et CSP

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

Boostez vos Compétences

Outils de Sécurité pour Développeurs 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