如何使用Facebook Messenger复选框解决CSP问题 [英] How to fix CSP issues with facebook messenger-checkbox

问题描述

我正在尝试 facebook Messenger复选框工作，我将以下代码添加到了html

I'm trying to make facebook messenger checkbox work, I've added the following code to my 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的控制台中出现错误

But whenever I refresh the page, the messenger checkbox doesn't show up, instead I get an error in chrome's console

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小时内都卡住了.

Anyone might know how to fix this? Been stuck for the last 24hrs.

文档指出我应该将我的域添加为白名单，但是此错误仍然存​​在.

Docs states that i should add my domain as whitelist, i already did, but this error still persists.

推荐答案

此问题有两种解决方案:

There are two solutions to this problem:

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

2. 将域列入白名单(包括插件所在页面的协议和端口).在本地进行测试时，我将插件托管在运行在 http://localhost:3000/signup 上的nodejs应用程序上一个>.我还使用 ngrok 允许我远程公开本地服务器，以便可以处理 http://abc364ef.ngrok.io ，并没有工作.就我而言，由于我是通过 http://localhost:3000/signup 访问该页面的，因此我不得不使用以下白名单命令:

1. Install the chrome Disable Content-Security-Policy plugin and use it to disable content security policy headers when viewing the page where your checkbox plugin is used

2. Whitelist the domain (including the protocol and port) of the page where the plugin is hosted. When testing this locally, I was hosting the plugin on a nodejs app which was running on http://localhost:3000/signup. I was also using ngrok to allow me to expose my local server remotely so that I can handle the opt-in callback on my local machine. It turns out that you must whitelist the domain that you entered into your browser URL field to access the page. This might seem obvious, but I kept trying to use the ngrok domain, which looked like http://abc364ef.ngrok.io and didn't work. In my case, since I was accessing the page through http://localhost:3000/signup, I had to use the following whitelist command:

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" 

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

I also had to use this same domain in the origin attribute of the <div class="fb-messenger-checkbox" block. I discovered afterwards that I could've actually used the ngrok domain, however, I would've had to access the page using http://abc364ef.ngrok.io/signup, which was too slow, so I preferred to stick with http://localhost:3000.

这篇关于如何使用Facebook Messenger复选框解决CSP问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！