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

问题

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!

回答1:

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

来源：https://stackoverflow.com/questions/50064433/content-security-policy-error-coming-up-when-facebook-chat-into-website

标签

facebook