Pricing
Go to app
User Name
Upgrade Help Center

Use LiveChat with Content Security Policy

Krzysztof Kraus
4 min read
updated: Dec 21, 2023

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 CSPLink icon

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 directivesLink icon

CSPv3Link icon

  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’

  1. 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/1Link icon

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!

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.

RELATED ARTICLES

OneLogin: secure your LiveChat with SSO

Make your LiveChat much more secure by using our LiveChat OneLogin SSO integration! All of that with just a few easy steps.

Read the article

Setting up SSO as your login method

Set up Single Sign-on (SSO), so your agents'll have a single login across all apps your team is using. It makes life easier and more secure for everyone.

Read the article

Start using LiveChat now!

Free 14-day trial AI-driven features No credit card required

Still not convinced? Discover all LiveChat features

Discover text| products: