# Content Security Policy (CSP)

The use of [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) on your website requires adjustment of certain directives specifically for Live Chat, depending on the strictness of your policy.

## General guidelines

There are **three wildcard URLs** you need to be aware of:

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

Important
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.

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` and `https://*.infobip.net` to the corresponding directive. However, the [img-src directive](https://www.infobip.com/docs/live-chat/content-security-policy-csp-in-live-chat#img-src) 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` and `https://api[*].infobip.net` handle 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://api[*].infobip.com`, `https://api[*].infobip.net`, or `https://*.cloudfront.net/infobiplivechat-configuration/` 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 https://*.infobip.net ; frame-src https://*.infobip.com ; style-src 'unsafe-inline' ; img-src data: https://*.infobip.com https://*.infobip.net https://*.cloudfront.net ;`

Note
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.

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

### script-src

The [script-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline) - we do **not** recommend using this unless your directive already contains it.
2. [nonce](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#other_values) - you can assign any nonce to the widget loading script snippet.
3. [hash](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) - 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directive specifies which URLs can be loaded on your website. You will need to add `https://*.infobip.com` and `https://*.infobip.net` 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive specifies valid image sources. Note that this directive contains **three entries**:

- `https://*.infobip.com` and `https://*.infobip.net` are the default domains used for hosting your widget's icons.
- `https://*.cloudfront.com` is the domain used for accounts in some regions.

We recommend including **all three 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.

Note
**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.