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.

Deth

What is the exact value you used for origin? – Essonite

as for my side of the HTML, i tried not having ang CSP headers/meta, and also tried 'self' and * for default-src, script, style, and other sources. I think the issue here might be with facebook configuration – Deth

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.

Chiropody

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

Stillbirth

the solution was actually to add "http" or "https" on the origin – Deth

^ This comment was the real solution. Just whitelisting won't work, you have to include protocol in the "origin" attribute, unlike what the documentation said ("Base domain"). Also, checkbox plugin only seems to load for me on my production bot, not my dev ones. – Thremmatology

@Thremmatology is right for "checkbox plugin only seems to load for me on my production bot". – Dispensary

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.

Dispensary

is localhost still not supported? How are we supposed to integrate FB features without testing them out ?? – Transmute

@Transmute I'm not sure if FB started to support localhost. I'm certain that you can test the checkbox using Ngrok! ngrok.com If you struggle to setup checkbox plugin try to go through this step by step guide: docs.amio.io/docs/… (disclaimer: it's our product but there's no need to use it, just check the steps with plain FB Messenger API) – Dispensary