CSPエラーとは何ですか？
CSPはブラウザのセキュリティ機能で、読み込める外部リソースを制御します。設定が厳しすぎると、Intercom Messenger、Help Centerの記事、画像、Product Tours、メディアの正しい読み込みを妨げることがあります。
これは重要な機能の妨げとなり、以下のような問題を引き起こす可能性があります：
画像アップロードのブロック：Product ToursやMessengerで画像が読み込めません。
Product Toursが反応しない：Product Tourの変更が保存されません。
ビジュアルの破損：Intercomのコンポーネント（ロゴなど）が壊れた画像として表示されることがあります。
Help Centerの問題：記事が空白または部分的にしか表示されなかったり、無限の読み込みスピナーが発生することがあります。
注意：この文章は、Intercom MessengerまたはProduct Tours、Surveys、Checklists、Newsを含むIntercomのJS製品をサイトにインストールしている場合に関連します。Intercomの独立ホスト型Help Center（例：help.yourco.com）を使用している場合、Intercomが独自のCSPを管理しており、サイトのポリシーは適用されません。CSPの更新にはサーバー設定やHTTPレスポンスヘッダーへのアクセスが必要です。サイトのインフラを直接管理していない場合は、この文章を開発チームやIT部門と共有してください。
CSPエラーの特定方法
CSPがサイト上のIntercomに問題を引き起こしているか確認するには、ブラウザの開発者コンソールをチェックする必要があります。
ブラウザの開発者ツールを開きます（通常はF12キーを押すか、右クリックしてInspectを選択）。
Consoleタブに移動します。
サイト上で問題を再現します。例えば、画像をアップロードしたりProduct Tourを保存しようとします。
コンソールで赤いエラーメッセージを探します。これらはCSP違反を示し、Intercomのドメインへのブロックされたリクエスト（例：
uploads.intercomcdn.com、*.intercom.io）や、ブロックの原因となった特定のCSPディレクティブ（例：connect-srcやimg-src）を示すことが多いです。例：Refused to load the script 'https://widget.intercom.io' because it violates the following Content Security Policy directive: "script-src 'self'".
CSPエラーの解決方法
これらのエラーを解決するには、Intercomが必要とするドメインからのリソースを許可するようにサイトのCSP設定を更新する必要があります。
1. CSPディレクティブの更新
エラーディレクティブの特定：開発者コンソールのエラーで、制限を引き起こしたディレクティブ（例：
img-src）を特定します。Intercomドメインの許可リスト追加：サイトのCSP設定の該当ディレクティブに必要なIntercomのURLを追加します。
重要：通常、以下のディレクティブにIntercomのドメインを追加する必要があります。
connect-src：コア機能用。img-src：画像や添付ファイル用。media-src：メディアリソース用。
追加するドメインは*.intercomcdn.com、*.intercom.io、*.intercom-chat.comです（MessengerのライブWebSocket接続に必要で、*.intercom.ioのワイルドカードには含まれません）。最新のドメインリストはUsing Intercom with Content Security Policyをご覧ください。
さらに、記事ビューアのiframeの正しい読み込みを保証するために、intercom-sheets.comをframe-srcディレクティブに含めてください。
2. セキュリティヘッダーの見直し
X-Frame-OptionsやCSPのframe-ancestors設定など、過度に制限的なヘッダーもIntercomの機能に影響を与える可能性があります。これらの設定を確認し、必要に応じて調整してください。
3. ネットワーク設定の確認
ネットワークやファイアウォールの設定で、Intercomのサーバーへのアウトバウンド接続が許可されていることを確認してください。必要に応じてITチームにドメインの許可リスト追加を依頼してください。
4. 変更のテスト
CSP設定を更新した後：
影響を受けたサイトのページをリロードし、Intercom機能が正しく動作するか確認します。
開発者コンソールを監視し、新たなCSP違反がないか確認します。
CSP変更後はブラウザでハードリフレッシュを行い、キャッシュされた資産をクリアしてください。
ハードリフレッシュ後もIntercom機能が動作しない場合は、Consoleタブを再度開き、残っているCSP違反エラーを確認してください。新しいエラーメッセージは追加すべき次のディレクティブやドメインを示します。更新とテストを繰り返し、違反がなくなるまで続けてください。
CSPエラーで影響を受けるIntercom機能は？
異なるIntercom機能は異なるCSPディレクティブによってブロックされます。以下の表は各Intercom機能の一般的な症状、ブロックするCSPディレクティブ、許可リストに追加すべきドメインを示しています。
Intercom機能 | 症状 | ブロックされたディレクティブ | 許可リストに追加すべきドメイン |
Messenger（チャットウィジェット） | ウィジェットが読み込まれない、または表示されない | script-src、connect-src | widget.intercom.io、js.intercomcdn.com、*.intercom-chat.com、api-iam.intercom.io（US）、api-iam.eu.intercom.io（EU）、api-iam.au.intercom.io（AU） |
Help Center | 記事が空白、または読み込みに失敗する | frame-src、connect-src | intercom-sheets.com、*.intercom.io |
画像アップロード＆添付ファイル | 画像のアップロード失敗や破損画像の読み込み | img-src、connect-src | uploads.intercomcdn.com、*.intercomcdn.com |
Product Tours | ツアーが表示されない、または変更が保存されない | script-src、connect-src、img-src | *.intercom.io、*.intercomcdn.com |
メディア（動画／音声） | メディアファイルが再生できない | media-src、connect-src | *.intercomcdn.com |
ヒント：複数のコンソールエラーが同時に表示された場合は、最も制限の厳しいディレクティブ（例：script-srcはimg-srcよりも多くブロックします）から解決してください。1つのディレクティブ修正で複数の症状が解決することがあります。
特定のIntercom機能向けにCSPを更新する方法
Report-Onlyモードを使って監査し、段階的に機能ごとに変更を適用してください。
まずReport-Onlyモードを使う
Intercomの問題を修正するために強制的なContent Security Policy（CSP）を編集する前に、既存のポリシーに加えてContent-Security-Policy-Report-Onlyヘッダーを追加してください。これにより、何もブロックせずに違反を記録でき、安全に監査できます。
強制的なContent-Security-Policyヘッダーに加えて、サーバーのHTTPレスポンスヘッダーに以下のContent-Security-Policy-Report-Onlyヘッダーを追加してください。
Content-Security-Policy-Report-Only:
script-src 'self' https://widget.intercom.io https://js.intercomcdn.com;
connect-src 'self' https://*.intercom.io https://*.intercomcdn.com
https://*.intercom-chat.com wss://*.intercom-chat.com;
img-src 'self' https://*.intercomcdn.com;
media-src 'self' https://*.intercomcdn.com;
frame-src 'self' https://intercom-sheets.com;
変更を段階的に適用する
Report-Onlyモードを有効にして問題を再現します。
コンソール出力に表示されるブロックされたドメインをすべて記録します。
強制ポリシーの該当ディレクティブに必要なドメインを1つずつ追加します。
Report-Onlyモードで再テストし、新たな違反がないことを確認します。
変更を強制的なContent-Security-Policyヘッダーに反映させます。
反映後、ハードリフレッシュを行い、Intercom機能が期待通りに動作することを確認します。新たな違反がコンソールに表示された場合は、ステップ1から繰り返してください。
CSPを最新の状態に保つ方法
CSP設定は一度きりの修正ではありません。Intercomは定期的にインフラやドメイン要件を更新します。以下の手順でポリシーを最新に保ってください。
新たな違反を監視する
report-toディレクティブを使ってCSP報告エンドポイントを設定し、違反レポートを自動的にログサービスに送信します。これにより手動でコンソールを確認する必要がなくなります。注意：report-uriはreport-toに置き換えられています。report-toを使う場合は、対応するReporting-EndpointsHTTPレスポンスヘッダーも追加してエンドポイントグループを定義する必要があります。Intercomの更新やサイトインフラの変更後に違反レポートを確認してください。
Intercomのドメインリストを最新に保つ
Using Intercom with Content Security Policyの記事をブックマークし、Intercomの大きな更新時に確認してください。
Intercomのステータスページを購読し、必要なドメインに影響を与えるインフラ変更の通知を受け取ってください。
一般的な管理上の落とし穴を避ける
unsafe-inlineやunsafe-evalをショートカットとして使わないでください。これらをscript-srcに追加すると、主要なXSS（クロスサイトスクリプティング）保護が無効になり、一時的であってもスクリプトインジェクション攻撃にサイトがさらされます。代わりに、nonce（各スクリプトタグに追加される暗号トークン）やハッシュを使ってください。Intercomはnonceベースのポリシーを含む厳格なCSPv3（CSP標準の第3版）をサポートしています。CSPをバージョン管理してください。変更はすべてデプロイ履歴とともに記録し、機能が壊れた場合にディレクティブの変更をロールバックできるようにします。
まずステージング環境でテストしてください。CSPの変更は本番環境に展開する前に、ステージングやプレビュー環境でIntercom機能に対して必ず検証してください。
注意：Google Tag Manager（GTM）経由でIntercomを統合する場合、GTMコンテナのscript-srcとconnect-srcエントリもポリシーに含めてください。GTMはスクリプトを動的に注入するため、Intercomのドメインとは別に追加のCSP違反が発生する可能性があります。これらのディレクティブを更新しても問題が続く場合は、インラインスクリプトの代わりに専用のGTMタグでIntercom Messengerを展開してください。
注意：CSPヘッダーの変更はCDNやブラウザでキャッシュされることがあります。変更後にポリシーが更新されていない場合は、CDNキャッシュをクリアし、ハードリフレッシュを行ってから再度テストしてください。
備考：
Content Security Policyの更新にはサーバー設定やHTTPヘッダーへのアクセスが必要です。サイトのインフラを直接管理していない場合は、この文章を開発チームやIT部門と共有してください。
Google Tag Manager（GTM）経由でIntercom Messengerを統合する場合、GTMのホスティング地域がIntercomのワークスペース地域と一致していることを確認してください。
api_baseは地域に応じて次のエンドポイントに設定します：api-iam.intercom.io（US）、api-iam.eu.intercom.io（EU / EMEA - ヨーロッパ、中東、アフリカ）、またはapi-iam.au.intercom.io（AU）。