Content Security Policy (CSP)

The use of Content Security Policy (CSP) (opens in a new tab) on your website requires adjustment of certain directives specifically for Live Chat, depending on the strictness of your policy.

General guidelines

There are two wildcard URLs you need to be aware of:

1. https://*.infobip.com, which serves every Live Chat request.
2. Depending on your account's settings, https://*.cloudfront.net might serve your widget's icons.

Since CSP implementation varies depending on your specific solution, we cannot provide a specific configuration guide. The recommended approach is to integrate Live Chat into your website and address CSP errors as they appear. This process should be straightforward, as CSP errors are descriptive and can easily be identified in your browser's console.

All Live Chat-related errors can be resolved by adding https://*.infobip.com to the corresponding directive. However, the img-src directive (opens in a new tab) may also require https://*.cloudfront.net, depending on your account settings.

Here is a detailed breakdown of the possible wildcard URLs you may encounter:

• https://livechat.infobip.com hosts all Live Chat web resources, including JavaScript, CSS, and HTML files.
• https://livechat-*.infobip.com is used for WebSocket communication with Infobip servers. The exact URL depends on your account settings. Example: https://livechat-fr.infobip.com
• https://api[-*].infobip.com handles regular HTTPS communication with Infobip servers. Similar to the previous wildcard example, the final URL depends on your account settings. Examples: https://api.infobip.com or https://api-eu1.infobip.com
• https://*.cloudfront.net/infobiplivechat-configuration/ might host icons for your widget, depending on your account's settings.

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://*.infobip.com 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:

1. unsafe-inline (opens in a new tab) - we do not recommend using this unless your directive already contains it.
2. nonce (opens in a new tab) - you can assign any nonce to the widget loading script snippet.
3. 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. Note that this directive contains two entries:

1. https://*.infobip.com is the default domain used for hosting your widget's icons.
2. https://*.cloudfront.com is the domain used for accounts in some regions.

We recommend including both domains to avoid unexpected issues if your widget's icons or account settings change.

Additionally, if you want to use the widget's default icon, you must specify the data: protocol in the directive.

Be cautious, as this practice is generally considered unsafe and should be avoided whenever possible. However, it is required in this case because the default icon is an SVG.