如何解决iframe内跳转跨域收银台页面被拦截的问题

跳转被拦截的核心原因有两个：一是绝大多数支付服务提供商会通过X-Frame-Options响应头、Content-Security-Policy: frame-ancestors指令，禁止自身页面被嵌入第三方iframe；二是部分浏览器会默认拦截跨源iframe发起的顶层导航操作，避免恶意页面私自篡改用户当前访问地址。

方案1：顶层窗口跳转（兼容性最高，推荐使用） #

不要在iframe内部直接执行跳转，改为修改全局顶层窗口的地址加载支付页：

• 如果iframe和父页面同域，直接在iframe的业务逻辑位置执行：

window.top.location.href = 'https://payments.b.example/你的结账路径及参数'

• 如果iframe和父页面跨域，通过postMessage通知父页面执行跳转：
  1. iframe内发送跳转通知：

  // 放在原有跳转逻辑位置，生产环境建议把*替换为父页面实际域名提升安全性
  window.parent.postMessage({
    type: 'toCheckout',
    url: 'https://payments.b.example/你的结账路径及参数'
  }, '*')
  

  2. 父页面添加消息监听：

  window.addEventListener('message', (e) => {
    // 生产环境需要先校验e.origin为iframe的合法域名，避免恶意消息触发跳转
    if (e.data?.type === 'toCheckout' && e.data?.url) {
      window.location.href = e.data.url
    }
  })
  

方案2：新窗口打开支付页 #

如果业务要求不离开当前电商页面，可以弹出新标签页加载支付地址：

// 注意该逻辑必须绑定在用户主动触发的事件回调（比如点击「去结账」按钮的click事件）中，不要放在异步回调里自动触发，否则会被浏览器弹窗拦截机制拦截
window.open('https://payments.b.example/你的结账路径及参数', '_blank')

方案3：父页面全屏内嵌支付iframe #

如果你的支付服务商支持自定义嵌套白名单，可以沟通将你的父页面域名www.a.example加入服务商的frame-ancestors白名单，之后父页面收到iframe的跳转通知后，弹出全屏遮罩层内嵌支付页面的iframe即可，不会打断当前购物流程。

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