Facebook Page Plugin在Safari（iOS及MacOS）无法加载问题求助

问题详情 #

我集成了Facebook Page Plugin，该插件在除Safari（iOS和MacOS平台）外的所有浏览器都能正常工作。使用的是Facebook官方提供的代码：

SDK加载代码：

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0&appId=123456789012345&autoLogAppEvents=1" nonce="Dbo7zqru"></script>

页面插件容器：

<div class="fb-page" data-href="https://www.facebook.com/myfacebookhandle" data-tabs="timeline" data-width="" data-height="550" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"></div>

在Safari中插件仅显示加载动画，控制台报错：

Refused to display 'https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2F' in a frame because it set 'X-Frame-Options' to 'DENY'.

补充：在MacOS的Safari中取消勾选“隐私设置”里的“向跟踪器隐藏IP地址”后，插件可正常工作。

原因分析 #

这个问题的核心是Safari的隐私保护机制：当开启“向跟踪器隐藏IP地址”时，Safari会对Facebook这类被标记为跟踪器的域名进行IP代理/隐藏，导致Facebook服务器无法正常验证请求合法性。Facebook会将这种异常请求判定为潜在安全风险，返回X-Frame-Options: DENY响应头，禁止页面在iframe中加载登录相关内容，最终导致Page Plugin加载失败。

其他浏览器的隐私保护逻辑不同，不会触发Facebook的安全拦截，因此插件能正常运行。

解决方法 #

1. 用户端临时解决（开发者无法控制） #

引导Safari用户调整隐私设置：

• MacOS：打开Safari偏好设置 → 隐私 → 取消勾选“向跟踪器隐藏IP地址”
• iOS：设置 → Safari浏览器 → 隐私与安全性 → 关闭“隐藏IP地址”

2. 开发者端优化尝试 #

（1）升级至最新版Facebook SDK

Facebook会持续修复兼容性问题，建议将SDK版本替换为当前最新稳定版（修改代码中的version=v15.0为最新版本号）。

（2）为fb-page容器添加data-app-id属性

在插件容器中显式指定与SDK一致的appId，帮助Facebook更准确识别请求来源：

<div class="fb-page" 
     data-app-id="123456789012345"
     data-href="https://www.facebook.com/myfacebookhandle" 
     data-tabs="timeline" 
     data-width="" 
     data-height="550" 
     data-small-header="true" 
     data-adapt-container-width="true" 
     data-hide-cover="true" 
     data-show-facepile="false"></div>

（3）手动初始化SDK

替换自动初始化方式，手动编写初始化逻辑，确保SDK加载完成后再解析插件：

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js" nonce="Dbo7zqru"></script>
<script>
window.fbAsyncInit = function() {
  FB.init({
    appId      : '123456789012345',
    xfbml      : true,
    version    : 'v15.0'
  });
};
</script>

3. 替代方案（若用户不愿调整隐私设置） #

如果无法要求用户修改Safari设置，可以考虑：

• 在插件加载失败的位置显示醒目的Facebook页面链接，引导用户跳转至官方页面查看内容
• 使用Facebook提供的共享按钮等轻量插件替代完整的Page Plugin

内容的提问来源于Stack Exchange，提问作者Tom