How to Configure Content Security Policies (CSP) on Your Server for Usetiful Installation

Introduction: To integrate Usetiful on your server securely, it is essential to configure Content Security Policies (CSP) that allow necessary resources while ensuring security. This guide provides detailed instructions and explanations for each CSP rule required to enable Usetiful services effectively. script-src 'self' https://*.usetiful.com; style-src 'self' 'unsafe-inline' https://*.usetiful.com; img-src 'self' https://*.usetiful.com; connect-src 'self' https://*.usetiful.com; script-src Purpose: The script-src directive controls which sources can execute scripts on your page. Explanation: 'self': Permits scripts to be loaded from the same origin as the page, ensuring that only trusted scripts from your server are executed. https://*.usetiful.com: Permits scripts from Usetiful’s subdomains. This allows our scripts to function correctly without compromising your server’s security by restricting script sources. style-src Purpose: The style-src directive specifies which sources can provide stylesheets. Explanation: 'self': Allows styles from the same origin, ensuring that your styles are used without external interference. 'unsafe-inline': Allows inline styles, which are sometimes necessary for rendering steps correctly. Some Usetiful features require inline styling to function properly. For example, for highlight elements, we need to do calculations for the height and width of elements and set this style for dynamic overlay elements. https://*.usetiful.com: Enables styles from Usetiful’s subdomains, ensuring that all necessary styles for our features are applied without issues. Security Note: Inline styles can also be a security risk. To improve security, consider using a nonce or hash to specify the inline styles allowed. img-src Purpose: The img-src directive defines which sources can load images. Explanation: 'self': Permits images to be loaded from the same origin, ensuring that only images from your server are displayed. https://*.usetiful.com: Allows images uploaded via Usetiful editor from Usetiful’s subdomains, ensuring that all visual content from our services is correctly displayed without any security issues. connect-src Purpose: Specifies allowed sources for fetching data. Explanation: 'self': Allows connections only to your own server for enhanced security. https://*.usetiful.com: Permits connections to Usetiful's subdomains for secure integration with their services.

Still puzzling over something?

Right to left support

User ID for the cross-device support