Common Issues Caused by Content Security Policy (CSP)<\/h3>\n\n- Embedded YouTube\/Vimeo videos not loading<\/li>\n
- Third-party iframes, such as forms or widgets, not displaying<\/li>\n
- Tracking scripts like Hotjar, Crazy Egg, or Zoho failing to load<\/li>\n
- Live chat tools (e.g., Tidio, 3CX) not connecting to WebSocket servers<\/li>\n<\/ul>\n
How to Check if CSP is the Cause<\/h3>\n
To confirm if CSP is blocking a resource:<\/p>\n
\n- Open your browser’s Inspect Element<\/strong> tool (right-click > Inspect or press
F12<\/code>).<\/li>\n- Go to the Console<\/strong> tab and look for errors mentioning “Content Security Policy<\/strong>” or “Refused to connect<\/strong>“.<\/li>\n
- Identify the blocked domain or resource. The error will specify the domain or directive being blocked.<\/li>\n<\/ol>\n
For example:<\/p>\n
Refused to connect to 'wss:\/\/example.com' because it violates the Content Security Policy directive: \"default-src https:\"<\/code><\/pre>\nHow to Resolve Content Security Policy Issues<\/h2>\n
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<\/strong> as it reduces website security.<\/p>\nIf you believe CSP is blocking a required resource:<\/p>\n
Step 1: Contact Staq Support<\/h3>\n
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.<\/p>\n
Step 2: Temporary Exclusion (Not Recommended)<\/h3>\n
If needed as a temporary measure, you can exclude the CSP headers via the Staq Panel:<\/p>\n
\n- \n
\n- Go to the Staq Panel<\/strong> for your website.<\/li>\n
- Click on Nginx Config<\/strong>:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
![\"Nginx](\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/01\/nginx-configurations-1-1024x542.png\")
<\/p>\n
\n- \n
\n- Under Content-Security-Policy (HTTP header)<\/strong>, select Exclude<\/strong> and click Save<\/strong>:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
![\"Exclude](\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/06\/content-security-1024x530.png\")
<\/p>\n
Important:<\/strong> This disables CSP entirely, which is not secure. Use this option only as a temporary workaround.<\/p>\nExamples of Third-Party Services Blocked by CSP<\/h2>\n
Here are common third-party services that may require adjustments to the CSP:<\/p>\n
How to Check if CSP is the Cause<\/h3>\n
To confirm if CSP is blocking a resource:<\/p>\n
- \n
- Open your browser’s Inspect Element<\/strong> tool (right-click > Inspect or press
F12<\/code>).<\/li>\n- Go to the Console<\/strong> tab and look for errors mentioning “Content Security Policy<\/strong>” or “Refused to connect<\/strong>“.<\/li>\n
- Identify the blocked domain or resource. The error will specify the domain or directive being blocked.<\/li>\n<\/ol>\n
For example:<\/p>\n
Refused to connect to 'wss:\/\/example.com' because it violates the Content Security Policy directive: \"default-src https:\"<\/code><\/pre>\nHow to Resolve Content Security Policy Issues<\/h2>\n
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<\/strong> as it reduces website security.<\/p>\n
If you believe CSP is blocking a required resource:<\/p>\n
Step 1: Contact Staq Support<\/h3>\n
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.<\/p>\n
Step 2: Temporary Exclusion (Not Recommended)<\/h3>\n
If needed as a temporary measure, you can exclude the CSP headers via the Staq Panel:<\/p>\n
- \n
- \n
- \n
- Go to the Staq Panel<\/strong> for your website.<\/li>\n
- Click on Nginx Config<\/strong>:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
<\/p>\n- \n
- \n
- \n
- Under Content-Security-Policy (HTTP header)<\/strong>, select Exclude<\/strong> and click Save<\/strong>:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/p>\n
Important:<\/strong> This disables CSP entirely, which is not secure. Use this option only as a temporary workaround.<\/p>\n
Examples of Third-Party Services Blocked by CSP<\/h2>\n
Here are common third-party services that may require adjustments to the CSP:<\/p>\n
- Under Content-Security-Policy (HTTP header)<\/strong>, select Exclude<\/strong> and click Save<\/strong>:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
- Click on Nginx Config<\/strong>:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
- Go to the Staq Panel<\/strong> for your website.<\/li>\n
- Go to the Console<\/strong> tab and look for errors mentioning “Content Security Policy<\/strong>” or “Refused to connect<\/strong>“.<\/li>\n