コンテンツセキュリティポリシー(CSP)
Webサイトでコンテンツセキュリティポリシー(CSP)を使用する場合は、Live Chatに必要なソースを追加する必要があります。ウィジェットをまだインストールしていない場合は、インストールを参照してください。
必要なソースを見つけるには:
- ウィジェット構成ページを開き、[インストールとセキュリティ] を選択します。
- コンテンツ セキュリティ ポリシー (CSP) セクションで、推奨される CSP ソース を展開します。セキュリティ ポリシーでワイルドカード ソースが許可されていない場合は、代わりに [特定の CSP ソース] を展開します。
- 表示されたソースを対応する CSP ディレクティブに追加します。
一部のディレクティブでは、ウィジェット構成に表示されていない追加の値が必要です。ディレクティブの詳細を参照してください。
更新されたポリシーをテストするには、ウィジェットを含むページに移動し、ブラウザ コンソールでコンテンツ セキュリティ ポリシーに言及するエラー メッセージを探します。
ディレクティブの詳細
次の例は、ワイルドカード NTT CPaaS ソースを使用する一般的なポリシーエントリを示しています。ウィジェット設定に表示される値を使用し、Web サイトに必要なその他の値を保持します。
script-src (スクリプト ソース)
script-src ディレクティブは、有効な JavaScript ソースを指定します。このディレクティブにソースを追加して、Live Chat でウィジェット スクリプトを読み込めるようにします。
ウィジェット・インストール・スニペットには、インライン JavaScript が含まれています。ポリシーでインライン スクリプトがブロックされている場合は、次のいずれかの方法を使用します。
- インストール スクリプトに nonce を割り当ててから、同じ nonce をポリシーに追加します。
- インストール スクリプトの hash をポリシーに追加します。スニペットが変更された場合は、ハッシュも更新します。
Nonceの例
ハッシュの例
接続-src
connect-src ディレクティブは、ネットワーク接続を制御します。このディレクティブにソースを追加して、Live Chat が API リクエストと WebSocket 接続を行えるようにします。
フレーム-src
frame-src ディレクティブは、埋め込みフレームの有効なソースを指定します。このディレクティブにソースを追加して、Live Chat がウィジェットを iframe に読み込めるようにします。
スタイル-src
style-src ディレクティブは、有効なスタイルシートソースを指定します。このディレクティブにソースを追加して、Live Chat でスタイルを読み込めるようにします。
'unsafe-inline' を追加して、ウィジェットがインラインスタイルを使用できるようにします。
img-src (英語)
img-src ディレクティブは、有効な画像ソースを指定します。このディレクティブにソースを追加して、Live Chat がウィジェットアイコンなどの画像を読み込めるようにします。
デフォルトの Live Chat SVG アイコンはdata:スキームを使用します。デフォルトのアイコンを使用する場合は有効にします。