jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils SEO

Gratuit Generateur de politique CSP pour sites statiques

Générez un en-tete Content-Security-Policy pour les sites statiques avec options CDN, analytics, polices et embeds.

Chargement de l'outil...

Qu'est-ce que Generateur de politique CSP pour sites statiques ?

Content-Security-Policy (CSP) est un en-tête de sécurité du navigateur qui contrôle les ressources qu'une page est autorisée à charger. Il aide à prévenir les attaques de cross-site scripting, d'injection de données et d'autres attaques par injection de code. Pour les sites statiques, un en-tête CSP peut être simple et conservateur car la plupart des pages statiques chargent des ressources depuis des origines prévisibles et contrôlées.

Réponse rapide

Une Content Security Policy bloque les attaques de cross-site scripting et d'injection de données en restreignant les ressources que le navigateur peut charger. Commencez par une politique restrictive et élargissez-la uniquement si nécessaire.

Last updated: 2026-05-25

Limites

  • CSP ne protège pas contre les vulnérabilités côté serveur ou les bibliothèques tierces compromises déjà incluses dans la politique.
  • Les gestionnaires d'événements en ligne et les URL javascript: sont bloqués sauf si 'unsafe-inline' ou un hash/nonce est défini.
  • GitHub Pages ne supporte pas les en-têtes HTTP personnalisés ; utilisez un CSP basé sur balise meta, qui a une prise en charge limitée des directives par rapport à l'en-tête HTTP.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez un préréglage qui correspond à votre type de site : statique, avec CDN, avec analyses, ou avec contenu intégré.
  2. Examinez les directives générées et activez les sources supplémentaires dont votre site a besoin.
  3. Copiez l'en-tête CSP dans votre configuration d'hébergement ou comme balise meta.
  4. Déployez d'abord la version report-only et vérifiez la console du navigateur pour les violations avant d'appliquer la politique.

A quoi il sert

  • Créer un CSP conservateur pour un site HTML statique simple sans ressources externes.
  • Ajouter des sources de scripts et de polices pour Google Fonts, Bootstrap CDN ou Google Analytics.
  • Préparer un CSP pour GitHub Pages qui prend en compte l'origine d'hébergement.

Cas d'usage

Exemples concrets

Exemple

CSP de site statique simple

Un site HTML codé à la main sans CDN, sans analyses et sans intégrations reçoit un CSP minimal qui autorise sa propre origine pour tous les types de ressources.

Exemple

Site statique avec CDN et analyses

Un site utilisant un CDN de framework CSS, Google Fonts et Google Analytics reçoit un CSP qui autorise ces origines tout en bloquant tout le reste.

Erreurs frequentes

  • Déployer un CSP en mode enforce sans le tester d'abord en mode report-only, ce qui peut casser des ressources légitimes.
  • Utiliser 'unsafe-inline' pour les scripts sans comprendre que cela désactive la plupart de la protection XSS offerte par CSP.
  • Oublier d'ajouter le domaine de prévisualisation GitHub Pages ou l'origine CDN à la politique, ce qui casse le site au déploiement.

Vérification

  1. Déployez le CSP d'abord en mode report-only en utilisant Content-Security-Policy-Report-Only et vérifiez la console du navigateur pour les rapports de violation.
  2. Passez à l'en-tête enforce uniquement après avoir confirmé qu'aucune ressource légitime n'est bloquée.

Comparaison

CSP vs Permissions-Policy vs Referrer-Policy

AspectContent-Security-PolicyPermissions-PolicyReferrer-Policy
What it controlsWhich resources (scripts, styles, images, fonts) the page can load and from which originsWhich browser features (camera, microphone, geolocation, payment) the page can accessHow much referrer information is sent when the page navigates to or loads a resource from another origin
Example directivesdefault-src 'self'; script-src 'self' cdn.example.com; img-src *camera=(), geolocation=(self), fullscreen=*strict-origin-when-cross-origin, no-referrer, same-origin
Delivered as header or metaBoth. HTTP header is preferred. Meta tag works but does not support frame-ancestors or report-uri.HTTP header only. Meta tag is not supported for Permissions-Policy.Both. Meta tag works and is commonly used for static pages.
What happens if misconfiguredResources are blocked. The page may appear broken with missing styles, scripts, or images.Features silently fail. JavaScript calls to blocked APIs throw without visible browser UI.Referrer data is sent with unintended detail or is missing when analytics need it.

CSP controls resource loading, Permissions-Policy controls feature access, and Referrer-Policy controls referrer data sent to other origins. They are complementary security headers that serve different purposes.

FAQ

Questions sur Generateur de politique CSP pour sites statiques

CSP peut-il être délivré comme une balise meta ?

Oui. Utilisez <meta http-equiv='Content-Security-Policy' content='...'> dans l'en-tête de la page. Notez que certaines directives comme frame-ancestors et report-uri ne fonctionnent pas dans la balise meta.

Dois-je commencer par le mode report-only ?

Oui. Déployez d'abord avec Content-Security-Policy-Report-Only, surveillez la console du navigateur pour les violations, ajustez la politique, et passez au mode enforce uniquement lorsque aucune violation inattendue n'apparaît.

Quel est le default-src le plus sûr pour un site statique ?

default-src 'self' est un point de départ pratique. Il autorise les ressources de la même origine et bloque tout le reste. Ajoutez des origines spécifiques pour les CDN, les polices et les analyses selon les besoins.

Comment autoriser Google Analytics, Google Fonts ou un CDN dans CSP ?

Ajoutez l'origine spécifique à la directive concernée. Pour Google Analytics : script-src https://www.googletagmanager.com et connect-src https://www.google-analytics.com. Pour Google Fonts : style-src https://fonts.googleapis.com et font-src https://fonts.gstatic.com. Pour un CDN comme cdnjs : script-src https://cdnjs.cloudflare.com. Déployez d'abord en mode report-only pour détecter toute origine tierce supplémentaire que votre site charge avant d'appliquer la politique.

Outils lies

Autres outils outils seo

A essayer aussi

A essayer aussi