Resolving Content Security Policy (CSP) issues blocking the widget, images, and Knowledge Base articles

If images aren’t showing in your tawk.to chat widget or your Knowledge Base articles appear broken, load partially, or only display after refreshing, your website’s Content Security Policy (CSP) may be causing the issue.

CSP is a security feature in browsers that controls which resources (images, scripts, styles) can be loaded. While it improves security, overly strict settings can block legitimate content, including tawk.to resources.

You may be experiencing CSP problems if you notice:

• The widget briefly appears, then disappears.

• Images within the widget don’t load.

• The widget behaves unpredictably or malfunctions.

• Knowledge Base articles load incompletely or only after refreshing the page.

CSP settings allow you to specify which sources are trusted to load content on your website. If your CSP is too restrictive, it can block images, scripts, and styles necessary for the tawk.to widget to function correctly.

To resolve this, you need to whitelist tawk.to resources in your CSP settings.

To allow the widget to load correctly, add the following directives to your server’s response headers:

style-src

Content-Security-Policy: style-src *.tawk.to fonts.googleapis.com cdn.jsdelivr.net

script-src

Content-Security-Policy: script-src *.tawk.to cdn.jsdelivr.net

frame-src

Content-Security-Policy: frame-src *.tawk.to

font-src

Content-Security-Policy: font-src *.tawk.to fonts.gstatic.com

img-src

Content-Security-Policy: img-src *.tawk.to cdn.jsdelivr.net tawk.link s3.amazonaws.com

connect-src

Content-Security-Policy: connect-src *.tawk.to wss://*.tawk.to

form-action

Content-Security-Policy: form-action *.tawk.to

Example:

If Knowledge Base articles don’t load correctly, add this to the connect-src directive:

This ensures your articles load properly the first time a visitor opens the page.

Example: Updating CSP in Cloudflare

For Cloudflare users:

Go to Cloudflare > Rules > Custom Rules > Content Security Policy

Apply the full directive set to pages displaying the widget or Knowledge Base articles. This ensures that all necessary resources are loaded without requiring a page refresh.

• Clear browser cache
  Cached data can prevent changes from taking effect. Clear your cache, then refresh the page.

• Test on multiple browsers
  Different browsers handle CSP differently. Check Chrome, Firefox, Safari, and Edge to identify any browser-specific issues.

If you have feedback about this article, or if you need more help:

• Click the green live chat icon

• Schedule a call with us

• Visit our community