Facebook Chat plugin not working Safari iOS/OSX but works fine in Chrome

Question

I'm having trouble with the facebook Chat plugin, it was working on my website in safari, but seems to have stopped working. This is in iOS and Mac OS. It works fine in Chrome. I copied the code from the Advanced Messenger settings...

<div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v5.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'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="xxxxxxxx">
  </div>

I've ensured the domain is whitelisted.

I have created a content-security-policy for my site in the .htaccess file, but it still doesn't work. In safari, Edge or firefox, but works in Chrome:

 <FilesMatch "\.(html|php)$">
       Header set Content-Security-Policy "
          default-src 'self' *.googleapis.com *.facebook.com *.marchex.io;
          script-src 'self' *.cloudflare.com *.facebook.com *.marchex.io;
          font-src 'self' *.googleapis.com *.gstatic.com;
          img-src 'self' *.marchex.io data:;
          frame-ancestors 'self' *.facebook.com;
          child-src 'self' *.facebook.com;"
   </FilesMatch>

The Policy does work. If I just set default-src 'self' it stops a lot of content loading.

Any help greatly appreciated

I forgot to add, in the console I get the following error... Refused to load https://www.facebook.com/v5.0/plugins/customerchat.php?app_id=&attribution=setup_tool....... because it does not appear in the frame-ancestors directive of the Content Security Policy. — Neil White, Dec 10 '19 at 21:07
Sounds like you have some content security policy that makes the iframe not load. — WizKid, Dec 10 '19 at 21:24
Thanks, could you elaborate please. Is this on the website or in the browser. Out of my area of knowledge — Neil White, Dec 10 '19 at 21:37
I have added a content-security-policy, but still getting the issue, even if I set the frame-ancestor to * and child-arc to *!?!? — Neil White, Dec 12 '19 at 22:21
Hard for us to tell us what you do wrong without even be able to see what you do. If you link to the page it would be way easier — WizKid, Dec 12 '19 at 22:51
It is still not a link to the page that you have a problem with. — WizKid, Dec 13 '19 at 17:11
@NeilWhite did you ever solve this. Having the same issue and none of the other solutions to this problem on SO have worked. — Duffy Dolan, Sep 16 '20 at 13:44
@DuffyDolan, sorry no. Never did! If you manage it, please let me know! — Neil White, Sep 17 '20 at 14:13
@NeilWhite It's a Safari setting on macos and ios. Prevent Cross-Site Tracking needs to be disabled. Turn that off and the bot will load. — Duffy Dolan, Sep 23 '20 at 15:32
did you solve your problem? I am having a same issue over ios 14 safari where as, it works fine in chrome and others as well as ios 12. I've whitelisted the site also. — amit, Sep 24 '20 at 12:03

Facebook Chat plugin not working Safari iOS/OSX but works fine in Chrome

0 Answers0