web-dev-qa-db-ja.com

FacebookメッセンジャーでCSPの問題を修正する方法-チェックボックス

私は Facebookメッセンジャーチェックボックス を機能させようとしています、私は私の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時間立ち往生しています。

編集：ドキュメントには、ドメインをホワイトリストとして追加する必要があると記載されていますが、このエラーは引き続き発生します。

facebookfacebook-javascript-sdkfacebook-messengerfacebook-messenger-bot
6
ibaguio

この問題には2つの解決策があります。

  1. chrome Disable Content-Security-Policyプラグイン をインストールし、チェックボックスプラグインが使用されているページを表示するときにコンテンツセキュリティポリシーヘッダーを無効にするために使用します

  2. ドメインをホワイトリストに登録 （プロトコルとポートを含む）プラグインがホストされているページ。これをローカルでテストするとき、私は http：// localhost：3000/signup で実行されているnodejsアプリでプラグインをホストしていました。また、 ngrok を使用して、ローカルサーバーをリモートで公開し、ローカルマシンで オプトインコールバック を処理できるようにしました。ページにアクセスするには、ブラウザのURLフィールドに入力したドメインをホワイトリストに登録する必要があることがわかりました。これは当たり前のように思えるかもしれませんが、 http://abc364ef.ngrok.io のように見えて機能しなかったngrokドメインを使用しようとし続けました。私の場合、 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"

    また、<div class="fb-messenger-checkbox"ブロックのOrigin属性でこれと同じドメインを使用する必要がありました。その後、実際にngrokドメインを使用できることがわかりましたが、 http://abc364ef.ngrok.io/signup を使用してページにアクセスする必要があり、遅すぎました。だから私は http：// localhost：30 に固執することを好みました。

8
adamc

ドメインをホワイトリストに登録する必要があります https://developers.facebook.com/docs/messenger-platform/messenger-profile/domain-whitelisting

1）ページ上部の[設定]をクリックします

2）左側の[メッセンジャープラットフォーム]をクリックします

3）[ホワイトリストに登録されたドメイン]セクションでページのホワイトリストに登録されたドメインを編集します

6
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. Facebook JavascriptSDKのappIdとmessenger_app_id in <div class="fb-messenger-checkbox"同じ値を持ちます。
1
Amio.io