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.

Answer 2

You should whitelist your domain https://developers.facebook.com/docs/messenger-platform/messenger-profile/domain-whitelisting

1) Click Settings at the top of your Page

2) Click Messenger Platform on the left

3) Edit whitelisted domains for your page in the Whitelisted Domains section

Answer 3

In our project we have identified several failure points, here are the troubleshooting tips:

1. user_ref has to be always unique. (Even for every page refresh!)
2. Check if the domain you're displaying the checkbox in has been whitelisted. In case you call your form from a similar domain https://your-domain.com/facebook/facebook.aspx then whitelist https://your-domain.com/facebook too!
3. If the allow_login parameter is set to false, you will need to have a valid Facebook user session (i.e. not logged in as a page) otherwise the plugin will be hidden.
4. Is the origin attribute the same as the domain where you host the plugin?
5. Testing on localhost is not supported by Facebook right now. (At least Facebook says so. But you can overcome this by using ngrok.)
6. Check that appId in Facebook Javascript SDK and messenger_app_id in <div class="fb-messenger-checkbox"have the same values.