Content Security Policy (CSP)

If you implement a Content Security Policy (CSP) (opens in a new tab) on your website, you may need to adjust certain directives specifically for Live Chat, depending on the strictness of your policy.

General guidelines

There are two wildcard URLs you need be aware of:

https://*.infobip.com, which serves every Live Chat request. https://*.cloudfront.net, which serves your widget's icons.

Since CSP implementation varies based on your specific solution, we cannot offer a definitive guide on how to configure it. The recommended approach is to integrate Live Chat into your website and address CSP errors one by one. This should be a fairly straightforward and simple process, because CSP errors are descriptive and can easily be found in the console of your browser.

All Live Chat related errors should be resolved by adding one of the mentioned wildcard URLs to the affected directive.

Here's a more detailed breakdown of the URLs:

• https://livechat.infobip.com hosts all Live Chat web resources. That includes JavaScript, CSS, and HTML files.
• https://livechat-*.infobip.com is used for WebSocket communication with Infobip servers. The final form of the URL will depend on your account settings. An example would be https://livechat-fr.infobip.com.
• https://api[-*].infobip.com is used for regular HTTPS communication with Infobip servers. Similar to the previous wildcard example, this URL also depends on your account settings, for example https://api.infobip.com or https://api-eu1.infobip.com.
• https://*.cloudfront.net/infobiplivechat-configuration/ hosts media for your widget.

Handling the strictest directives

Adding default-src 'none' to your directive disallows the loading of any resources. In order for Live Chat to work properly in such environment, you will need to implement at least the following policy:

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://*.cloudfront.net ; ;

Let's take a look at every directive in detail.

script-src

The script-src (opens in a new tab) directive specifies valid JS sources. You will need to add https://*.infobip.com, which allows the page to load the widget script.

You might run into issues if you insert the widget installation script directly into your page's source code, because the script would be inline (not loaded as a resource). If you implement a strict CSP, we recommend loading the widget script as a resource hosted on your own server. If you wish to load it inline anyways, you have three options:

• unsafe-inline (opens in a new tab) - we do not recommend using this unless your directive already contains it.
• nonce (opens in a new tab) - you can assign any nonce to the widget loading script snippet.
• hash (opens in a new tab) - you can compute the hash from the snippet and use it. Note that if you make any changes to the snippet, you will have to update your CSP as well.

connect-src

The connect-src (opens in a new tab) directive specifies which URLs can be loaded on your website. You will need to add https://*.infobip.com here, because the widget needs to make HTTPS requests towards Infobip servers. The WebSocket connection is also covered in this case, because a WebSocket connection is first established using an HTTPS request and is then upgraded to WSS.

frame-src

The frame-src (opens in a new tab) directive specifies which resources can be loaded into an iframe embedded into your website. Since Live Chat is loaded using an iframe, you will need to add https://*.infobip.com.

style-src

The style-src (opens in a new tab) directive specifies valid stylesheet sources. You will need to add 'unsafe-inline' to this directive. Unfortunately, there are no other options at the moment, because the widget's styles are loaded inline with the widget itself. Should you need to address this, raise a request with us.

img-src

The img-src (opens in a new tab) directive specifies valid image sources. Here you have to add https://*.cloudfront.net, which is where your widget's icons are hosted. If you are not comfortable with safelisting the entire Cloudfront domain, you can use https://*.cloudfront.net/infobiplivechat-configuration/ (note the slash at the end!). This will allow files only from Infobip Live Chat's collection.