title: How do I allow a iframe with a content security policy (CSP)
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>I keep getting this error
  "refused to frame 'url-to-calendly' because it violates the following content security policy directive: "frame-src" ...</p>
  
  <p>I have tired adding this to the frame-src component
  <code>frame-src https://assets.calendly.com;</code>
  <code>frame-src 'self' https://assets.calendly.com;</code>
  <code>frame-src 'self' https://assets.calendly.com 'unsafe-inline';</code>
  <code>frame-src https://assets.calendly.com 'nonce-lots-of-digits';</code>
  <code>frame-src 'self' https://assets.calendly.com 'nonce-lots-of-digits';</code></p>
  
  <p>I did the same under the <code>child-src</code> 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.</p>
  
  <pre><code>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;
  </code></pre>