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

Content-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
  • notifications play a sound (if desktop notifications are enabled):
    • media-src https://*.talkjs.com

All together now

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

default-src 'none'; 
script-src https://*.talkjs.com; 
connect-src https://*.talkjs.com wss://*.talkjs.com; 
frame-src https://*.talkjs.com; 
media-src https://*.talkjs.com; 
style-src https://*.talkjs.com; 
img-src https://*.talkjs.com https://firebasestorage.googleapis.com;

Or, as a valid single-line HTTP header:

Content-Security-Policy: default-src 'none'; script-src https://*.talkjs.com; connect-src https://*.talkjs.com wss://*.talkjs.com; frame-src https://*.talkjs.com; media-src https://*.talkjs.com; style-src https://*.talkjs.com; img-src https://*.talkjs.com https://firebasestorage.googleapis.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.