Documentation navigation
Documentation

Chatlio with Content Security Policy (CSP)

You can use Chatlio with Content Security Policy (CSP) headers. If you load the Chatlio embed code from a javascript file, you can avoid the use of script-src 'unsafe-inline'.

The short version

If you want the fewest rules, these three lines are enough:

default-src 'self' *.chatlio.com;
style-src 'self' 'unsafe-inline' *.chatlio.com;
img-src * data:;

What each line does:

  • default-src covers the widget’s script and its connections. A browser uses this line for scripts and connections when your policy has no script-src or connect-src line.
  • style-src lets the widget apply its styles.
  • img-src lets the widget show images in messages, your team’s avatars and its own icons. The icons are built into the widget as data: images, so keep data:.

Write *.chatlio.com without https:// in front. On a secure page, that one entry covers both the widget’s requests and the live connection it gets replies over (wss://api.chatlio.com). We checked this in the current browser engines behind Chrome, Edge, Firefox and Safari.

One line isn’t enough. A single default-src line would also need 'unsafe-inline' for the widget’s styles, and on that line it allows inline scripts too.

If your policy already has these lines

If your policy has its own script-src and connect-src lines, add Chatlio to each one:

default-src 'self' *.chatlio.com;
script-src 'self' *.chatlio.com;
connect-src 'self' *.chatlio.com;
img-src * data:;
object-src 'none';
style-src 'unsafe-inline' *.chatlio.com;

Chatlio doesn’t need object-src 'none'. It’s a good rule to keep if you already have it.

If your policy writes hosts with https://, such as https://*.chatlio.com, add wss://*.chatlio.com to connect-src (or to default-src when you have no connect-src line). Current browsers let an https:// entry cover the live connection, but older ones don’t, and without it replies reach your visitors more slowly.

If you list image hosts one by one

img-src * is the simplest rule. If your policy lists each image host instead, include these, or agents’ images and avatars show up blank:

img-src 'self' data: *.chatlio.com;
  • *.chatlio.com covers images and files your agents send, which load from uploads-cdn.chatlio.com. It also covers your agents’ Slack and Discord profile photos, the preview picture for a YouTube link and emoji pictures, which the widget loads through api-cdn.chatlio.com. You don’t need to list Slack, Gravatar, Discord, YouTube or an emoji host.
  • data: covers the widget’s own icons.

If an image still doesn’t show, your browser’s console names the host it blocked.

Missing arrows or icons

If the widget shows a blank round button, or the arrow that minimizes the chat is missing, your img-src line doesn’t allow data:. Add data: to it.

Please contact us via our widget below if you have any questions or concerns about using Chatlio with CSP. We are happy to assist.