How to fix CSP issues with facebook messenger-checkbox

facebook checkbox plugin
facebook messenger chat
facebook chat button
facebook chat box
facebook chat refused to display
facebook customer chat plugin not showing
facebook messenger plugin wordpress
facebook page chat

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>

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.

Checkbox Plugin - Messenger Platform, There are two solutions to this problem: Install the chrome Disable Content-​Security-Policy plugin and use it to disable content security policy headers when​  All I did before this happened was sent a photo to a friend and suddenly the app no longer works! I have no idea how to fix this and I cant report the problem to Facebook because the app problem reporting is within the app!

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

CSP error when using Facebook Checkbox plugin as an iframe widget, The checkbox plugin is similar to the Send to Messenger plugin, but is optimized for forms, Implementation; Customizing Login Behavior; Troubleshooting Tips  When the scan finishes, click the Fix All button to automatically repair the problems found. Advanced System Repair works with Windows 10, 8, 7, Windows Vista and Windows XP. In addition to fixing Facebook errors, it will prevent crashes and freezes, detect and remove malware, spyware and viruses, find and fix registry errors, optimize system performance and boost your PC's speed.

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.

Content Security Policy | Web Fundamentals, Please note that the iframe works when being opened directly, so this is clearly not a problem with whitelisting the domain, having the wrong app id etc. How to fix Facebook messenger issues how to fix messenger not open how to fix Facebook messenger hanging Facebook messenger not open Facebook messenger not work in my phone Facebook messenger not

The widget doesn't load due to a CSP rule - support, This is a huge problem, as browsers trust all of the code that shows up on a page as into an error message rather than the success they were expecting. While script resources are the most obvious security risks, CSP provides a It requires a child-src https://facebook.com directive to function properly. Scroll down and tap Report a Problem. Type your problem in text box Briefly explain what happened. Tap Send. Desktop App. Open Messenger for Windows or iOS. Click your photo in the top left. Click Preferences. Click Report a Problem. Describe the problem in the text box, including the steps you took to encounter the issue. Click Submit.

Content Security Policy with Google Analytics & Tag Manager , Do you know where and what's that CSP rule and how to fix it? Right, I looked at Manychat and it's a chatbot platform based on Facebook Messenger, which is where (I The said website where you're having the problem. To make sure you’re always using the latest version of the Facebook app, turn on automatic updates for the app. To do so, open the Google Play Store app and search for Facebook. Once you select it, tap the ellipsis in the upper right corner of the app page and place a check mark in the auto-update box.

CSP interaction with javascript var, Content Security Policy (CSP) is a web standard that allows websites to Inline snippets are a major problem for cross-site scripting attacks, but in Tag Manager, preview it, and then view the error messages in your browser's console​. sure the checkbox for Response is selected and Request is cleared. Fix a 'broken' Facebook page (and other browser oddities) Does Facebook (or another site) suddenly look strange in your desktop browser? There may be an easy fix.

Comments
  • What is the exact value you used for origin?
  • 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
  • the solution was actually to add "http" or "https" on the origin
  • ^ 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.
  • @byl83 is right for "checkbox plugin only seems to load for me on my production bot".
  • is localhost still not supported? How are we supposed to integrate FB features without testing them out ??
  • @Marcom 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)