如何解决Vue 3应用中第三方JS篡改浏览器历史记录的问题？

问题根因 #

你遇到的异常是第三方HTML内的代码直接污染了全局window.history对象，每次组件重算时重复执行history.pushState逻辑，且调用时传入的URL和当前页面地址完全一致，所以只新增历史记录但不触发URL变更。

解决方案 #

方案1：沙箱隔离第三方内容（最优） #

从根源避免第三方代码篡改全局上下文，完全隔绝对父页面历史记录的影响：

• 用iframe替代当前的<component>渲染后端返回的HTML，配置沙箱属性：

<iframe 
  :srcdoc="后端返回的HTML字符串"
  sandbox="allow-scripts allow-same-origin"
  style="border: none; width: 100%; height: fit-content"
></iframe>

• 沙箱模式下iframe内的pushState调用只会作用于iframe自身的历史栈，不会修改浏览器全局历史，也不会影响外层页面的回退逻辑。

方案2：劫持history.pushState做调用过滤 #

如果必须在当前页面上下文渲染第三方内容，可临时重写pushState方法拦截无效调用：

• 组件挂载时保存原始方法，加过滤逻辑后重写，卸载时恢复：

import { onMounted, onUnmounted } from 'vue'

let rawPushState = null
// 配置业务侧允许的合法跳转路径前缀，不在范围内的pushState调用都会被拦截
const allowRoutePrefix = ['/dashboard', '/user']

onMounted(() => {
  rawPushState = window.history.pushState
  window.history.pushState = function(state, title, url) {
    // 过滤URL为空、和当前地址完全一致的无效调用
    if (!url || url === window.location.href || !allowRoutePrefix.some(prefix => url.startsWith(prefix))) {
      return
    }
    return rawPushState.apply(this, arguments)
  }
})

onUnmounted(() => {
  // 组件卸载恢复原生方法，避免影响其他业务
  if (rawPushState) window.history.pushState = rawPushState
})

你遇到的每次重算新增3条历史的问题，刚好对应第三方代码的3次无效pushState调用，加过滤逻辑后会被直接丢弃。

方案3：兜底清理冗余历史记录 #

如果前两个方案受限于业务场景无法使用，可在每次组件重算后批量回退无效记录：

import { watch, nextTick } from 'vue'

// 监听触发组件重算的依赖变量
watch(你的重算触发变量, async () => {
  await nextTick()
  // 等待第三方代码执行完成后回退3步冗余历史
  window.history.go(-3)
})

该方案为临时兜底方案，优先使用前两个方案从根源解决问题

内容的提问来源于stack exchange，提问作者Arminas Šaltenis