Website Console ‘Integrity’ Errors for zohocdn.com

ZohoCDN Console Errors (Sales IQ Chat widget)

If you’ve got a Zoho script in your website, say to track Sale IQ chat widget, you may have encountered the following errors in your browser console. Having JS failures for scripts in your website can create problems for other scripts, should be avoided, and may be a sign of disfunction around your own or external scripts. I recently encountered the following errors as a result of using Zoho’s CDN via snippets like Sales IQ, which is an event tracker that is included by adding a Sales IQ code snippet to your website:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://static.zohocdn.com/zohosecurity/v5_0/js/security-html-sanitizer.min.js' with computed SHA-384 integrity 'xxxxxxxxx/'. The resource has been blocked.
Failed to find a valid digest in the 'integrity' attribute for resource 'https://static.zohocdn.com/zohosecurity/v5_0/js/security-url-validator.min.js' with computed SHA-384 integrity 'xxx/xxxx/l3Hxxxxhv/xxxxx/F'. The resource has been blocked.

Access to XMLHttpRequest at 'https://xxxxxxx.cloudfront.net/events' from origin 'https://www.yourdomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
        
        
POST https://d1dd3t4sj44w4x.cloudfront.net/events net::ERR_FAILED 502 (Bad Gateway)

Solution Means Adding Something Rather Technical to Your Website – Whitelisting

If you’re using Apache or WordPress and you want to modify the Content Security Policy (CSP) via the .htaccess file, here is a step-by-step guide to help you do it correctly.

Poor Support From Sales IQ

It is worth mentioning that Sales IQ Support Staff provides little or no support or documentation on this at all, and even requires you to contact their technical departments, via first level chats, and then press them to give advice using screenshot and explanations, after which they pass a list of domains you “need to white list in your CSP”. Quite disappointing. After getting the white list of domains, this is what you do (if you still want to use their widget):

The white list you may get, and could use:

salesiq.zoho.com - will be used to get the required data about the embed
download.zohopublic.com - will be used for downloading any attachments or custom css files
vts.zohopublic.com - will be used for tracking
salesiq.zohopublic.com - will be used for chat operations
js.zohostatic.com , css.zohostatic.com - will be used to download js, css and font files
wms.zohopublic.com - will be used to make persistant connection to support chat operations
media.zohostatic.com - will be used to download notification audio file
https://dyjgaef5vuq51.cloudfront.net/
https://dtzpfzv31buvf.cloudfront.net/ - will be used to download js & css files instaed of (css.|js.)zohostatic.com
js.zohocdn.com
css.zohocdn.com
img.zohostatic.com
media.zohostatic.com
fonts.zohostatic.com

Step-by-Step Guide to Modify CSP in .htaccess

1. Locate Your .htaccess File

  • The .htaccess file is typically found in the root directory of your WordPress installation. This is usually the same place where you find folders like wp-content, wp-admin, and files like wp-config.php.

2. Back Up Your .htaccess File

  • Before making any changes, it’s crucial to back up your .htaccess file. You can do this by copying the file and renaming the copy to something like .htaccess_backup.

3. Edit the .htaccess File

  • Open the .htaccess file in a text editor. If you’re doing this on a server, you might use an SSH terminal and a command-line editor like nano or vim.

4. Modify or Add Your CSP

  • You need to add a Content-Security-Policy directive to the .htaccess file. If there is already an existing rule, you might need to modify it.
  • Here is how you could write it, incorporating the domains you need to whitelist:apache
  • <IfModule mod_headers.c> Header set Content-Security-Policy "default-src 'self'; \ script-src 'self' 'unsafe-inline' 'unsafe-eval' https://salesiq.zoho.com https://js.zohostatic.com https://js.zohocdn.com https://dyjgaef5vuq51.cloudfront.net https://dtzpfzv31buvf.cloudfront.net; \ style-src 'self' 'unsafe-inline' https://css.zohostatic.com https://css.zohocdn.com; \ img-src 'self' https://img.zohostatic.com; \ font-src 'self' https://fonts.zohostatic.com; \ connect-src 'self' https://*.zohopublic.com https://wms.zohopublic.com; \ media-src 'self' https://media.zohostatic.com; \ frame-src 'self' https://salesiq.zoho.com;" </IfModule>
  • Explanation of the Policy:
    • default-src 'self': Allows loading resources from the same origin (same scheme, host, and port).
    • script-src: Defines valid sources for JavaScript. This includes your own domain ('self'), potentially unsafe inline scripts ('unsafe-inline'), and unsafe eval ('unsafe-eval'), along with the Zoho and CloudFront domains.
    • style-src: Allows stylesheets from your domain and Zoho domains. 'unsafe-inline' permits the use of inline <style> elements and style attributes.
    • img-src: Defines valid sources of images.
    • font-src: Defines valid sources for fonts.
    • connect-src: Lists the domains that can be connected to using script interfaces (e.g., WebSockets, fetch).
    • media-src: Specifies valid sources for loading media (audio and video).
    • frame-src: Defines valid sources for embedding other browsing contexts (e.g., <iframe>).

5. Save the Changes

  • After adding or modifying the CSP, save the .htaccess file.

6. Upload the Modified .htaccess File

  • If you edited the .htaccess file locally, upload it to the server, replacing the existing .htaccess file in the root of your WordPress installation.

7. Test Your Website

  • Clear your browser cache to ensure you’re not loading old policies.
  • Visit your website and check the browser’s developer console (F12 -> Console tab) for any CSP errors.
  • Ensure that the functionalities provided by Zoho are working correctly.

Important Tips

  • Use Header set Carefully: If you use Header set, it will replace any existing headers of the same name. If you want to append to an existing header, use Header merge instead.
  • Handling WordPress Plugins: Some WordPress security plugins allow you to set a CSP directly within the plugin settings. If you’re using such a plugin, it might be easier to manage your CSP there.
  • Check for Compatibility: Make sure all parts of your site work as expected after updating the CSP. Some inline scripts or styles might be blocked if they’re not allowed by the CSP.

Troubleshooting Common Issues

  • Changes Not Reflected: Make sure you’re editing the correct .htaccess file and that your server is configured to read .htaccess files (AllowOverride All should be set in your Apache configuration).
  • 500 Internal Server Error: This usually indicates a syntax error in the .htaccess file. Double-check your modifications or restore from the backup if needed.
0 0 votes
Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

0
Would love your thoughts, please comment.x
()
x