如何允许带有内容安全策略（CSP）的iframe [英] How do I allow a iframe with a content security policy (CSP)

问题描述

我正在为我的网站设置内容安全策略（CSP）。过去几周我一直在几个网站上使用它，没有任何问题。我已经成功集成了外部脚本和其他各种东西。

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.

今天，尽管我想集成第三方日历预订系统（非常有趣）。他们使用iframe弹出窗口，对于我一生，我无法在安全策略上接受它。

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.

我不断收到此错误
将'url-to-calendly'设为框架，因为它违反了以下内容安全策略指令： frame-src ...

I keep getting this error "refused to frame 'url-to-calendly' because it violates the following content security policy directive: "frame-src" ...

我已经厌倦了将此内容添加到框架中-src组件
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 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';

我在 child-src 指令下也做了同样的事情，因为在第二版中不再使用frame-src，这同样也不起作用，这是我完整的CSP 。在这里的任何帮助将不胜感激-谢谢您，我使用的是chrome dev工具。

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;

推荐答案

要使Calendly在您的网站上工作，您需要添加遵循以下CSP规则：

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

这篇关于如何允许带有内容安全策略（CSP）的iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！