Content Security Policy

If you use a Content Security Policy (CSP) header, you may need to add TalkJS to an allow list. The simplest way to do this is to simply add TalkJS to your default-src directive:

1Content-Security-Policy: default-src https://*.talkjs.com wss://*.talkjs.com https://firebasestorage.googleapis.com

No need for unsafe-inline or unsafe-eval

TalkJS does not require unsafe-inline nor unsafe-eval to be specified in script-src.

Note: if you followed our Getting Started guide to the letter, you'll have added one or two <script> elements. You'll need to move that code into a .js file before it'll work with a CSP header that disallows unsafe-inline.

Per CSP directive

If you need more control than default-src, you can further specify things per directive:

  • script-src: Allow loading TalkJS JavaScript files:
    • script-src https://*.talkjs.com
  • connect-src: Let our SDK to connect directly to the TalkJS servers via HTTPS and secure WebSockets:
    • connect-src https://*.talkjs.com wss://*.talkjs.com
  • frame-src: Let TalkJS mount an iframe with the chat UI:
    • frame-src https://*.talkjs.com

Optional directives

You may omit these if you do not depend on the features listed:

  • The Popup loads a little bit of CSS and two SVG images into your page:
    • img-src https://*.talkjs.com
    • style-src https://*.talkjs.com
  • file sharing uses Google Cloud. If you use file sharing, also add this:
    • img-src https://firebasestorage.googleapis.com
    • media-src https://firebasestorage.googleapis.com
  • notifications play a sound (if desktop notifications are enabled):
    • media-src https://*.talkjs.com
  • Error Tracking TalkJS uses TrackJS to keep track of errors in the client.
    • script-src https://cdn.trackjs.com; connect-src https://capture.trackjs.com; img-src https://usage.trackjs.com; img-src https://fault.trackjs.com

All together now

All the optional and required directives shown above make up this CSP policy:

1default-src 'none';
2script-src https://*.talkjs.com;
3connect-src https://*.talkjs.com wss://*.talkjs.com;
4frame-src https://*.talkjs.com;
5media-src https://*.talkjs.com https://firebasestorage.googleapis.com;
6style-src https://*.talkjs.com;
7img-src https://*.talkjs.com https://firebasestorage.googleapis.com;
8script-src https://cdn.trackjs.com; connect-src https://capture.trackjs.com; img-src https://usage.trackjs.com; img-src https://fault.trackjs.com

Or, as a valid single-line HTTP header:

1Content-Security-Policy: default-src 'none'; script-src https://*.talkjs.com https://cdn.trackjs.com; connect-src https://*.talkjs.com wss://*.talkjs.com https://capture.trackjs.com; frame-src https://*.talkjs.com; media-src https://*.talkjs.com https://firebasestorage.googleapis.com; style-src https://*.talkjs.com; img-src https://*.talkjs.com https://firebasestorage.googleapis.com https://fault.trackjs.com https://usage.trackjs.com;

Note that we do not recommend to not further specify subdomains (eg app.talkjs.com instead of *.talkjs.com), as we may change which data gets served from which subdomains in the future.