CSPエラーとは何ですか?
Content Security Policy(CSP)は、ウェブサイトで読み込めるリソース(スクリプトや画像など)を制御するセキュリティ機能です。サイトのCSP設定が厳しすぎると、Intercomのdomainからのリソースがブロックされることがあります。例えば、Help Centerの記事が空白表示になったり、コンテンツにアクセスしようとすると無限の読み込みスピナーが表示されることがあります。
これにより、以下のような重要な機能が妨げられ、問題が発生することがあります:
画像アップロードのブロック:Product ToursやMessengerで画像が読み込めません。
反応しないProduct Tours:Product Tourの変更が保存されません。
壊れたビジュアル:Intercomのコンポーネント(ロゴなど)が壊れた画像として表示されることがあります。
Help Centerの問題:記事が空白または部分的にしか表示されなかったり、無限の読み込みスピナーが発生することがあります。
CSPエラーの特定
サイトでIntercomに関する問題がCSPによるものか確認するには、ブラウザの開発者コンソールを確認する必要があります。
ブラウザの開発者ツールを開きます(通常はF12キーを押すか、右クリックしてInspectを選択)。
Consoleタブに移動します。
サイト上で問題を再現します。例えば、画像をアップロードしたりProduct Tourを保存しようとします。
コンソールに赤いエラーメッセージが表示され、CSP違反を示しているか確認します。これらのメッセージは、Intercomのdomainへのブロックされたリクエスト(例:
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の必要なdomainからのリソースを許可するようにサイトのCSP設定を更新する必要があります。
1. CSPディレクティブの更新
エラーディレクティブの特定:開発者コンソールのエラーで、制限を引き起こしたディレクティブ(例:
img-src)を特定します。Intercomのdomainを許可リストに追加:サイトのCSP設定の該当ディレクティブに必要なIntercomのURLを追加します。
重要:通常、以下のディレクティブにIntercomのdomainを追加する必要があります。
connect-src:コア機能用。img-src:画像や添付ファイル用。media-src:メディアリソース用。
追加するdomainは*.intercomcdn.comと*.intercom.ioです。最新のdomainリストは常にIntercomの公式ドキュメントを参照してください。
さらに、記事ビューアのiframeの正しい読み込みを保証するために、intercom-sheets.comをframe-srcディレクティブに含めてください。
2. セキュリティヘッダーの見直し
X-Frame-OptionsやCSPのframe-ancestors設定など、過度に制限的なヘッダーもIntercomの機能に影響を与える可能性があります。これらの設定を確認し、必要に応じて調整してください。
3. ネットワーク設定の確認
ネットワークやファイアウォールの設定で、Intercomのサーバーへのアウトバウンド接続が許可されていることを確認してください。必要に応じてITチームにdomainの許可リスト追加を依頼してください。
4. 変更のテスト
CSP設定を更新した後:
サイトの該当ページをリロードし、Intercomの機能が正しく動作するか確認してください。
開発者コンソールを監視し、新たなCSP違反が発生していないか確認します。
CSPの変更後は、ブラウザでハードリフレッシュを行い、キャッシュされた資産をクリアしてください。
注意:
これらのCSP更新の実装には、開発チームやIT部門の支援が必要な場合があります。
GTM経由でIntercom Messengerを統合する場合、GTMのホスティング地域がIntercomのホスティング地域と一致していることを確認してください。EMEAの場合、api_baseはhttps://api-iam.eu.intercom.io/に設定してください。問題が続く場合は、インラインスクリプトではなく専用のGTMタグでMessengerを展開してください。
