How do I allow a iframe with a content security policy (CSP)

Question

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;

Answer 1

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';

Answer 2

So actually the answer turned out to be very simple. I contacted calendly directly and the simple solution was to change the url I added. https://calendly.com was enough to do the trick.

So the url you gave @andrii was correct - thank you. However using ‘unsafe-inline’ is not advisable. Using that on any of the sources makes your CSP almost pointless having.