Content Security Policy (CSP)-Konfiguration

Domain-Zulassungsliste und Header-Konfigurationen für Reverse Proxies, Firewalls und Netzwerke mit strengen Sicherheitsrichtlinien

Die Content Security Policy (CSP) ist ein Sicherheitsstandard, der Cross-Site-Scripting-(XSS)-Angriffe verhindert, indem er kontrolliert, welche Ressourcen eine Webseite laden darf. Mintlify liefert eine Standard-CSP, die die meisten Websites schützt. Wenn Sie Ihre Dokumentation hinter einem Reverse Proxy oder einer Firewall hosten, die die Standard-CSP überschreibt, müssen Sie möglicherweise CSP-Header konfigurieren, damit Funktionen ordnungsgemäß funktionieren.

CSP-Direktiven

Die folgenden CSP-Direktiven steuern, welche Ressourcen geladen werden dürfen:

• script-src: Legt fest, welche Skripte ausgeführt werden dürfen
• style-src: Legt fest, welche Stylesheets geladen werden dürfen
• font-src: Legt fest, welche Schriftarten geladen werden dürfen
• img-src: Legt fest, welche Bilder, Icons und Logos geladen werden dürfen
• connect-src: Legt fest, zu welchen URLs für API-Aufrufe und WebSocket-Verbindungen eine Verbindung hergestellt werden darf
• frame-src: Legt fest, welche URLs in Frames oder iFrames eingebettet werden dürfen
• default-src: Standard-Fallback für andere Direktiven, wenn nicht explizit gesetzt

Domain-Whitelist

Domain	Zweck	CSP-Direktive	Erforderlich
d4tuoctqmanu0.cloudfront.net	KaTeX-CSS, Schriftarten	style-src, font-src	Erforderlich
*.mintlify.dev	Dokumentationsinhalte	connect-src	Erforderlich
d3gk2c5xim1je2.cloudfront.net	Icons, Bilder, Logos	img-src	Erforderlich
www.googletagmanager.com	Google Analytics/GTM	script-src, connect-src	Optional
cdn.segment.com	Segment-Analytics	script-src, connect-src	Optional
plausible.io	Plausible-Analytics	script-src, connect-src	Optional
tag.clearbitscripts.com	Clearbit-Tracking	script-src	Optional
cdn.heapanalytics.com	Heap-Analytics	script-src	Optional
chat.cdn-plain.com	Plain-Chat-Widget	script-src	Optional
chat-assets.frontapp.com	Front-Chat-Widget	script-src	Optional

Beispiel-CSP-Konfiguration

Fügen Sie nur Domains für Dienste hinzu, die Sie verwenden. Entfernen Sie alle Analytics-Domains, die Sie nicht für Ihre Dokumentation konfiguriert haben.

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;

Häufige Konfigurationen je Proxy-Typ

Die meisten Reverse-Proxys unterstützen das Hinzufügen benutzerdefinierter Header.

Cloudflare-Konfiguration

Erstellen Sie eine Regel zur Umwandlung von Antwort-Headern (Response Header Transform Rule):

1. Gehen Sie in Ihrem Cloudflare-Dashboard zu Rules > Overview.
2. Wählen Sie Create rule > Response Header Transform Rule.
3. Konfigurieren Sie die Regel:

• 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. Deployen Sie die Regel.

AWS-CloudFront-Konfiguration

Fügen Sie in CloudFront eine Richtlinie für Antwort-Header hinzu:

{
"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
        }
      }
    }
  }
}

Vercel-Konfiguration

Fügen Sie Folgendes zu Ihrer vercel.json hinzu:

{
  "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;"
        }
      ]
    }
  ]
}

Fehlerbehebung

Identifizieren Sie CSP-Verstöße in der Browserkonsole:

1. Öffnen Sie die Entwicklertools Ihres Browsers.
2. Wechseln Sie zum Tab Console.
3. Achten Sie auf Fehlermeldungen, die folgendermaßen beginnen:
   • 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