Configuration de la Content Security Policy (CSP)

Liste d’autorisations de domaines et configurations d’en-têtes pour les reverse proxies, pare-feu et réseaux appliquant des politiques de sécurité strictes

La Content Security Policy (CSP) est une norme de sécurité qui aide à prévenir les attaques de cross-site scripting (XSS) en contrôlant les ressources qu’une page web est autorisée à charger. Mintlify sert une CSP par défaut qui protège la plupart des sites. Si vous hébergez votre documentation derrière un reverse proxy ou un pare-feu qui remplace la CSP par défaut, vous devrez peut-être configurer les en-têtes CSP pour que les fonctionnalités fonctionnent correctement.

Directives CSP

Les directives CSP suivantes servent à contrôler quelles ressources peuvent être chargées :

• script-src : Détermine quels scripts peuvent être exécutés
• style-src : Détermine quelles feuilles de style peuvent être chargées
• font-src : Détermine quelles polices peuvent être chargées
• img-src : Détermine quelles images, icônes et logos peuvent être chargés
• connect-src : Détermine quelles URL peuvent être contactées pour les appels d’API et les connexions WebSocket
• frame-src : Détermine quelles URL peuvent être intégrées dans des cadres ou des iframes
• default-src : Valeur de repli pour les autres directives lorsqu’elles ne sont pas définies explicitement

Liste d’autorisation des domaines

Domaine	Finalité	Directive CSP	Obligatoire
d4tuoctqmanu0.cloudfront.net	CSS et polices KaTeX	style-src, font-src	Obligatoire
*.mintlify.dev	Contenu de la documentation	connect-src	Obligatoire
d3gk2c5xim1je2.cloudfront.net	Icônes, images, logos	img-src	Obligatoire
www.googletagmanager.com	Google Analytics/GTM	script-src, connect-src	Facultatif
cdn.segment.com	Analytics Segment	script-src, connect-src	Facultatif
plausible.io	Analytics Plausible	script-src, connect-src	Facultatif
tag.clearbitscripts.com	Suivi Clearbit	script-src	Facultatif
cdn.heapanalytics.com	Analytics Heap	script-src	Facultatif
chat.cdn-plain.com	Widget de chat Plain	script-src	Facultatif
chat-assets.frontapp.com	Widget de chat Front	script-src	Facultatif

Exemple de configuration CSP

Incluez uniquement les domaines des services que vous utilisez. Supprimez tous les domaines d’analytics que vous n’avez pas configurés pour votre documentation.

Content-Security-Policy:
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com cdn.segment.com plausible.io tag.clearbitscripts.com cdn.heapanalytics.com
chat.cdn-plain.com chat-assets.frontapp.com;
style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net;
font-src 'self' d4tuoctqmanu0.cloudfront.net;
img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net;
connect-src 'self' *.mintlify.dev www.googletagmanager.com cdn.segment.com plausible.io;
frame-src 'self' *.mintlify.dev;

Configurations courantes selon le type de proxy

La plupart des proxies inverses prennent en charge l’ajout d’en-têtes personnalisés.

Configuration Cloudflare

Créez une règle de transformation des en-têtes de réponse :

1. Dans votre tableau de bord Cloudflare, accédez à Rules > Overview.
2. Sélectionnez Create rule > Response Header Transform Rule.
3. Configurez la règle :

• Modify response header: Set static
  • Header name: Content-Security-Policy
  • Header value:
    default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net; font-src 'self' d4tuoctqmanu0.cloudfront.net; img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net; connect-src 'self' *.mintlify.dev; frame-src 'self' *.mintlify.dev;
    

4. Déployez la règle.

Configuration de AWS CloudFront

Ajoutez une stratégie d’en-têtes de réponse dans CloudFront :

{
"ResponseHeadersPolicy": {
    "Name": "MintlifyCSP",
    "Config": {
    "SecurityHeadersConfig": {
        "ContentSecurityPolicy": {
        "ContentSecurityPolicy": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net; font-src 'self' d4tuoctqmanu0.cloudfront.net; img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net; connect-src 'self' *.mintlify.dev; frame-src 'self' *.mintlify.dev;",
        "Override": true
        }
      }
    }
  }
}

Configuration de Vercel

Ajoutez ceci à votre vercel.json :

{
"headers": [
    {
    "source": "/(.*)",
    "headers": [
        {
        "key": "Content-Security-Policy",
        "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net; font-src 'self' d4tuoctqmanu0.cloudfront.net; img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net; connect-src 'self' *.mintlify.dev; frame-src 'self' *.mintlify.dev;"
        }
      ]
    }
  ]
}

Dépannage

Identifiez les violations de la CSP dans la console de votre navigateur :

1. Ouvrez les outils de développement de votre navigateur.
2. Accédez à l’onglet Console.
3. Recherchez des erreurs commençant par :
   • Content Security Policy: The page's settings blocked the loading of a resource
   • Refused to load the script/stylesheet because it violates the following Content Security Policy directive
   • Refused to connect to because it violates the following Content Security Policy directive