I am setting up a content security policy (CSP)for my website. I have been using it for a few websites for the last weeks without any issue. External scripts and various other things I have successfully integrated.
Today though I wanted to integrate a third part calendar booking system (Calendly). They use an iframe for the popup and for the life of me I can not get it accepted on the security policy.
I keep getting this error
"refused to frame 'url-to-calendly' because it violates the following content security policy directive: "frame-src" …
I have tired adding this to the frame-src component
frame-src https://assets.calendly.com;
frame-src 'self' https://assets.calendly.com;
frame-src 'self' https://assets.calendly.com 'unsafe-inline';
frame-src https://assets.calendly.com 'nonce-lots-of-digits';
frame-src 'self' https://assets.calendly.com 'nonce-lots-of-digits';
I did the same under the child-src
directive as well. Since frame-src is no longer used in version two. Again this did not work either. Here is my full CSP. Any help here would be greatly appreciated – thank you. Ps. I was using chrome dev tools. It appeared to neither work in Safari either.
Content-Security-Policy:
script-src 'nonce-4dfb7738f82d40efc1b73a80491d6dd0bb839173' 'unsafe-inline'; object-src 'none';
default-src 'nonce-77184b203c574dfd8ecc7fac417bf078242d4657';
img-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net;
style-src 'self' https://assets.calendly.com;
font-src 'self';
connect-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net;
base-uri 'none';
child-src https://assets.calendly.com;
frame-src https://assets.calendly.com;
Best Answer
To make Calendly work on your website you need to add following CSP rules: