如何允许具有内容安全策略 (CSP) 的 iframe答案

【问题标题】：How do I allow a iframe with a content security policy (CSP)如何允许具有内容安全策略 (CSP) 的 iframe
【发布时间】：2019-08-10 13:59:54
【问题描述】：

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

今天虽然我想集成第三方日历预订系统（Calendly）。他们使用 iframe 来弹出窗口，而在我的一生中，我无法在安全策略中接受它。

我不断收到此错误 “拒绝构建‘url-to-calendly’，因为它违反了以下内容安全策略指令：“frame-src”...

我已经厌倦了将它添加到 frame-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';

我也在child-src 指令下做了同样的事情。由于 frame-src 在版本二中不再使用。同样，这也不起作用。这是我的完整 CSP。在这里的任何帮助将不胜感激 - 谢谢。附言。我正在使用 chrome 开发工具。它似乎在 Safari 中也不起作用。

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;

【问题讨论】：

原因不在您的 CSP 策略中，因此您无法在 CSP 策略中修复它。原因是https://assets.calendly.com 站点本身提供了一个标头，该标头告诉浏览器不允许其他站点对其进行构图。因此，您的浏览器尊重该标题，并且不允许您的网站构建该标题。而且您无法覆盖它。您的网站无法构建这样的框架。
@sideshowbarker 非常感谢您回复我。你是如何发现它是导致问题的原因？我松了一口气，这不是 CSP。我正在失去理智，因为我看不出我做错了什么。您是否知道解决此问题的任何步骤-除了直接联系calendly（我已经这样做了）？感谢您的帮助，我很感激。
@sideshowbarker 你怎么知道是导致问题的原因，而不是 davidlower8 的 iframe / CSP 实现？谢谢。
@mike_butak 如果您在浏览器 devtools、curl 或 Postman 或其他任何工具中使用“网络”窗格，并检查来自 assets.calendly.com 的响应的响应标头，则表明响应包括 x-frame-options: deny ，这意味着https://assets.calendly.com 正在说“不允许其他网站将我放入框架中”。所以浏览器会遵守这一点，并拒绝让问题中的网站在框架中显示assets.calendly.com。
@sideshowbarker 谢谢！你的回答真的很有帮助。我在网络选项卡中看到 209 个请求，其中没有一个包含 iframe 中请求的资源（在我的情况下，这不是 calendly，而是我在我们公司开发的内部站点）。有趣的是，我的代码在旧版本的客户端中工作，并且我的 iframed 应用程序加载得很好。客户端的更新版本是我遇到问题的地方。除了通过 javascript 在其中注入此 iframe 的表单设计器之外，我不控制客户端代码。

标签： security iframe content-security-policy

【解决方案1】：

要让 Calendly 在您的网站上运行，您需要添加以下 CSP 规则：

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

【讨论】：

我必须在哪里添加这些？
@KumailR 这取决于您使用的是什么，但您用来为您的网站提供服务的服务是您指定 CSP 标头的地方。例如nginx、express等

【解决方案2】：

所以实际上答案很简单。我直接联系了calendly，简单的解决方案是更改我添加的url。 https://calendly.com 就足够了。

所以你给@andrii 的网址是正确的——谢谢。但是，不建议使用“unsafe-inline”。在任何来源上使用它会使您的 CSP 几乎毫无意义。

【讨论】：

【解决方案3】：

你可以这样使用

<meta http-equiv="Content-Security-Policy" content="default-src 'self' ; 
        img-src      'self' 'unsafe-inline' 
                      https://www.google.com/;
        style-src     'self' 'unsafe-inline' 
                      https://fonts.googleapis.com ;
        script-src    'self' 'unsafe-inline'  
                       https://www.google-analytics.com
                       https://www.torrentpower.com; 
        connect-src    'self' 
                       https://google.com/
                       https://www.google-analytics.com;
        child-src 'self' https://www.google.com/;
                         object-src 'self';">

【讨论】：