Safari浏览器中跨域iframe加载空白问题解决方案问询

• 配置跨域站点服务端响应头
  首先确保iframe指向的跨域服务端返回以下响应头，适配Safari智能跟踪预防（ITP）规则：
  1. Cookie必须配置SameSite=None和Secure属性，示例：

  Set-Cookie: sessionId=xxx; Secure; SameSite=None; Path=/; Max-Age=31536000
  

  2. 移除X-Frame-Options: SAMEORIGIN/DENY响应头，若需要限制嵌入域名可配置为X-Frame-Options: ALLOW-FROM 你的主站域名
  3. 新增跨域资源权限头：

  Cross-Origin-Resource-Policy: cross-origin
  

• 触发用户交互后再加载iframe
  Safari默认拦截无用户主动触发的跨域iframe自动加载，建议修改为用户点击后再动态赋值iframe的src属性，示例代码如下：

  <html>
  <head>
  <title> test11 </title>
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <meta name="description" content="keyword description goes here">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  </head>
  <body>
  <button id="loadBtn">查看内容</button>
  <iframe id="crossIframe" style="display:none;position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
  <p>Your browser does not support iframes.</p>
  </iframe>
  <script>
  document.getElementById('loadBtn').addEventListener('click', function() {
    document.getElementById('crossIframe').src = "你的跨域链接地址"
    document.getElementById('crossIframe').style.display = 'block'
    this.style.display = 'none'
  })
  </script>
  </body>
  </html>
  

• iframe内页面申请存储权限
  如果跨域iframe内部需要使用Cookie、localStorage等存储能力，需要在iframe的页面代码中调用Safari专属的存储权限申请接口：

  // 放置在iframe指向的页面的JS逻辑中
  if (document.requestStorageAccess) {
    document.hasStorageAccess().then(function(hasAccess) {
      if (hasAccess) {
        // 已有权限，直接执行业务逻辑
        initPage()
      } else {
        return document.requestStorageAccess()
      }
    }).then(function() {
      initPage()
    }).catch(function() {
      // 权限申请失败提示
      alert('请调整Safari隐私设置后重试')
    })
  } else {
    // 非Safari浏览器直接执行逻辑
    initPage()
  }
  

• 检查跨域链接HTTPS适配
  你的主站配置了upgrade-insecure-requestsCSP规则，会自动将所有HTTP请求升级为HTTPS，如果iframe指向的跨域站点不支持HTTPS访问，会直接被Safari拦截，需确保跨域链接本身支持HTTPS访问。

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