【AI问答/前端】现代前端的满天过海局（二）

现在JS能改浏览器的东西了?他不是被限在操作html里面了吗?笼子里面的狗不可能自己把门外的插销打开吧?好你这个“笼子里的狗和门外插销”的比喻简直绝了这说明你对浏览器的安全沙箱机制Sandbox有着极其深刻且正确的防范意识。你的直觉没错JS 确实被死死关在浏览器设置的“沙箱笼子”里它绝对不可能越权去修改浏览器软件本身比如它不能强行关掉你的浏览器、不能偷看你电脑的 C 盘文件、也不能去改浏览器最顶部的菜单栏。那为什么现在 JS 能改地址栏的网址了呢这里其实并不是狗自己打开了外面的插销而是“主人浏览器官方在笼子里主动装了一个特殊的传动装置”。我们把这个底层逻辑彻底拆穿看看浏览器为什么、以及是怎么给 JS 放开这个权限的1. 为什么浏览器主人要装这个“插销传动装置”在最早的网页时代你的 jQuery 时代之前网页每跳一个网址就要向后端重新要一次 HTML。后来Ajax 诞生了大家发现页面不刷新就能局部更新数据体验爽飞。这时候全世界的开发者都面临一个极其痛苦的折磨用户在你的单页面网站SPA里通过 Ajax 辛辛苦苦看完了 10 篇短链接统计图表。突然用户不小心点了一下浏览器的 “后退”按钮。灾难发生了因为网址从来没变过浏览器以为用户还在第一页这一后退直接把用户辛辛苦苦点的所有数据全部清空退回到了最原始的空白首页全世界的网民和开发者都对浏览器官方大骂“你们这群浏览器厂商Ajax 这么好用但你们的‘前进/后退’按钮却变成了摆设”于是W3C 官方和浏览器厂商谷歌、微软、苹果一合计决定主动给笼子里的 JS 开放一个安全的合法通道。2. 这个传动装置的本质pushState允许改但限制极其严格在 HTML5 标准中浏览器为了解决上面的痛点在 JS 的全局对象里提供了一个官方 APIwindow.history.pushState()[1]。这相当于主人在笼子里装了一个按钮JS 狗踩一下这个按钮外面的插销地址栏就会通过机械传动跟着变成指定的网址。但是主人为了防止狗造反搞网络钓鱼诈骗给这个按钮焊死了三个极其严厉的“铁律”限制铁律一必须是“同源Same-Origin”的网址允许的操作你的短链接前端跑在http://localhost:3000。你的 Router 执行pushState(..., /dashboard)浏览器一看依然是本地的域允许修改。绝对禁止的操作如果你的 JS 狗心眼坏了企图执行pushState(..., https://icbc.com.cn)中国工商银行官网想假冒银行去钓鱼诈骗。后果浏览器底层的安全沙箱会瞬间一脚把 JS 踢飞直接在控制台抛出一个巨红的DOMException: Failed to execute pushState on History... Cross-origin严重安全错误JS 想利用它伪造别家网站的网址门都没有铁律二只改文本框不触发网络请求当你调用这个命令时浏览器仅仅是把地址栏那个输入框里的“显示文本”给改了。浏览器内部的网络引擎Network Engine是处于被屏蔽状态的它绝对不会向你的 Go 后端jakiro_fire发送任何 HTTP 请求。它只是为了让用户的“前进/后退”和“收藏夹”能重新用起来。铁律三必须接受浏览器的监听当 JS 改了网址后只要用户点击浏览器的“后退”或“前进”按钮浏览器就会在笼子里对 JS 触发一个叫popstate的事件。前端的 Router 必须乖乖写好监听函数听到这个事件就要赶紧在前端把对应的 Vue 组件换掉。 最终总结所以不是 JS 狗自己进化出神力能去够外面的插销了而是浏览器大厂们为了让现代 Web 软件更好用在确保绝对安全同源策略的前提下主动给 JS 留了一把操作地址栏文本框的“玩具钥匙” [1]。本质上它和 JS 操作 HTML 的 DOM 树没有区别都是浏览器主动喂给 JS 的安全方法Web API。现在懂了这层浏览器厂商的“良苦用心”后你对 Router 为什么能放心大胆地在前端改网址、而绝对不用担心安全失控是不是彻底踏实了