CODEWITHSUNDEEP
javascriptfacebookfacebook-graph-apifacebook-javascript-sdkfacebook-messenger
InfinitePrime
InfinitePrime

Reputation: 1776

Cors error while rendering FB Chat plugin for whitelisted domains

I am trying to add the Messenger Live Customer Chat Plugin dynamically to a site by first whitelisting the domain via the API and then injecting the script tag to the whitelisted domain site.

Now, after injecting the script to the whitelisted site it fails with CORS error. But, if I manually whitelist the URL via the Facebook app using the UI it works fine. I dont understand why does whitelisting via API does not work when the docs clearly say it should work.

  1. Successfully whitelisting a domain for a FB page via the API
curl 'https://graph.facebook.com/v12.0/me/messenger_profile?access_token=EAxxxxxxxPr' \
  -H 'authority: graph.facebook.com' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'content-type: application/json' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'origin: https://livechat.frangout.com' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://livechat.frangout.com/' \
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' \
  --data-raw '{"whitelisted_domains":["https://my-domain.com"]}' \
  --compressed

Result: {success: true } and I can also GET the whitelisted_domains and see it is already whitelisted

  1. Injecting script dynamically to the whitelisted site so that it loads the Messenger Live Chat Plugin
        var fbCustomerChat = document.createElement('div');
        fbCustomerChat.id = "fb-customerchat";
        fbCustomerChat.classList.add("fb-customerchat");
        fbCustomerChat.setAttribute('page_id', 'xxx')
        document.body.appendChild(fbCustomerChat);

        window.fbAsyncInit = function() {
            FB.init({
              appId            : 'xxx',
              autoLogAppEvents : true,
              xfbml            : true,
              version          : 'v12.0'
            });
        };

        (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 = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
  1. Browser Logs

Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1' from origin 'https://sid-s-school-12f2.thinkific.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr-patch.js:87 GET https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1 net::ERR_FAILED 200

Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/SDK/trucnated co

Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".

Upvotes: 7

Views: 13554

Answers (4)

xrayian
xrayian

Reputation: 161

I had this issue from facebook, in my case I had a / at the end of my whitelisted domain name, updating it fixed my issue.

Also move the Facebook chat SDK code to the top within the body-tag

<body>
<!-- FB-CHAT-SDK-CODE -->
...

<!-- your code -->
...
</body>

OLD: https://www.example.com/
NEW: https://www.example.com

Hope this helps

Upvotes: 2

h2n
h2n

Reputation: 1

By default facebook need add following code into html:

<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>

<!-- Your Chat plugin code -->
<div id="fb-customer-chat" class="fb-customerchat"></div>

You missed fb-root div and Chat plugin's id is fb-customer-chat not fb-customerchat

Upvotes: -1

Ahmad Yusri
Ahmad Yusri

Reputation: 11

I experienced the same thing before, after I checked thoroughly, it turns out that I entered the wrong PAGE_ID instead I entered the APP_ID.

You can try to check again on this line

chatbox.setAttribute("page_id", **YOUR_PAGE_ID**);

Upvotes: -1

jroi_web
jroi_web

Reputation: 1982

This might be a different issue. But I also encountered the '..has been blocked by CORS policy' issue for the Facebook Plugin Chat. Even if you already added the website URL in the Whitelisted domains (Advanced Messaging settings), it will still not work if your Facebook page is limited or restricted to only few countries. It needs to be available to all countries.

Hopefully someone will help this post in the future as searching for 'Facebook Chat Cors error' only points to this question.

Upvotes: 3

Related Questions