将 Facebook Checkbox 插件用作 iframe 小部件时出现 CSP 错误答案

【问题标题】：CSP error when using Facebook Checkbox plugin as an iframe widget将 Facebook Checkbox 插件用作 iframe 小部件时出现 CSP 错误
【发布时间】：2020-01-23 18:11:54
【问题描述】：

我正在尝试构建其他网站可以通过 iframe 包含的小部件。该插件包含Facebook Checkbox Plugin。

考虑 iframe 的以下代码：

<!DOCTYPE html>
<html>

<head>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '3297885870227646',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v4.0'
    });
  };

</script>
<script async crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>


<body>
    <div class="fb-messenger-checkbox"
      origin="https://fb-marketing-widget.herokuapp.com/widget-iframe"
      page_id="110054573751247"
      messenger_app_id="3297885870227646"
      user_ref="<%= userRef %>"
      allow_login="true"
      size="standard"
      skin="light"
      center_align="true">
    </div>
</body>
</html>

直接在浏览器中打开 iframe URL 时，上述代码有效。但是，当我在具有不同域的另一个网站中包含相同的 iframe 时，我会因为祖先违反以下内容安全政策而被拒绝在框架中显示 'https://www.facebook.com/v4.0/plugins/messenger_checkbox.php?...指令：“框架祖先https://my-iframe-domain.com”。

请注意，iframe 在直接打开时可以正常工作，因此这显然不是将域列入白名单、应用程序 ID 错误等问题。

任何关于我如何将上述代码作为 iframe 包含在其他网站中的意见将不胜感激！

【问题讨论】：

我认为这是不可能的。该 CSP 指令的名称是 frame-ancestors，而不仅仅是 frame-parent。因此，如果 Facebook iframe 嵌入到您的域 A 中，那么它本身就会再次被 B 框住 - 那么 A 和 B 都必须被指定为有效的框架祖先。尽管页面管理员最多可以添加 50 个列入白名单的域，但我不知道您将如何让 Facebook 使用包含两者的 frame-ancestors 指令来响应。他们回复了与您指定的origin 对应的内容，我怀疑这会以某种方式获取多个 URL。

标签： facebook iframe facebook-javascript-sdk content-security-policy facebook-sdk-4.0

【解决方案1】：

Facebook 限制了哪些网站可以对其内容进行框架化，您看到的错误来自您的网站不允许对来自 Facebook 的内容进行框架化。 Facebook Checkbox 插件的实施步骤 1 (https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin/) 是将您的域列入白名单：https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting。这不是您可以在页面上更改的内容。

【讨论】：