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.

Using nonce for controlling execution of LiveChat scripts for customers with CSP

You can use nonce to load the LiveChat script. Read more about content security policy and nonce.

You can add nonce value to the script tag in which LiveChat script is loaded, so for example, it looks like this:

<script nonce="{{nonce}}">

window.__lc = window.__lc || {};

...

</script>

However, you will need to ensure that the value for nonce is used once and that it is randomly generated on your side. Once generated, the nonce value must be fed to the nonce variable used in your template.

Here is a simple example (Node.js) in which we’re adding the nonce variable to the script tag (as mentioned above), and then, on the server side, we’re generating a header with the Content Security Policy set up:

reply.header('Content-Security-Policy', `script-src 'nonce-${nonce}' 'self' *.livechatinc.com`);

Please note that in this example, the *.livechatinc.com domain must also be added; otherwise, the directive will not allow the resources from our domain to be loaded.

We have also included the nonce in the template rendering so that the value is available on a website:

reply.locals.nonce = nonce;

In the example above, the value for the nonce is generated on the server side with the use of crypto and randomBytes, and is then changed to base64:

const nonce = crypto.randomBytes(16).toString('base64');

In the above example, the script tag won’t load if you are trying to pass over to nonce value different then the one generated by the server or if you are trying to load a script from a domain different than livechatinc.com, even though the nonce value is correct.

In the above example, the script tag won’t load if you are trying to pass over to nonce value different then the one generated by the server or if you are trying to load a script from a domain different than livechatinc.com, even though the nonce value is correct.

Please note that setting up CSP is something that you need to handle at your side. The LiveChat team is not responsible for the configuration and the implementation itself.

Please note that setting up CSP is something that you need to handle at your side. The LiveChat team is not responsible for the configuration and the implementation itself.

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!