Content Security Policy error coming up when facebook chat into website?

Question

I'm attempting to integrate facebook chat to my website, but get this error:

Refused to display 'https://www.facebook.com/v2.12/plugins/customerchat.php?
app_id=166409452530897&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect
%2Fxd_arbiter%2Fr%2FJW5GlLnAsFw.js%3Fversion%3D42%23cb%3Df1fc7859561b6e%26do
main%3D[domainsnipped]%26origin%3Dhttps%253A%252F%252F[domainsnipped]%252Ff17b909ebfe83c4%26relation%3Dparent.parent&container_width=0&locale=
en_US&page_id=857469729300&sdk=joey' in a frame because an ancestor violates 
the following Content Security Policy directive: "frame-ancestors 
https://www.facebook.com".

I have added exactly https://www.example.com/ as a whitelisted domain in my page's settings at https://www.facebook.com/example/settings/?tab=messenger_platform

https://findmyfbid.com/ reports my pageID to be 857469729300

My facebook appID (taken from https://developers.facebook.com/apps/ appears to be 166409452530897, and the app is "live".

This is the code I've got on my site:

<div class="fb-customerchat" page_id="857469729300"></div>

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : '166409452530897',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.12'
        });
    };

    (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.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

What am I doing wrong? Many thanks!

See if anything in this helps ? https://stackoverflow.com/questions/47736650/refused-to-display-frame-ancestors-https-www-facebook-com — Tarun Lalwani, Apr 30 '18 at 12:18
Sadly not, I read that and other similar questions on here before posting. — Codemonkey, Apr 30 '18 at 17:46
I don't see any error when loading your site, on which page have you integrated chat? — Tarun Lalwani, Apr 30 '18 at 17:48

Jannes Botis · Accepted Answer · 2018-06-15T06:53:53.137

According to facebook chat troubleshooting tips:

If you see a console error like "Refused to display * in a frame because an ancestor violates the following Content Security Policy directive: *", check that the domain of the page the plugin is being rendered on has been whitelisted. Also make sure you didn't set the Referrer-Policy header to no-referrer.

In your case, you send Referrer-Policy: same-origin response header, which means that the Referer request header when an iframe url is requested, is set only for iframe urls of the same domain, not others, in this case www.facebook.com.

So the Referer: https://www.example.com request header is not set for the facebook chat url and it could be that you are getting this error because of this.

Change the response header to origin.

Eg, with php, do

header('Referrer-Policy: origin');

Note, you may have to reload the page a couple of times and wait some minutes for this to be "understood" by the browser.

References

Referrer-Policy header

Same-origin policy

Goddammit, I'd tried disabling that header and definitely hard-refreshed the page a few times and it hadn't made a difference. All I can think is that I'd failed to restart nginx at the time :( Thank you! — Codemonkey, May 03 '18 at 07:05
Would you mind editing the domain name out of your answer please? Thank you. — Codemonkey, Jun 15 '18 at 06:17

Content Security Policy error coming up when facebook chat into website?

1 Answers1

References

Linked