集成Facebook聊天至网站时遭遇Content Security Policy错误

嘿，我来帮你搞定这个问题！你遇到的「Refused to display」报错，本质是网站的**Content Security Policy（CSP）**规则太严格，阻止了加载Facebook聊天插件所需的资源，浏览器出于安全考虑直接拦截了它。下面是具体的修复方案：

核心调整：更新CSP规则 #

你需要在网站的CSP配置中添加以下Facebook相关的域名和权限，按不同资源类型分别设置：

1. 必须放行的域名 #

把这些域名添加到对应的CSP指令里：

• https://www.facebook.com：插件的主脚本和iframe来源
• https://staticxx.facebook.com：插件的静态资源（脚本、样式、图标等）
• https://*.fbcdn.net：Facebook的CDN资源（比如聊天窗口的图片）

2. 具体的CSP配置示例 #

根据你设置CSP的方式，选择对应的配置：

方式一：HTML Meta标签

如果是在页面头部用meta标签设置CSP，替换成类似这样的代码：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://www.facebook.com https://staticxx.facebook.com 'unsafe-inline' 'unsafe-eval';
  frame-src 'self' https://www.facebook.com;
  style-src 'self' https://staticxx.facebook.com 'unsafe-inline';
  img-src 'self' https://*.facebook.com https://*.fbcdn.net data:;
  connect-src 'self' https://www.facebook.com https://staticxx.facebook.com;
">

方式二：服务器配置（Nginx）

如果是在Nginx里设置，在你的server或location块中添加：

add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.facebook.com https://staticxx.facebook.com 'unsafe-inline' 'unsafe-eval'; frame-src 'self' https://www.facebook.com; style-src 'self' https://staticxx.facebook.com 'unsafe-inline'; img-src 'self' https://*.facebook.com https://*.fbcdn.net data:; connect-src 'self' https://www.facebook.com https://staticxx.facebook.com;";

方式三：服务器配置（Apache）

如果是Apache服务器，在.htaccess或配置文件中添加：

Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://www.facebook.com https://staticxx.facebook.com 'unsafe-inline' 'unsafe-eval'; frame-src 'self' https://www.facebook.com; style-src 'self' https://staticxx.facebook.com 'unsafe-inline'; img-src 'self' https://*.facebook.com https://*.fbcdn.net data:; connect-src 'self' https://www.facebook.com https://staticxx.facebook.com;"

关键说明 #

• frame-src 是重点：你报错里的「Refused to display」就是因为CSP阻止了Facebook的iframe，所以必须把https://www.facebook.com加入frame-src。
• 关于'unsafe-inline'和'unsafe-eval'：这两个权限是因为Facebook的插件会用到内联脚本和eval函数，虽然看起来不够安全，但目前要让插件正常运行几乎是必须的；如果之后想更严格，可以参考Facebook官方文档里的CSP优化方案。
• 缓存问题：修改完CSP后，一定要清空浏览器缓存再重新加载页面，否则可能看不到效果。

内容的提问来源于stack exchange，提问作者Codemonkey