Facebook messenger send_to_messenger gives issue

Question

Hello I am using gem 'facebook-messenger' and follow all the steps same given in gem. My requirement is to add send to messenger button in my app I had included following code

<script>
 window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP_ID',
      xfbml      : true,
      version    : 'v2.6'
    });
  };
  (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')
  );
</script>      

<div class="fb-messenger-checkbox"  
  origin=PAGE_URL
  page_id=PAGE_ID
  messenger_app_id=APP_ID
  user_ref= <%= @order.number%>
  prechecked="true" 
  allow_login="true" 
  size="large"></div>  

It gives me error

Refused to display 'https://www.facebook.com/v2.6/plugins/messenger_checkbox.php?allow_login=true&app_id='APP_ID'&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df379bc53d47b1%26domain%3D3aa1d074.ngrok.io%26origin%3Dhttps%253A%252F%252F3aa1d074.ngrok.io%252Ff2ea378cba3d818%26relation%3Dparent.parent&container_width=1273&locale=en_US&messenger_app_id=219206268600034&origin=https%3A%2F%2Fwww.facebook.com%2Fmy-test-716683128523791%2F&page_id='PAGE_ID'&prechecked=true&sdk=joey&size=large&user_ref=S906106687' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".

Please guide me how to resolve this error.

Answer 1

Adding this answer in case anyone else comes across this in the future.

You're getting a CSP error and need to whitelist your domain. Covered here