由于浏览器安全策略限制，JavaScript 无法直接读取 history.back() 即将跳转的目标 URL（尤其是外部域名），但可通过主动维护路由状态的方式，在应用内精准识别上一页是否属于本站，从而实现可控的回退拦截。
由于浏览器安全策略限制，javascript 无法直接读取 `history.back()` 即将跳转的目标 url（尤其是外部域名），但可通过主动维护路由状态的方式，在应用内精准识别上一页是否属于本站，从而实现可控的回退拦截。
在单页应用（SPA）中，开发者常希望通过按钮触发 history.back() 实现“返回上一页”功能，但需避免用户意外跳转至第三方网站（如从广告页、OAuth 回调页等外部来源进入后误点返回）。遗憾的是，原生 History API 不提供获取上一页面 URL 的能力——history.state 仅反映当前页面的状态对象，而 document.referrer 在跨域或隐私模式下不可靠，且无法准确对应 history.back() 的实际目标。
因此，推荐采用“主动标记 + 状态驱动”的设计模式：在应用内部导航时，显式记录来源可信性，而非尝试逆向探测目标地址。
✅ 推荐实践：用路由参数传递内部导航标识
以 Angular 路由为例（其他框架原理相通）：
-
导航时注入可信标识
当用户在本应用内跳转时，通过路由参数携带internal: true标识：
// 跳转至内部页面时主动标记
this.router.navigate(['/dashboard'], {
state: { internal: true } // 推荐使用 state（非 URL 参数），更安全且不暴露于地址栏
});
-
回退前校验上一页状态
在返回按钮逻辑中，读取window.history.state（注意：state是当前页面的 state，即「上一页跳转到本页时传入的 state」）：
onBackClick() {
const previousState = history.state;
if (previousState?.internal === true) {
window.history.back(); // 安全回退
} else {
// 可选择：禁用按钮、弹窗提示、或跳转至首页
alert('无法返回外部页面，已重定向至首页');
this.router.navigate(['/home']);
}
}
⚠️ 注意事项：
history.state仅对同源页面有效，且依赖上一页主动设置；首次访问或外部直达页面的state为null，应视为不可信。- 避免依赖 URL 解析（如
document.referrer或location.href），因其易被伪造、受隐私策略屏蔽（如Referrer-Policy: no-referrer）。- 若使用 Vue Router 或 React Router，同样可通过
router.push({ path: ..., state: { internal: true } })实现等效逻辑。
? 补充方案：全局路由守卫增强一致性
为降低手动标记遗漏风险，可在路由守卫中统一注入状态：
// Angular Route Guard 示例
canActivate(): boolean {
// 所有内部跳转自动附加 internal 标识
if (this.router.getCurrentNavigation()?.extras?.state == null) {
this.router.getCurrentNavigation().extras.state = { internal: true };
}
return true;
}
综上，虽无法“窥探”历史栈中的真实 URL，但通过约定式状态管理，我们能构建健壮、可维护的回退控制逻辑——这正是现代前端架构中“可控状态优于被动探测”的典型体现。
