facebook 聊天进入网站时出现内容安全策略错误？

Question

我正在尝试将 facebook 聊天功能集成到我的网站，但出现此错误：

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".

我已将https://www.example.com/ 添加为我的页面设置中https://www.facebook.com/example/settings/?tab=messenger_platform 的白名单域

https://findmyfbid.com/ 报告我的 pageID 为 857469729300

我的 facebook appID（取自 https://developers.facebook.com/apps/ 似乎是 166409452530897，并且该应用处于“实时”状态。

这是我网站上的代码：

<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>

我做错了什么？非常感谢！

Answer 1

根据facebook chat troubleshooting tips：

如果您看到控制台错误，例如“拒绝在框架中显示 *，因为祖先违反了以下内容安全策略指令：*”，请检查插件所在页面的域呈现在已被列入白名单。还要确保您没有将 Referrer-Policy 标头设置为 no-referrer。

在您的情况下，您发送Referrer-Policy: same-origin响应标头，这意味着请求iframe url时的Referer请求标头仅针对同一域的iframe url设置，而不是其他域，在本例中为 www.facebook.com。

所以Referer: https://www.example.com 请求标头没有为 facebook 聊天 url 设置，因此您可能会收到此错误。

将响应标头更改为origin。

例如，用 php，做

header('Referrer-Policy: origin');

请注意，您可能需要重新加载页面几次并等待几分钟才能被浏览器“理解”。

参考文献

Referrer-Policy header

Same-origin policy