it-swarm.com.ru

Как исправить проблемы CSP с помощью Facebook messenger-checkbox

Я пытаюсь заставить флажок в Facebook messenger работать, я добавил следующий код в мой 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>

Но всякий раз, когда я обновляю страницу, флажок мессенджера не появляется, вместо этого я получаю сообщение об ошибке в консоли Chrome

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

Кто-нибудь может знать, как это исправить? Застрял в течение последних 24 часов.

Правка: Документы заявляют, что я должен добавить свой домен в качестве белого списка, я уже сделал, но эта ошибка по-прежнему сохраняется.

4
ibaguio

Есть два решения этой проблемы:

  1. Установите chrome Disable Content-Security-Policy плагин и используйте его для отключения заголовков политики безопасности контента при просмотре страницы, где используется ваш плагин checkbox
  2. Белый список доменов (включая протокол и порт) страницы, где размещается плагин. При локальном тестировании я размещал плагин в приложении nodejs, которое работало на http: // localhost: 3000/signup . Я также использовал ngrok , чтобы позволить мне удаленно выставлять мой локальный сервер, чтобы я мог обрабатывать opt-in callback на моей локальной машине. Оказывается, для доступа к странице вы должны внести в белый список домен, который вы ввели в поле URL вашего браузера. Это может показаться очевидным, но я продолжал пытаться использовать домен ngrok, который выглядел как http://abc364ef.ngrok.io и не работал. В моем случае, поскольку я обращался к странице через http: // localhost: 3000/signup , мне пришлось использовать следующую команду белого списка:

    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" 
    

    Мне также пришлось использовать этот же домен в атрибуте Origin блока <div class="fb-messenger-checkbox". Впоследствии я обнаружил, что на самом деле мог бы использовать домен ngrok, однако мне пришлось бы получить доступ к странице, используя http://abc364ef.ngrok.io/signup , что было слишком медленно, поэтому я предпочел придерживаться http: // localhost: 30 .

7
adamc

Вы должны внести в белый список свой домен https://developers.facebook.com/docs/messenger-platform/messenger-profile/domain-whitelisting

1) Нажмите Настройки в верхней части вашей страницы.

2) Нажмите Messenger Platform слева

3) Отредактируйте домены в белом списке для своей страницы в разделе Домены в белом списке

5
Lance Edward

В нашем проекте мы определили несколько точек сбоя, вот советы по устранению неполадок :

  1. user_ref должен быть всегда уникальным. (Даже для каждой страницы обновления!)
  2. Убедитесь, что домен, в котором вы отображаете флажок, был в белом списке. В случае, если вы вызываете свою форму из аналогичного домена https://your-domain.com/facebook/facebook.aspx , то белый список https://your-domain.com/facebook тоже!
  3. Если для параметра allow_login задано значение false, вам потребуется действительный сеанс пользователя Facebook (т. Е. Он не вошел как страница), в противном случае плагин будет скрыт.
  4. Является ли атрибут Origin тем же доменом, где размещен плагин?
  5. Тестирование на локальном хосте сейчас не поддерживается Facebook. (По крайней мере, Facebook так говорит. Но вы можете преодолеть это с помощью ngrok.)
  6. Убедитесь, что appId в Facebook Javascript SDK и messenger_app_id в <div class="fb-messenger-checkbox" имеют одинаковые значения.
1
Amio.io