Configuring Content Security Policy (CSP) for Spectry

Content Security Policies (CSP) are an important part of modern web security. They are delivered as HTTP headers by your web server and allow you to control which external resources your website is permitted to load.

For most websites, this typically means allowing scripts, styles, and other assets only from trusted sources. However, if your setup is more complex, you may need to fine-tune these rules to ensure everything works correctly, especially when integrating tools like Spectry.

Understanding CSP Errors

If your CSP is too restrictive, you may see errors in your browser’s developer console indicating that certain resources were blocked.

These errors can also affect functionality, such as data collection, session tracking, or API communication. For Spectry, issues often arise when the required domains are not explicitly allowed.

To confirm whether CSP is the issue, open your browser’s developer console and look for messages indicating blocked resources due to Content Security Policy restrictions.

Updating Your CSP for Spectry

To ensure Spectry works correctly, you need to allow resources from both:

https://cdn.spectry.io (for static assets like scripts, styles, and images)
https://api.spectry.io (for API requests and data communication)

Basic Configuration

If you are using a default CSP, you can simply extend your existing rules like this:

default-src ... https://cdn.spectry.io https://api.spectry.io

Recommended (Stronger Security)

For better control and a more future-proof configuration, we recommend specifying directives individually:

img-src ... https://cdn.spectry.io
script-src ... https://cdn.spectry.io 'unsafe-inline'
connect-src ... https://api.spectry.io
font-src ... https://cdn.spectry.io
style-src ... https://cdn.spectry.io 'unsafe-inline'

This approach ensures that only the necessary resource types are allowed from Spectry, improving your overall security posture.

Minimum Required Configuration

If you prefer to strictly allow only what’s necessary for Spectry to function, use the following:

img-src ... https://cdn.spectry.io
script-src ... https://cdn.spectry.io 'unsafe-inline'
connect-src ... https://api.spectry.io
font-src ... https://cdn.spectry.io
style-src ... https://cdn.spectry.io 'unsafe-inline'

Final Notes

Always review your CSP in the context of your existing setup, don’t replace it blindly.
The ... in the examples represents your current CSP rules.
If you’re unsure about modifying CSP, consult your developer or hosting provider.
Spectry support can help identify CSP-related issues, but adjustments must be made by your development team.

Installation

Content Security Policies