Content Security Policy（CSP）は、ウェブページが読み込めるリソースを制御することで、クロスサイトスクリプティング（XSS）攻撃を防ぐためのセキュリティ標準です。Mintlify では、ほとんどのサイトを保護するデフォルトの CSP を提供しています。ドキュメントをリバースプロキシやファイアウォールの背後でホストしていて、それらがデフォルトの CSP を上書きしている場合、各機能を正しく動作させるために CSP ヘッダーを設定する必要があります。

​
CSP ディレクティブ

次の CSP ディレクティブは、どのリソースを読み込めるかを制御します：
  • script-src: 実行可能なスクリプトを制御します
  • style-src: 読み込めるスタイルシートを制御します
  • font-src: 読み込めるフォントを制御します
  • img-src: 読み込める画像、アイコン、ロゴを制御します
  • connect-src: API 呼び出しや WebSocket 接続で接続可能な URL を制御します
  • frame-src: フレームや iframe に埋め込み可能な URL を制御します
  • default-src: 明示的に設定されていない場合に他のディレクティブへ適用されるフォールバック

​
ドメイン許可リスト

ドメイン用途CSP ディレクティブ必須
d4tuoctqmanu0.cloudfront.netKaTeX の CSS とフォントstyle-src, font-src必須
*.mintlify.devドキュメント内容connect-src必須
d3gk2c5xim1je2.cloudfront.netアイコン・画像・ロゴimg-src必須
www.googletagmanager.comGoogle Analytics / GTMscript-src, connect-src任意
cdn.segment.comSegment アナリティクスscript-src, connect-src任意
plausible.ioPlausible アナリティクスscript-src, connect-src任意
tag.clearbitscripts.comClearbit トラッキングscript-src任意
cdn.heapanalytics.comHeap アナリティクスscript-src任意
chat.cdn-plain.comPlain チャットウィジェットscript-src任意
chat-assets.frontapp.comFront チャットウィジェットscript-src任意

​
CSP の設定例

利用しているサービスのドメインだけを含めてください。ドキュメントで設定していない分析用ドメインは削除してください。
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;

​
プロキシ種別ごとの一般的な設定

ほとんどのリバースプロキシは、カスタムヘッダーの追加をサポートしています。

​
Cloudflare の設定

Response Header Transform Rule を作成します:
  1. Cloudflare のダッシュボードで Rules > Overview に移動します。
  2. Create rule > Response Header Transform Rule を選択します。
  3. ルールを設定します:
  • 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;
  1. ルールをデプロイします。

​
AWS CloudFront の設定

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

​
Vercel の構成

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

​
トラブルシューティング

ブラウザのコンソールで CSP 違反を特定するには:
  1. ブラウザの開発者ツールを開きます。
  2. Console タブを開きます。
  3. 次のようなエラーを探します:
    • 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