メインコンテンツにスキップ

コンテンツセキュリティポリシー(CSP)エラーの解決方法

画像アップロードやProduct ToursなどのIntercom機能を妨げるContent Security Policy(CSP)エラーの特定と解決方法を学びましょう。

対応者:Dawn Perrott

CSPエラーとは何ですか?

Content Security Policy(CSP)は、ウェブサイトで読み込めるリソース(スクリプトや画像など)を制御するセキュリティ機能です。サイトのCSP設定が厳しすぎると、Intercomのdomainからのリソースがブロックされることがあります。例えば、Help Centerの記事が空白になったり、コンテンツにアクセスしようとすると無限の読み込みスピナーが表示されることがあります。

これは重要な機能に支障をきたし、以下のような問題を引き起こす可能性があります:

  • 画像アップロードのブロック:Product ToursやMessengerで画像が読み込めません。

  • 反応しないProduct Tours:Product Tourの変更が保存されません。

  • 壊れたビジュアル:Intercomのコンポーネント(ロゴなど)が壊れた画像として表示されることがあります。

  • Help Centerの問題:記事が空白または部分的にしか表示されなかったり、無限の読み込みスピナーが発生することがあります。


CSPエラーの特定

サイトでIntercomに関する問題がCSPによるものか確認するには、ブラウザの開発者コンソールをチェックする必要があります。

  1. ブラウザの開発者ツールを開きます(通常はF12キーを押すか、右クリックしてInspectを選択)。

  2. Consoleタブに移動します。

  3. サイト上で問題を再現します。例えば、画像をアップロードしたりProduct Tourを保存しようとします。

  4. コンソールに赤いエラーメッセージが表示され、CSP違反を示しているか確認します。これらのメッセージはIntercomのdomainへのブロックされたリクエスト(例:uploads.intercomcdn.com*.intercom.io)や、ブロックの原因となった特定のCSPディレクティブ(例:connect-srcimg-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.comframe-srcディレクティブに含めてください。

2. セキュリティヘッダーの見直し

X-Frame-OptionsやCSPのframe-ancestors設定など、過度に制限的なヘッダーもIntercomの機能に影響を与える可能性があります。これらの設定を確認し、必要に応じて調整してください。

3. ネットワーク設定の確認

ネットワークやファイアウォールの設定でIntercomのサーバーへのアウトバウンド接続が許可されていることを確認してください。必要に応じてITチームにdomainのホワイトリスト追加を依頼してください。

4. 変更のテスト

CSP設定を更新した後:

  • 影響を受けたサイトのページをリロードし、Intercomの機能が正しく動作するか確認します。

  • 新たなCSP違反が発生していないか開発者コンソールを監視します。

  • CSPの変更後は、ブラウザでハードリフレッシュを行い、キャッシュされた資産をクリアしてください。

注意事項

  • これらのCSP更新の実装には、開発チームやIT部門の支援が必要な場合があります。

  • Intercom MessengerをGTM経由で統合する場合、GTMのホスティング地域がIntercomのホスティング地域と一致していることを確認してください。EMEAの場合、api_baseをhttps://api-iam.eu.intercom.ioに設定します。問題が続く場合は、インラインスクリプトではなく専用のGTMタグでMessengerを展開してください。

こちらの回答で解決しましたか?