Skip to main content

Content Security Policies (CSP)

Content Security Policies (CSP) are delivered as headers to your users' browsers by your web server. They play a crucial role in declaring which dynamic resources are allowed to load on your web pages, helping protect against various security threats, such as cross-site scripting (XSS).

Understanding CSP for Told​

For many websites, CSP typically involves specifying that only scripts and styles from your own domain and those of trusted tools are allowed. However, this can become more involved in complex setups.

Identifying CSP Errors​

If you encounter CSP errors on your site, they may resemble the examples below:

Refused to load the script '<https://scripts.told.club/sdk/sdk.js>' because it violates the following Content Security Policy directive: "script-src 'self' <https://scripts.told.club/sdk/sdk.js>".

These errors indicate that your current CSP settings are preventing the loading of Told resources. If you observe errors similar to the example, it's crucial to address them promptly to ensure proper functioning of Told on your site.

Configuring CSP for Told​

Add the following directives to your CSP policy:

  1. Connect to Told API: Allow connections to the Told API by adding the following directive to your CSP:

    connect-src 'self' <https://api.told.club/graphql>;

    Make sure to include this directive in the connect-src section of your CSP policy. This allows your site to communicate with the Told API.

  2. Load Told SDK Script: Allow the loading of the Told SDK script by adding the following directive to your CSP:

    script-src 'self' <https://scripts.told.club/sdk/sdk.js>;

    Include this directive in the script-src section of your CSP policy. It allows your site to fetch and execute the Told SDK script.

  3. Display Told Widget: Allow the Told Widget to be displayed on your site by adding the following directive to your CSP:

    frame-src 'self' <https://widget.told.club>;

    This directive should be included in the frame-src section of your CSP policy. It enables the rendering of the Told Widget on your pages.

  4. Authorize websockets for real-time modifications

    connect-src 'self' <wss://api.told.club/graphql>;

Example CSP Header​

Here's an example of how you can structure your CSP header to include Told URLs:

Content-Security-Policy: default-src 'self'; connect-src 'self' <https://api.told.club/graphql>; script-src 'self' <https://scripts.told.club/sdk/sdk.js>; frame-src 'self' <https://widget.told.club>;

Make sure to adjust your CSP policy according to your specific requirements and existing security measures. If you encounter any issues or have questions about configuring CSP for Told, please reach out to our Support Team.

Work with react​

Follow this guideline if you have any other troubles: link.