Content Security Policy

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

Note: If you followed the Classic JavaScript SDK's 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.

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

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 https://*.tjstatic.net
  • media-src https://firebasestorage.googleapis.com https://tjstatic.net
• 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 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 https://*.tjstatic.net;
6style-src https://*.talkjs.com;
7img-src https://*.talkjs.com https://firebasestorage.googleapis.com https://*.tjstatic.net;
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;

The Web Components and React components don't use an iframe, so you don't need frame-src. They still load a few files at runtime, even when you install them from npm:

• script-src and connect-src: The emoji picker loads its code and emoji data from jsDelivr:
  • script-src https://cdn.jsdelivr.net
  • connect-src https://*.talkjs.com wss://*.talkjs.com https://cdn.jsdelivr.net
• style-src: The emoji picker adds its own <style> elements, so style-src needs unsafe-inline:
  • style-src 'unsafe-inline'
• font-src: The components use the Inter font from the TalkJS CDN, unless your page already loads Inter:
  • font-src https://*.talkjs.com

If you load the components from jsDelivr, as the installation guide does, add https://cdn.jsdelivr.net to style-src for their stylesheet. The import map and module script from that guide are inline scripts, so give them a nonce or a hash in script-src. Here's the full policy for that setup. Replace <nonce> with your nonce:

1Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-<nonce>' https://cdn.jsdelivr.net; connect-src 'self' https://*.talkjs.com wss://*.talkjs.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src https://*.talkjs.com; img-src 'self' https://*.talkjs.com

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