How to resolve Content Security Policy (CSP) issues blocking widgets and images
If your tawk.to chat widget doesn’t show up on your website, displays missing images, or acts strangely, it might be a security setting on your website called Content Security Policy (CSP) that's getting in the way.
In this guide, we’ll help you understand CSP and how to whitelist tawk.to so your chat widget works smoothly.
Content Security Policy (CSP) is a security feature implemented in modern web browsers that helps protect websites from common attacks resulting in data theft, distribution of malware, and unauthorized admin access.
CSP restricts what kind of content can load on your website. Unfortunately, sometimes this can block helpful tools like the tawk.to chat widget.
Signs of a CSP issue:
The chat widget appears briefly and then disappears.
Images within the chat widget are missing or not loading correctly.
The chat widget seems to be malfunctioning.
If you're experiencing any of these issues, it's a good idea to check your website's CSP settings.
For your tawk.to chat widget to function properly, you'll need to add specific domains to your website's CSP policy.
This process, known as whitelisting, grants permission for these domains to load resources on your website. Whitelisting the tawk.to chat widget lets your website’s security measures know that tawk.to is a trusted source.
Add the following headers to your server configuration to whitelist the tawk.to chat widget:
Content-Security-Policy: style-src *.tawk.to fonts.googleapis.com cdn.jsdelivr.net
Content-Security-Policy: script-src *.tawk.to cdn.jsdelivr.net
Content-Security-Policy: frame-src *.tawk.to
Content-Security-Policy: font-src *.tawk.to fonts.gstatic.com
Content-Security-Policy: img-src *.tawk.to cdn.jsdelivr.net tawk.link s3.amazonaws.com
Content-Security-Policy: connect-src *.tawk.to wss://*.tawk.to
Content-Security-Policy: form-action *.tawk.to
If you're unsure about how to modify your server configuration, we recommend consulting with your website administrator or hosting provider. Alternatively, refer to this guide on adding headers to common web servers.
If you need further help, schedule a call with us and we’ll assist you.
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