使用Facebook Checkbox插件作为iframe小部件时出现CSP错误

问题描述 投票:0回答:1

我正在尝试构建其他网站可以通过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包含在其他网站中的任何输入,将不胜感激!

我正在尝试构建其他网站可以通过iframe包含的小部件。该插件包含Facebook Checkbox插件。考虑以下iframe代码:<...>

facebook iframe facebook-javascript-sdk content-security-policy facebook-sdk-4.0
1个回答
0
投票

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。您无法在页面上更改此内容。

© www.soinside.com 2019 - 2024. All rights reserved.