如何监听react-iframe的URL变化并获取重定向后的URL

问题根因 #

拿不到contentWindow.location.href不是react-iframe包的问题，是浏览器同源策略的强制安全限制：只要iframe加载的资源和当前页面不同源（协议、域名、端口任意一项不一致），父页面就被禁止读取iframe内部的location、document等敏感属性，跨域场景下强行读取要么报权限错误，要么拿到的是父页面自身的地址，不可能拿到iframe内部跳转后的真实地址。
react-iframe本质只是对原生iframe标签的轻量封装，它的onLoad事件和原生iframe的load事件行为完全一致，不存在特殊API可以绕过浏览器安全限制。

可行解决方案 #

根据你是否能控制iframe加载的目标页面，分两种场景处理：

• 可控制目标页面代码（iframe加载的是你自己的业务域名页面）
  用postMessage做跨页面通信即可，这是最合规的实现方式：
  1. 父页面提前监听message事件，接收iframe主动上报的地址

  // React组件内可以放在useEffect里注册监听
  useEffect(() => {
    const handleMessage = (event) => {
      // 必须做来源校验，避免接收第三方恶意页面的消息
      if (event.origin !== '你的目标业务页面域名') return
      if (event.data?.type === 'IFRAME_CURRENT_URL') {
        console.log('iframe重定向后地址：', event.data.href)
      }
    }
    window.addEventListener('message', handleMessage)
    return () => window.removeEventListener('message', handleMessage)
  }, [])
  

  2. 在iframe加载的目标页面内，每次页面加载/跳转完成后，主动向父页面推送当前地址

  // 目标页面内执行
  window.parent.postMessage(
    {
      type: 'IFRAME_CURRENT_URL',
      href: window.location.href
    },
    '*' // 生产环境建议替换为父页面的具体域名，提升安全性
  )
  

• 不可控制目标页面代码（iframe加载的是第三方公网页面，你改不了对方代码）
  纯前端没有任何方案可以突破同源限制拿到跨域iframe的内部地址，不要尝试轮询contentWindow这类无效方案，只会持续抛出跨域错误。
  这种场景只能通过服务端代理实现：
  1. iframe不要直接填第三方地址，改为填写你自己服务端的代理接口地址
  2. 所有iframe的资源请求都走你的服务端转发，服务端在转发过程中可以读取3xx重定向响应的Location头，拿到完整跳转链路和最终落地地址
  3. 服务端拿到最终地址后，通过接口返回、SSE、WebSocket等方式同步给前端即可。

注意：不要尝试网上说的关闭浏览器安全参数、改浏览器配置这类方案，只在本地调试有效，不可能要求所有用户都改浏览器设置，生产环境完全不可用。

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