Use LiveChat with Content Security Policy

Content Security Policy, otherwise known as CSP, is an additional layer of security that can help you with detecting and mitigating various attacks, like Cross Site Scripting or Data Injection Attacks.

If you’d like to learn more about CSP itself, click here to check out the article prepared by the MDN web docs. For now, let’s jump below to learn how to adjust your CSP directives so that they will fully support LiveChat.

Making changes to your Content Security Policy usually required making changes to your server’s settings. If you are not a tech person, we strongly recommend sending this article to a person responsible for your server.

Making changes to your Content Security Policy usually required making changes to your server’s settings. If you are not a tech person, we strongly recommend sending this article to a person responsible for your server.

• CSPv3 - learn how to adjust your CSPv3 directives;
• CSPv2/1 - learn how to adjust your CSPv2/1 directives.

Modifying your Content Security Policy directives

CSPv3

1. Modifying your CSPv3 directives is relatively easy. All that you have to do is to edit the script-src directive so that it’ll include the following entities: 'self', 'unsafe-inline' and 'unsafe-eval':

   script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’

2. Now, all that is left is to whitelist *.livechatinc.com domain, by adding it as a list of whitelisted sources that can load content on your website. Whitelisting our domain should look like on the following example:

script-src 'self' 'unsafe-inline' 'unsafe-eval' *.livechatinc.com *.youtube.com *.livechat-static.com *.google.com; 
media-src 'self' *.livechatinc.com *.youtube.com *.google.com *.livechat-static.com; 
object-src 'self' *.livechatinc.com *.youtube.com *.google.com; 
child-src 'self' *.livechatinc.com *.youtube.com *.google.com; 
img-src 'self' *.livechatinc.com *.youtube.com *.google.com *.livechat-files.com *.livechat-static.com;
style-src 'self' 'unsafe-inline' *.livechatinc.com *.youtube.com *.google.com;

And that’s it! Just in case, here’s the complete CSPv3 example that includes both, the included directives and whitelisted LiveChat domain:

content-security-policy:
default-src 'self'; 
script-src 'self' 'unsafe-inline' 'unsafe-eval' *.livechatinc.com *.youtube.com *.google.com *.livechat-static.com;
media-src 'self' *.livechatinc.com *.youtube.com *.google.com *.livechat-static.com; 
object-src 'self' *.livechatinc.com *.youtube.com *.google.com; 
child-src 'self' *.livechatinc.com *.youtube.com *.google.com; 
img-src 'self' *.livechatinc.com *.youtube.com *.google.com *.livechat-files.com *.livechat-static.com; 
style-src 'self' 'unsafe-inline' *.livechatinc.com *.youtube.com *.google.com;

CSPv2/1

In terms of modifying your CSPv2/1 directives, the drill is almost the same. Here you also have to make sure that our *.livechatinc.com domains will be whitelisted, but you also have to modify your style-src directives, so that they will include the following entity: 'unsafe-inline'

Here’s the example of the complete CSPv2/1 that includes both, our whitelisted domain and the modification to the style-src directive:

connect-src:
  https://api.livechatinc.com
  https://cdn.livechatinc.com
  https://secure.livechatinc.com
  https://youtube.com
  https://google.com
  https://fonts.google.com
  
child-src:
  https://api.livechatinc.com
  https://cdn.livechatinc.com
  https://secure.livechatinc.com
  https://youtube.com
  https://google.com
  https://fonts.google.com

font-src:
  https://cdn.livechatinc.com
  https://secure.livechatinc.com
  https://fonts.google.com

media-src:
  https://cdn.livechatinc.com
  https://secure.livechatinc.com
  https://cdn.livechat-static.com

img-src:
  data:
   https://cdn.livechatinc.com
   https://secure.livechatinc.com
   https://cdn.livechat-static.com
   https://cdn.livechat-files.com/

script-src:
   https://cdn.livechatinc.com
   https://secure.livechatinc.com
   https://cdn.livechat-static.com

style-src:
  'unsafe-inline'

And now you’re ready to provide you customers with the quality support that they need! If you need any additional information on this topic, don’t hesitate to start a chat with us - we are available 24/7/365!