Safari中嵌入Facebook Feed至iframe遇X-Frame-Options DENY错误的解决办法

问题描述 #

为小型企业网站嵌入Facebook动态时，Chrome中功能正常，但Safari持续报错：Facebook动态：因设置了'X-Frame-Options'为'DENY'，拒绝在框架中显示。，仅关闭Safari的“阻止跨网站跟踪”能临时解决，但无法要求访客这么做。使用的iframe代码如下：

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fqualityhomerepairandimprovement&tabs=timeline&width=300&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

解决方案 #

• 补全有效的Facebook App ID
  你的iframe代码中appId参数为空，Facebook嵌入插件在缺少有效App ID时，Safari的隐私策略会触发更严格的跨域限制。先在Facebook开发者平台创建对应应用，获取App ID后，替换到iframe的appId参数后，例如：&appId=123456789（替换为你的实际ID）。

• 改用Facebook JavaScript SDK加载插件
  相比iframe，Facebook官方JS SDK在Safari隐私环境下兼容性更好，示例代码如下：

  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '你的App ID', // 替换为实际ID
        xfbml      : true,
        version    : 'v18.0' // 使用最新版本号
      });
    };
  
    (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/zh_CN/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
  </script>
  
  <div class="fb-page" 
       data-href="https://www.facebook.com/qualityhomerepairandimprovement"
       data-tabs="timeline"
       data-width="300"
       data-height="500"
       data-small-header="false"
       data-adapt-container-width="true"
       data-hide-cover="false"
       data-show-facepile="true"></div>
  

• 将网站域名添加到Facebook应用白名单
  登录Facebook开发者后台，找到你的应用，在「设置-基本」中添加网站域名到「应用域」，同时在「产品-Facebook登录-设置」中添加域名到「有效的OAuth重定向URI」。这一步能让Facebook明确允许该域名嵌入其内容，规避跨域限制。

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