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 https://fonts.bunny.net https://cdn.jsdelivr.net;
connect-src https://api.widget.trengo.eu https://gkkmgz0bw7.execute-api.eu-central-1.amazonaws.com wss://ws-eu.pusher.com https://ipinfo.io;

Additional channels and integrations

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>;

Nonces

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.

<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