将 Facebook Checkbox 插件用作 iframe 小部件时出现 CSP 错误
Posted
技术标签:
【中文标题】将 Facebook Checkbox 插件用作 iframe 小部件时出现 CSP 错误【英文标题】：CSP error when using Facebook Checkbox plugin as an iframe widget 【发布时间】：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。
【参考方案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。这不是您可以在页面上更改的内容。
【讨论】：
以上是关于将 Facebook Checkbox 插件用作 iframe 小部件时出现 CSP 错误的主要内容，如果未能解决你的问题，请参考以下文章
IOS：如何将 UITableView 用作 Facebook 类应用程序的 Newsfeed 视图
Facebook 应用程序：localhost 不再用作应用程序域