How to fix CSP issues with facebook messenger-checkbox

Question

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>

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".

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

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

Answer 1

There are two solutions to this problem:

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" 
   

   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.