Content Security Policy (CSP)

Required directives

If your website uses a Content Security Policy, the following sources have to be added in order to use our widget. The sources to be added depend on what channels and integrations are enabled in your Widget settings.

The Trengo Widget uses the following sources in its default configuration (Website Chat without additional channels):

script-src 'unsafe-inline' 'unsafe-eval' https://static.widget.trengo.eu https://stats.pusher.com/timeline/v2/jsonp/1;
img-src data: https://*.giphy.com https://s3.eu-central-1.amazonaws.com https://trengo.s3.eu-central-1.amazonaws.com;
media-src https://static.widget.trengo.eu;
font-src https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://cdnjs.cloudflare.com;
connect-src https://api.widget.trengo.eu https://gkkmgz0bw7.execute-api.eu-central-1.amazonaws.com wss://ws-eu.pusher.com;```


[block:api-header]
{
  "title": "Additional channels and integrations"
}
[/block]

The policies required for additional channels and integrations in your Widget are:
  * **Twilio** (SMS and phone calls via widget):
    ```
script-src https://media.twiliocdn.com https://sdk.twilio.com
    media-src mediastream https://media.twiliocdn.com https://sdk.twilio.com
    connect-src https://eventgw.twilio.com wss://chunderw-vpc-gll-de1.twilio.com https://media.twiliocdn.com https://sdk.twilio.com```
    *See: https://twilio.github.io/twilio-client.js/index.html#content-security-policy-csp*
  * **Surfly** screen sharing:
    ```
script-src https://surfly.com/surfly.js;
    frame-src 'self' https://app.surfly.com https://surfly.com;
    connect-src https://surfly.com;```
  * **Help Center**:
    ```
connect-src https://<your-help-center-domain>;```


[block:api-header]
{
  "title": "Nonces"
}
[/block]

It is possible to use a nonce instead of 'unsafe-inline'. You will have to add an `id` and a `nonce` attribute to your Trengo Widget script-tag, and also add a new line to use the nonce.
```html
<script type="text/javascript" id="trengo-widget-script" nonce="YOUR NONCE">
    window.Trengo = window.Trengo || {};
    window.Trengo.key = <YOUR WIDGET KEY>;
    (function(d, script, t) {
        script = d.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = 'https://static.widget.trengo.eu/embed.js';

        // The following line enables the nonce
        script.setAttribute('nonce', (document.querySelector('#trengo-widget-script')||{}).getAttribute('nonce'));

        d.getElementsByTagName('head')[0].appendChild(script);
    }(document));
</script>

📘

More information

For more information about CSP and how to use nonces, visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

📘

CSP generation

It is also possible to generate a complete CSP for your website, using a browser plugin. For example: https://csper.io/generator


Did this page help you?