facebook - 如何修复 facebook messenger-checkbox 的 CSP 问题

Question

我正在尝试制作 facebook messenger checkbox工作，我已将以下代码添加到我的 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 Disable Content-Security-Policy plugin 并在查看时使用它来禁用内容安全策略 header 使用复选框插件的页面

2. Whitelist the domain插件所在页面的(包括协议(protocol)和端口)。在本地测试时，我在 http://localhost:3000/signup 上运行的 nodejs 应用程序上托管插件。 .我也在用 ngrok允许我远程公开我的本地服务器，以便我可以处理 opt-in callback在我的本地机器上。事实证明，您必须将在浏览器 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 .