自集成式HTTP代理方案

王泽鹏

前言大部分程序员，想必都会有一个常用的抓包代理工具；??但在座的各位，可曾见过这样一款集成在?Web?应用中的代理工具？ 已关注 关注 重播 分享 赞 关闭观看更多更多哔哩哔哩技术已关注分享视频，时长00:450/000:00/00:45 切换到横屏模式 继续播放进度条，百分之0播放00:00/00:4500:45 倍速播放中 0.5倍 0.75倍 1.0倍 1.5倍 2.0倍 超清 流畅 您的浏览器不支持 video 标签 继续观看 自集成式 HTTP 代理方案 观看更多转载,自集成式 HTTP 代理方案哔哩哔哩技术已关注分享点赞在看已同步到看一看写下你的评论 视频详情 它是明显区别于传统代理工具的，有以下特性：零安装、零配置，Web 点击即用、APP 扫码即用；（不是开盖即食，而是直接喂到嘴里分享?URL?链接（或二维码），即可远程调试?HTTP?协助他人或调试移动设备用户可远程相互共享代理配置，无需手动导入导出以一个场景举例你是一个前端开发，当后端接口还没准备好（或有?Bug?时），产品或设计师想体验效果传统办法，你配好接口?Mock，让产品使用你的设备体验当前方案，你配好接口?Mock，发一个?URL?链接给产品即可远程体验它的原理是将代理服务与应用（Web 网页或 APP）集成，从而大幅降低用户（研测产运）的使用成本。应用集成代理服务对应的?SDK，自动转发请求到代理服务传统代理工具的主要成本下载安装代理程序，甚至收费配置系统代理（移动端更烦）、https?证书同事之间共享代理规则（手动导入导出文件）这些成本带来各种烦恼，也将非技术岗位拒之门外。??场景：中午去吃饭的时候，手机突然断网；原来是刚刚网络调试，配置了系统代理！笔者曾尝试过多款代理工具，始终有不满意的地方，多年前在自己的开源项目?[Erra][1]?中探索新的代理方案，仍然不满意，遂放弃。??现将 Erra 的代理服务与工作中的应用集成，借鉴?[whistle][2]?的规则，再重新实现 UI 交互，终觉尚可。以下对比笔者曾长期使用过的代理工具。CharlesLightProxyFF-Proxy下载安装?APP是是否配置操作系统代理是是否安装信任?HTTPS?证书是是否Mock?方式UI文本规则UI?+?文本规则Mock?规则共享导出规则文件复制规则文本在线分享远程调试否否是通用?HTTP?请求代理是是否安装部署服务否否是该方案改进了工作中高频对特定应用（公司产品的域名、APP）?进行网络调试的体验和效率；该方案是一个增强型能力，与通用代理工具（Charles、LightProxy 等）没有任何冲突，不会影响习惯使用通用代理工具的同学。接下来介绍该方案的技术实现思路。方案原理概览总结分为四个部分与应用集成，将请求转发到代理服务，由代理服务转发请求到目标服务代理服务提供网络调试界面（UI），允许用户查看网络请求、配置?Mock?规则代理服务记录请求，并同步到?UI?界面代理服务在转发请求前、收到响应后，按?Mock?规则篡改请求内容应用集成与应用集成是当前方案区别与代理工具的根本所在，也是能实现零安装、零配置便捷性的原因。集成是将代理服务对应的?SDK?注入到业务系统（网页或 APP）中，SDK 会拦截并转发请求到代理服务。集成 SDK 的方式介绍以下两种，更多拦截注入技巧请阅读?[Web 终极拦截技巧（全是骚操作）][3]。自动注入 SDK1. 配置 DNS 使 `ff-*` （混合泛解析）指向代理服务，代理转发 html 请求时自动注入 SDK注入脚本示例`resp.body.replace('