コンテンツセキュリティポリシー(CSP)

ウェブサイトで Content Security Policy (CSP) (opens in a new tab) を使用するには、ポリシーの厳格さに応じて、Live Chat専用の特定のディレクティブを調整する必要があります。

一般的なガイドライン

注意が必要なワイルドカード URL は 2 つあります。

https://*.infobip.com は、すべてのLive Chat要求に対応します。
アカウントの設定によっては、https://*.cloudfront.netがウィジェットのアイコンを表示する場合があります。

大事なPlease note that we use the secure HTTPS protocol. Infobip requests will never use insecure protocols. Using HTTPS in CSP guarantees that you will not unintentionally allow insecure traffic on your website.

CSP の実装は特定のソリューションによって異なるため、特定の構成ガイドを提供することはできません。推奨されるアプローチは、Live ChatをWebサイトに統合し、CSPエラーが発生したときに対処することです。CSPエラーは説明的であり、ブラウザのコンソールで簡単に識別できるため、このプロセスは簡単です。

Live Chat関連のすべてのエラーは、対応するディレクティブにhttps://*.infobip.comを追加することで解決できます。ただし、img-src ディレクティブには、アカウント設定によっては https://*.cloudfront.net も必要になる場合があります。

以下は、発生する可能性のあるワイルドカード URL の詳細な内訳です。

https://livechat.infobip.comは、JavaScript、CSS、HTML ファイルなど、Live Chatすべての Web リソースをホストします。
https://livechat-*.infobip.comは、Infobip サーバーとの WebSocket 通信に使用されます。正確な URL は、アカウント設定によって異なります。例: https://livechat-fr.infobip.com
https://api[-*].infobip.com は、Infobip サーバーとの通常の HTTPS 通信を処理します。前のワイルドカードの例と同様に、最終ページ URL はアカウント設定によって異なります。例: https://api.infobip.com または https://api-eu1.infobip.com
https://*.cloudfront.net/infobiplivechat-configuration/は、アカウントの設定によっては、ウィジェットのアイコンをホストする場合があります。

最も厳密なディレクティブの処理

ディレクティブに default-src 'none' を追加すると、リソースの読み込みが禁止されます。このような環境で Live Chat が正しく機能するには、少なくとも次のポリシーを実装する必要があります。

default-src 'none' ; script-src https://*.infobip.com ; connect-src https://*.infobip.com ; frame-src https://*.infobip.com ; style-src 'unsafe-inline' ; img-src https://*.infobip.com https://*.cloudfront.net ;

備考This is an example containing values needed for Live Chat only. In real cases, you will probably need to include self as well as any other resources your website uses.

すべてのディレクティブを詳しく見てみましょう。

script-src (スクリプトソース)

script-src (opens in a new tab) ディレクティブは、有効な JS ソースを指定します。https://*.infobip.comを追加して、ページがウィジェットスクリプトを読み込めるようにする必要があります。

ウィジェットのインストールスクリプトをページのソースコードに直接挿入すると、スクリプトがインライン(リソースとしてロードされない)になるため、問題が発生する可能性があります。厳密な CSP を実装する場合は、ウィジェットスクリプトを独自のサーバーでホストされているリソースとして読み込むことをお勧めします。

いずれにせよインラインでロードしたい場合は、次の3つのオプションがあります。

[unsafe-inline] (英語)(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline (opens in a new tab)) - ディレクティブに既に含まれていない限り、これを使用することはお勧めしません。
ナンス (opens in a new tab) - ウィジェット読み込みスクリプトスニペットに任意のノンスを割り当てることができます。
ハッシュ (opens in a new tab) - スニペットからハッシュを計算して使用できます。スニペットに変更を加えた場合は、CSPも更新する必要があることに注意してください。

接続-src

connect-src (opens in a new tab) ディレクティブは、Web サイトに読み込むことができる URL を指定します。ウィジェットはInfobipサーバーに対してHTTPSリクエストを行う必要があるため、ここにhttps://*.infobip.comを追加する必要があります。

この場合、WebSocket 接続は最初に HTTPS 要求を使用して確立され、その後 WSS にアップグレードされるため、WebSocket 接続もカバーされます。

フレーム-src

frame-src (opens in a new tab) ディレクティブは、Web サイトに埋め込まれた iframe に読み込むことができるリソースを指定します。Live Chat は iframe を使用して読み込まれるため、https://*.infobip.comを追加する必要があります。

スタイル-src

style-src (opens in a new tab) ディレクティブは、有効なスタイルシートのソースを指定します。このディレクティブに 'unsafe-inline' を追加する必要があります。残念ながら、現時点では、ウィジェットのスタイルはウィジェット自体にインラインで読み込まれるため、他のオプションはありません。これに対処する必要がある場合は、当社にリクエストを提起してください。

img-src (英語)

img-src (opens in a new tab) ディレクティブは、有効な画像ソースを指定します。このディレクティブには 2 つのエントリが含まれていることに注意してください。

https://*.infobip.comは、ウィジェットのアイコンをホストするために使用されるデフォルトのドメインです。
https://*.cloudfront.comは、一部の地域のアカウントに使用されるドメインです。

ウィジェットのアイコンやアカウント設定が変更された場合の予期しない問題を回避するために、両方のドメインを含めることをお勧めします。

さらに、ウィジェットのデフォルトのアイコンを使用する場合は、ディレクティブでdata:プロトコルを指定する必要があります。

この行為は一般的に安全ではないと考えられており、可能な限り避けるべきであるため、注意してください。ただし、デフォルトのアイコンはSVGであるため、この場合は必須です。

Live Chat の JavaScript SDK アナライズ