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ドメインの許可リスト追加: 必要なIntercomのURLをサイトのCSP設定の該当ディレクティブに追加します。
重要: 通常、以下のディレクティブに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の正しい読み込みを保証するために、frame-srcディレクティブにintercom-sheets.comを含めてください。
注意: 独立したHelp Centerでは記事が正しく読み込まれるが、Messenger内で開くと空白または表示されない場合、CSPの不一致が最も考えられます。Messengerは記事をiframeでレンダリングします。ポリシーがframe-src intercom-sheets.comやconnect-src *.intercom.ioをブロックしていると、Messengerの他の部分は読み込まれても記事ビューアは機能しません。frame-srcディレクティブにintercom-sheets.comを追加して解決してください。
2. セキュリティヘッダーの見直し
X-Frame-OptionsやCSPのframe-ancestors設定など、過度に制限的なヘッダーもIntercomの機能に影響を与える可能性があります。これらの設定を確認し、必要に応じて調整してください。
3. ネットワーク設定の確認
ネットワークやファイアウォールの設定でIntercomのサーバーへのアウトバウンド接続が許可されていることを確認してください。必要に応じてITチームにドメインの許可リスト追加を依頼してください。
4. 変更のテスト
CSP設定を更新した後:
影響を受けたサイトのページをリロードし、Intercom機能が正しく動作するか確認します。
開発者コンソールを監視し、新たなCSP違反がないか確認します。
CSP変更後はブラウザでハードリフレッシュを行い、キャッシュされた資産をクリアしてください。
ハードリフレッシュ後もIntercom機能が動作しない場合は、Consoleタブを再度開き、残っているCSP違反エラーを確認します。新しいエラーメッセージには追加すべきディレクティブやドメインが示されるため、更新とテストを繰り返し、違反がなくなるまで続けてください。
CSPエラーで影響を受けるIntercom機能は？
異なるIntercom機能は異なるCSPディレクティブによってブロックされます。以下の表は各機能の一般的な症状、ブロックする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 | 記事が空白または読み込めず、MessengerのHelpスペース内で閲覧した場合も同様 | 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ヘッダーを追加してください。これにより違反がログに記録されますが、ブロックはされないため、安全に監査できます。
サーバーのHTTPレスポンスヘッダーに以下のContent-Security-Policy-Report-Onlyヘッダーを追加してください（既存の強制的なContent-Security-Policyヘッダーは置き換えずに併用します）：
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）。