如何避免iframe导致父页面重载并干扰浏览器历史记录？

问题描述 #

我开发了一个嵌套双层iframe的Chrome扩展（用于规避CORS问题），外层iframe是加载内层iframe的HTML页面容器，内层iframe加载我的网站并发起API请求。当内层iframe完成请求后，点击浏览器返回按钮时，API请求会在无导航操作的情况下被重新触发，推测是父页面在API请求时被加入了历史栈。奇怪的是，仅当内层iframe指向已部署网站时才会出现该问题，指向localhost时则不会干扰历史记录。我已为两个iframe添加沙箱且未授予top-navigation权限，请问如何防止点击返回按钮时主网站重载？

相关代码 #

inner.js

const iframe = document.createElement("iframe");
iframe.width = "100%";
iframe.height = "100%";
iframe.src = "website URL" // 该网站会发起GQL请求
iframe.sandbox = "allow-scripts allow-same-origin allow-popups allow-forms allow-modals";
document.body.appendChild(iframe)

inner.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body style="width: 100%; height: 100vh" id="iframeWrapperBody">
    <script src="inner.js"></script>
  </body>
</html>

outer.js（content script）

const iframe = document.createElement("iframe");
iframe.sandbox = "allow-scripts allow-same-origin allow-popups";
document.body.appendChild(iframe); 
iframe.contentWindow?.location.replace(chrome.runtime.getURL("inner.html"));

解决方案 #

1. 调整内层iframe的沙箱权限，移除allow-same-origin

allow-same-origin会让内层iframe与扩展页面同源，可能导致其历史操作间接影响父页面的历史栈。修改inner.js中的沙箱配置：

iframe.sandbox = "allow-scripts allow-popups allow-forms allow-modals"; // 去掉allow-same-origin

如果需要和内层iframe通信，改用postMessage机制，避免同源带来的历史栈干扰。

2. 拦截内层iframe的历史栈操作

已部署网站可能存在history.pushState或replaceState操作，这些操作会添加历史条目，导致返回按钮触发异常跳转。在inner.js开头添加拦截逻辑：

// 拦截不必要的历史栈操作
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

history.pushState = function(...args) {
  // 根据需求过滤操作，比如只允许特定场景的历史修改
  console.log("拦截pushState操作:", args);
  // 如果需要放行部分操作，可添加条件判断后执行原方法
  // originalPushState.apply(this, args);
};

history.replaceState = function(...args) {
  console.log("拦截replaceState操作:", args);
  // originalReplaceState.apply(this, args);
};

3. 修改外层iframe的加载方式

外层iframe使用contentWindow.location.replace可能导致历史栈异常，改用直接设置src属性加载inner.html：

// 修改outer.js
const iframe = document.createElement("iframe");
iframe.sandbox = "allow-scripts allow-popups"; // 同样可考虑移除allow-same-origin
iframe.src = chrome.runtime.getURL("inner.html"); // 直接设置src
document.body.appendChild(iframe);

4. 在主页面拦截popstate事件

在content script（outer.js）中监听popstate事件，阻止异常的返回行为：

window.addEventListener("popstate", (event) => {
  // 判断是否是iframe导致的无效历史跳转
  // 可通过历史状态或页面状态做进一步判断，避免影响正常返回
  event.preventDefault();
  // 恢复当前历史状态，避免重复触发
  history.replaceState(null, document.title, location.href);
});

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