如何使用facebook messenger-checkbox修复CSP问题

Question

我正在尝试使facebook messenger复选框工作,我已将以下代码添加到我的html中

window.fbAsyncInit = function() {
    FB.init({
      appId: "{{ fb_app_id }}",
      xfbml: true,
      version: "v2.6"
    });

    FB.Event.subscribe('messenger_checkbox', function(e) {
      console.log("messenger_checkbox event");
      console.log(e);

      if (e.event == 'rendered') {
        console.log("Plugin was rendered");
      } else if (e.event == 'checkbox') {
        var checkboxState = e.state;
        console.log("Checkbox state: " + checkboxState);
      } else if (e.event == 'not_you') {
        console.log("User clicked 'not you'");
      } else if (e.event == 'hidden') {
        console.log("Plugin was hidden");
      }

    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) { return; }
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

      <div class="fb-messenger-checkbox"
        origin="my.site.com"
        page_id="{{ fb_page_id }}"
        messenger_app_id="{{ fb_app_id }}"
        user_ref="{{ user_token }}"
        prechecked="true"
        allow_login="true"
        size="xlarge"></div>

但每当我刷新页面时,messenger复选框都不显示,而是在chrome的控制台中出现错误

Refused to display 'https://www.facebook.com/v2.6/plugins/messenger_checkbox.php?allow_login=tr…&user_ref=1tYPmZaYMKXKfcZiUtaENYTXH3H49OTP7tJrt5fyobCgepqziMA0Z037T5gto9o3'
in a frame because an ancestor violates the following Content Security Policy directive: 
"frame-ancestors https://www.facebook.com".

有人可能知道如何解决这个问题吗？被困在过去24小时.

编辑:文档声明我应该将我的域名添加为白名单,我已经这样做,但此错误仍然存​​在.

Answer 1

这个问题有两种解决方案:

1. 安装chrome禁用Content-Security-Policy插件, 并在查看使用复选框插件的页面时使用它来禁用内容安全策略标头

2. 将托管插件所在页面的域(包括协议和端口)列入白名单.在本地测试时,我在一个nodejs应用程序上托管插件,该应用程序在http:// localhost:3000/signup上运行.我还使用ngrok允许我远程公开我的本地服务器,以便我可以在本地计算机上处理opt-in回调.事实证明,您必须将您在浏览器URL字段中输入的域列入白名单才能访问该页面.这似乎是显而易见的,但我一直在尝试使用ngrok域,它看起来像http://abc364ef.ngrok.io并且不起作用.在我的情况下,因为我通过http:// localhost:3000/signup访问页面,所以我不得不使用以下白名单命令:

   curl -X POST -H "Content-Type: application/json" -d '{
     "whitelisted_domains":[
       "http://localhost:3000"
     ]
   }' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN" 
   

   我还必须origin在<div class="fb-messenger-checkbox"块的属性中使用相同的域.后来我发现我实际上可以使用ngrok域,但是,我必须使用http://abc364ef.ngrok.io/signup访问该页面,这太慢了,所以我更喜欢坚持使用http :// localhost:3000.

Answer 2

您应该将您的域列入白名单https://developers.facebook.com/docs/messenger-platform/messenger-profile/domain-whitelisting

1)单击页面顶部的"设置"

2)单击左侧的Messenger平台

3)在"白名单域"部分中编辑页面的白名单域