Content Security Policy Error: Causes and Solutions

If you’re experiencing issues with third-party services like embedded videos, forms, chat tools, or tracking scripts, your browser may display an error such as:

“Content Security Policy of your site blocks some resources.”

Common Issues Caused by Content Security Policy (CSP)

• Embedded YouTube/Vimeo videos not loading
• Third-party iframes, such as forms or widgets, not displaying
• Tracking scripts like Hotjar, Crazy Egg, or Zoho failing to load
• Live chat tools (e.g., Tidio, 3CX) not connecting to WebSocket servers

How to Check if CSP is the Cause

To confirm if CSP is blocking a resource:

1. Open your browser’s Inspect Element tool (right-click > Inspect or press F12).
2. Go to the Console tab and look for errors mentioning “Content Security Policy” or “Refused to connect“.
3. Identify the blocked domain or resource. The error will specify the domain or directive being blocked.

For example:

Refused to connect to 'wss://example.com' because it violates the Content Security Policy directive: "default-src https:"

How to Resolve Content Security Policy Issues

Content Security Policy settings are enforced at the NGINX server level for security purposes. While you can exclude CSP headers via the Staq Panel, this is not recommended as it reduces website security.

If you believe CSP is blocking a required resource:

Step 1: Contact Staq Support

Reach out to Staq Support with details of the blocked resource(s). Rather than telling us what we need to do, it would be easier if you reference the actual page that shows the CSP error and we can take this information and customize the CSP to avoid double handling.

Step 2: Temporary Exclusion (Not Recommended)

If needed as a temporary measure, you can exclude the CSP headers via the Staq Panel:

1. 1. Go to the Staq Panel for your website.
   2. Click on Nginx Config:

1. 1. Under Content-Security-Policy (HTTP header), select Exclude and click Save:

Important: This disables CSP entirely, which is not secure. Use this option only as a temporary workaround.

Examples of Third-Party Services Blocked by CSP

Here are common third-party services that may require adjustments to the CSP:

• Hotjar: Tracking scripts and WebSocket connections
• Crazy Egg: Scripts, images, and connections to *.crazyegg.com
• Zoho: Chat operations, scripts, and media files (e.g., *.zoho.eu, *.zohocdn.com)
• Vimeo/YouTube: Embedded videos requiring iframe and script permissions
• 3CX Live Chat: WebSocket connections to *.3cx.com

DO NOT place CSP inside child theme

Note: We’ve seen cases where developers add custom Content Security Policy (CSP) rules inside their child theme via PHP. This approach is not recommended because CSP headers set via PHP are processed at the application level, which can introduce delays and inconsistencies. It’s far more efficient and secure to configure CSP headers at the server level through NGINX, as they are applied directly in the HTTP response, ensuring better performance and consistent enforcement across all requests.

Contacting Staq Support

If you are unsure which domains or directives to allow, or if you need assistance applying changes, please contact Staq Support. We will ensure your required resources load securely without compromising your site’s security.