# **本期作者** ![截屏2024-02-05 15.04.28.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92d646b66a4a4501971c1cde7e8f7a61~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=962&h=306&s=56834&e=png&b=ffffff) # **拦截的价值** > 计算机科学领域的任何问题都可以通过增加一个中间层来解决。—— Butler Lampson 如果系统的控制权、代码完全被掌控，很容易添加中间层；现实情况我们往往无法控制系统的所有细节，所以需要使用一些 **“非常规”（拦截）手段来增加中间层**。常见的场景有 - 自动上报未捕获的错误，进行错误监控 - 拦截网络请求（fetch、xhr）进行接口性能统计、统一错误码处理、远程 debug 接口 - 构造执行第三方代码、微应用必须的沙盒环境 # **拦截方法** ## **拦截/覆写浏览器 API** 最常见的场景有通过拦截 console 实现错误上报。 ``` const _error = console.error; console.error = (...args) => { _error.apply(console, args); console.info('在此处上报错误信息...'); }; // 其它代码打印错误 console.error('error message'); ``` 项目中通常会基于 axios 此类的网络库，做一些统一处理逻辑但在某些场景，我们无法修改项目代码，就能通过拦截 fetch, xhr 来达到目的。 ``` // 接口性能监控，打开 https://example.com/，在控制台执行以下代码 const _fetch = window.fetch; window.fetch = (...args) => { const startTime = performance.now(); return _fetch(...args).finally(() => { console.info('接口耗时：', Math.round(performance.now() - startTime), 'ms'); }); }; await fetch('//example.com'); ``` 你可以选择第三方库（比如 xhook：*https://github.com/jpillora/xhook/* ）来快速实现 fetch, xhr 拦截功能。浏览器中大多数 API 都是可以覆写的，**打开脑洞**，可以实现非常多的神奇功能： - 网络 API （xhr, fetch, WebSocket） - - 性能监控、统一错误码处理 - - 添加额外 HTTP 参数（header, query）实现接口染色功能 - - 修改 Host 将接口自动转向代理服务，实现远程调试接口、Mock 数据 - 修改原型（Array.prototype.at = ...） - - polyfill 库的必备手段 - 页面跳转 API （window.open, history.go back pushState） - - 修改跳转的目的页面 - - 自动添加页面跳转埋点 - 删除特定 API 禁用浏览器功能 - - 禁止 js 访问摄像头 navigator.mediaDevices.getDisplayMedia = null - - 禁止 p2p 连接 window.RTCPeerConnection = null ## **事件、DOM 元素** 浏览器也会提供一些具备拦截性质的 API，允许开发者实现特定功能。一个 DOM 元素经常会绑定许多事件，如果你想让特定的事件回调函数先执行，以便添加一些前置逻辑或取消后续事件的执行；可以了解 **addEventListener#usecapture (opens new window)** （*https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture*）的用法。 ``` // 禁止响应页面的所有点击事件（危险⚠️），第三个参数（usecapture）设为 true document.body.addEventListener( 'click', (evt) => { evt.preventDefault(); evt.stopPropagation(); }, true ); ``` 许多 DOM 元素都是在运行时动态创建的，如果需要修改动态创建的 DOM 元素可使用 **MutationObserver(opens new window)** （*https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver*）比如，拦截所有超链接（a 标签），给目标链接添加 _source 参数 ``` const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type !== 'childList' || !mutation.addedNodes) return; mutation.addedNodes.forEach((item) => { if (!item.nodeName === 'A') return; const targetUrl = new URL(item.href, location.href); targetUrl.searchParams.append('_source', 'any string'); item.href = targetUrl.href; }); } }); observer.observe(document.body, { attributes: true, childList: true, subtree: true, }); ``` TIP：MutationObserver 同样适应于修改 iframe, img 的链接，或其它任意 DOM 元素的属性 ## **调试小技巧** 如果你的页面因未知代码陷入了快速刷新的死循环，可在项目中添加以下以下代码；页面刷新前会进入 debug 状态，在 devtools 中查看调用堆栈（call stack）即可了解刷新的原因 ``` window.addEventListener('beforeunload', () => { debugger; }); ``` TIP：http 302 属于非代码导致页面跳转，上述代码无法拦截当调试第三方代码时，需要监听某个不符合期望的对象属性值 ``` // debug 状态下任意可访问对象 const obj = { prop: 1 }; // 在 devtools -> console 中执行以下代码 _obj_prop = obj.prop; Object.defineProperty(obj, 'prop', { set: (v) => { _obj_prop = v; // 每次赋值都会进入 debug 状态 debugger; }, get: () => _obj_prop, }); // 试试执行 obj.prop = 2 // 后续可在 console 中随时访问 _obj_prop 的当前值 ``` 如果需要监听某个对象所有属性值被读写的消息，可以使用 Proxy ``` const obj = { prop: 1 }; const obj2 = new Proxy(obj, { get(target, key, receiver) { return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { debugger; return Reflect.set(target, key, value, receiver); }, }); // 试试执行 obj2.abc = 2 ``` 注意差异 - Object.defineProperty 没有改变 obj 的引用，Proxy 生成了新对象 obj2 - 使用 Proxy 可以监听对象（obj2）所有属性的读写，而 Object.defineProperty 一次只能监听一个属性（prop） ## **ServiceWorker 拦截** 前端可能会使用 ServiceWorker 来实现离线可用、缓存资源、加速页面访问等功能。 ``` // 安装时缓存资源 self.addEventListener('install', (event) => { event.waitUntil( caches .open('v1') .then((cache) => cache.addAll(['/index.html', '/style.css', '/app.js'])) ); }); // 拦截页面资源请求，使用缓存响应（也可使用自定义内容响应请求） self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response; }) ); }); ``` ServiceWorker 是前端页面到服务器之间的中间层，**它能拦截同域名下的所有请求**，缓存或篡改请求结果，能实现的功能远不止离线或加速访问这么简单。后文会从 WebContainer 原理分析 ServiceWorker 的高端玩法。 ## **服务器拦截** 前面介绍的技巧都局限在客户端（浏览器）中，如果你掌握了真正的服务控制权，即配置服务器和内网 DNS 域名等权限（一般由公司内的工程效率团队或运维负责），再配合前面介绍的浏览器拦截技巧，可玩性将大大增加。一个 HTTP 请求往往会经过多个服务器节点，**每个节点就是一个中间层**。 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77990aacd02b4230bc9e8f398c63a286~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=308&s=22284&e=png) 1.DNS 决定 HTTP 请求由哪个网关（Nginx）处理 a.如果你能控制 DNS 服务，则**可以在网关之前再加一个中间层** 2.服务器节点（网关、Service）节点能获取、篡改 HTTP 请求中的所有信息：Header、Cookie、Body a.根据 HTTP 信息，可将请求转发到本地目录（静态资源），或转发到其他远程服务b.添加 Cookie 追踪用户，实现灰度、AB 实验分流等功能c.实现业务层无感知注入代码d.动态篡改数据，实现 Mock 功能 # **如何注入代码** 前文介绍的客户端拦截技巧都需要**在浏览器中注入代码**，以下列举注入代码的方式，根据目的和能获取的权限决定采用哪种方式。 1.源码注入 - 如果你有源码控制权，那你可以对项目做任何事情，确保拦截代码优先执行即可 - 优点：灵活可控；缺点：通用性不好，侵入业务 2.构建、推送服务注入 - 工程团队提供构建、推送服务，可编写脚本在构建产物中注入代码（比如 html 中添加 script 标签） - 优点：业务无感知，通用性好；缺点：不一定有权限 3.网关注入 - Nginx 向 html 中注入 script 也很简单 - 优点同上，一般限于在开发、测试环境，不会上生产环境 4.浏览器插件、devtools 注入 - 如果你啥权限都没有（普通用户），又想干一些“坏事”，则可选择使用插件注入代码，或临时在 devtools 的 console 面板直接写代码 - 优点：万能注入、无法阻挡；缺点：只能影响当前浏览器，难以跨浏览器、设备、用户 - 常用的脚本管理插件：**篡改猴 (opens new window)** （*https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo*），也可考虑自己写浏览插件尽量让被注入的代码**早于业务代码执行**，比如实现拦截并上报错误信息，如果被注入的代码执行时机较晚，则会丢失执行前的错误信息。 # **案例分析** ## **WebContainer 原理** WebContainer (opens new window)是一种基于浏览器的运行时，可完全在浏览器标签页内执行 Node.js 应用程序和操作系统命令。惊艳的地方有两点： 1. 能在浏览器中运行 Node 服务，居然还能启动 DevServer “监听端口” 1. 离线后 IDE 开发中的页面也能正常开发以 *https://stackblitz.com/edit/nextjs-9hpfxj?file=package.json* (opens new window)为例 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/571c7739030e4af4be62280dca2fef84~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=426&s=79798&e=png&b=fefefe) 核心部分是将 Node 编译成 WASM，然后 Mock 文件系统、底层网络模块使其能在浏览器中运行。然后使用 Node 启动 devServer 服务，监听端口。 - dev 页面发起的请求被 ServerWorker 拦截映射成本地 Mock 的文件 - 本地 Mock 的文件由 IDE 源码使用 Node 编译而成 - 源码的依赖包被映射成 http 请求从远端获取比如安装依赖 react-dom 对应的网络请求是： *https://t.staticblitz.com/w/v13/h/e/react-dom@18.2.0*(opens new window) 在浏览器中运行 DevServer 时，当然无法监听 TCP 端口。巧妙的地方是将端口映射成唯一的域名，通过 ServiceWorker 拦截域名下的所有请求，关联到 Mock 的文件系统。详情请看 WebContainer 原理分析(opens new window) ## **沙盒** > 沙盒（sandbox，又译为沙箱）是一种安全机制，为执行中的程序提供隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。假设你需要执行一段第三方代码，安全要求禁止访问 document，以及 window 下的 open、location。 *尝试复制以下代码在 console 中执行* ``` function safeExec(code) { const proxyWindow = new Proxy(window, { get(target, key, receiver) { if (['open', 'location', 'document'].includes(key)) throw new Error(`禁止访问 key: ${key}`); if (key === 'window') return proxyWindow; return Reflect.get(target, key, receiver); }, // set() {} }); new Function('window', `with(window) { ${code} }`)(proxyWindow, null); } // Error 禁止访问 key: open safeExec(`window.open('//danger.com')`); ``` 沙盒也是前端微应用的核心技术，通过 Proxy 监听 window 的读写记录，可以隔离多个微应用的运行环境，卸载某个微应用后也能将环境（window 对象）重置回该应用加载前的状态。 ## **通用域名服务** 一般 Web 开发者使用会使用 localhost:8080、192.168.0.1:8080 这个访问开发环境；如果使用真实域名来转发请求到开发环境（*https://ff-dev.bilibili.com?_ip_=192.168.0.1&_port_=8080*），能解决一些常见的问题： - 轻易实现共享域名（*bilibili.com*）的登录态 cookie - 无需配置 Web 服务的 https 证书 - - 仅限于安全上下文的特性（*https://developer.mozilla.org/zh-CN/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts*） - - - 在手机上使用 https 协议访问开发服务，避免 http 协议导致许多 Web API 不可用 - 该服务是一个天然的中间层，可无感注入代码实现效率工具，比如： - - 远程网络抓包、Mock - - 移动端控制台（eruda） - - 远程代码调试（chii） - - 切换后端接口环境、接口染色 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4e56116c9834de884d985788c628b2c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=916&h=569&s=516960&e=png&b=f5f7f9) 真实域名转发请求，能解决部分场景的问题，也会带来一些新问题需要解决： - 静态资源（/index.js）不带参数，无法转发到目的地，无法初始化页面 - 页面跳转后，域名或参数（_ip_, _port_）会丢失 - HMR 的 WebSocket（192.168.0.1:4000/socket.io）连接失败，无法自动热更新解决这问题确实有一些难度，好在前文已经介绍了对应的拦截技巧；一旦解决问题部署通用域名服务后，就能给许多人提供便捷服务。 **实现原理** ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d650864ab6a4f3ba52658386700a311~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=482&s=47257&e=png&b=fefefe) 1.加载 HTML - 部署一个 Nginx 服务，并为其注册域名（*ff-dev.bilibili.com*） - 在 Nginx 中读取 http 请求的 query 参数（_ip_, _port_），将请求转发到对应目标 - - 目标响应后，将参数也写入到 Response 的 cookie 中 - - 如果是 html 请求，则在 body 中注入 js - - - ... 替换为