我试图将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.facebook.com/example/settings/?tab=messenger_platform
的页面设置中将https://www.example.com/
确切地添加为列入白名单的域名
https://findmyfbid.com/报告我的pageID为857469729300
我的脸谱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>
我做错了什么?非常感谢!
答案 0 :(得分:2)
根据facebook chat troubleshooting tips:
如果您看到控制台错误,例如“拒绝在框架中显示 *,因为祖先违反了以下内容安全策略指令:* ”,请检查该插件所在页面的域名渲染上已被列入白名单。另外,请确保未将Referrer-Policy标头设置为no-referrer。
在您的情况下,您发送Referrer-Policy: same-origin
响应标头,这意味着在请求iframe网址时 Referer 请求标头仅针对同一网域的iframe网址设置,而不是其他人,在本例中为www.facebook.com。
因此,没有为Facebook聊天网址设置Referer: https://www.example.com
请求标头,因此可能是您收到此错误。
将响应标题更改为origin
。
例如,使用php,执行
header('Referrer-Policy: origin');
注意,您可能需要重新加载页面几次并等待几分钟才能被浏览器“理解”。