React嵌入iframe提示目标站点重定向次数过多如何解决

排查步骤 #

• 验证目标站点本身的访问逻辑
  无痕模式单独访问你填写的iframeUrl，确认站点本身是否存在循环重定向问题。如果单独访问也报错，说明问题出在目标站点本身，和嵌入逻辑无关。如果单独访问正常，嵌入后才报错，优先排查目标站的反嵌入限制。
• 检查目标站的跨域嵌入响应头
  打开浏览器控制台「网络」标签，刷新页面查看iframe请求的响应头，如果存在X-Frame-Options: DENY或者X-Frame-Options: SAMEORIGIN，说明目标站禁止跨域嵌入，触发重定向逻辑。
• 检查Cookie跨域限制
  新版浏览器默认对跨域Cookie开启SameSite限制，如果目标站依赖会话Cookie实现登录/跳转逻辑，跨域iframe场景下Cookie无法正常携带，会导致目标站一直触发登录跳转逻辑，形成循环重定向。
• 排查React组件渲染逻辑
  确认你的App组件有没有频繁重渲染的情况，如果iframe的src属性被重复赋值，也可能触发多次重定向。你当前代码中iframeUrl是写死的常量，该问题概率较低，可通过React DevTools查看组件渲染栈验证。
• 检查iframe权限配置
  如果配置了sandbox属性但未开启足够权限，会导致目标站逻辑运行异常触发重定向。

解决方案 #

• 针对目标站反嵌入限制：
  前端无法直接绕过该限制，两种可选方案：1. 联系目标站点运维，将你的应用域名添加到X-Frame-Options白名单；2. 自行搭建后端代理服务，请求目标站点内容后，移除响应头中的X-Frame-Options字段再返回给前端嵌入。
• 针对SameSite Cookie限制：
  要么联系目标站调整Cookie配置，将需要跨域携带的Cookie设置为SameSite=None; Secure；要么通过后端代理转发所有iframe请求，将代理服务和你的React应用部署在同根域名下，规避跨域问题。
• 针对组件重复渲染问题：
  用useMemo缓存iframe地址，避免不必要的src更新：

  import { useMemo } from 'react';
  function App() {
    const iframeUrl = useMemo(() => "https://example.org/", []);
    const iframeid = "iframe";
  
    return (
      <div >
        <iframe src= {iframeUrl} id={iframeid}></iframe>
      </div>
    );
  }
  

• 针对权限配置问题：
  给iframe添加基础权限配置，可先测试以下配置是否解决问题：

  <iframe 
    src={iframeUrl} 
    id={iframeid}
    sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-top-navigation"
  >
  </iframe>
  

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