How to allow a iframe with a content security policy (CSP)

content-security-policyiframeSecurity

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:

frame-src https://calendly.com;
script-src https://assets.calendly.com;
style-src 'unsafe-inline';