使用MITM调试线上前端错误
前言
目前所在的公司每次部署上线至少半小时,如果在上线刚完成,检查线上发现有bug时,这意味着你又要等一次部署,尤其是接近下班的时候出这事的话,整个人都不好了。
首先线上的前端代码都是压缩+混淆过的,加上没有sourceMap(即使有map有时也不好调试),导致很多时候看到问题只能靠猜是哪里不对。这个时候如果能把线上的css、js文件替换成我本地的dev模式打包的文件,那将极大的提高debug效率,但是运维当然不会给你权限在线上调试啦,整个页面崩了怎么办?于是我想到了中间人攻击的方式来替换我本地浏览器请求的资源,这样不会污染服务器,又可以方便我调试,两全其美。
思路
线上的模块页面主要依赖两个文件,js和css文件,只要能把浏览器对线上这静态文件的请求转发到我本机,就可以实现线上实时调试了。
简单来说就是使用Chrome的代理工具,把我们所有的流量转发到本地的一个代理服务器,这个代理服务器会匹配url,对请求进行修改和过滤。
准备工具
开始动手
安装anyproxy
cnpm i anyproxy@beta4
这里要注意的是,我们需要替换的是https的资源,要先在本地导入自己的CA,这里有教程。
先在本地搭建一个代理服务器,anyproxy已经帮我们完成了其他的工作,我们只需要编写rule文件即可,我的配置的文件如下
// rules.js
const resRegx = /\.[a-z0-9]{8}.min/i
module.exports = {
summary: 'a rule to modify response',
* beforeSendRequest(requestDetail) {
let {headers, path} = requestDetail.requestOptions
if (path.match(/raven\.min\.js|analytics\.js|nr-\d+/)) { // 屏蔽无用资源
return {
response: {
statusCode: 404,
header: {'content-type': 'text/html'},
body: ''
}
}
}
// hook 静态资源CDN
if (requestDetail.url.indexOf('https://mcache.xxxx.cn/') !== -1) {
if (path.match(/legacy-vendor/)) return null // 第三方库不参与
// common-chunk.abcd1234.min.js ===> common-chunk.dev.js
let localPath = path.replace(resRegx, '.dev')
var newOption = Object.assign({}, requestDetail.requestOptions, {
hostname: '192.168.33.10', // 本机ip
port: 80,
path: localPath,
headers: {...headers, host: '192.168.33.10'}
});
return {
protocol: 'http',
requestOptions: newOption
};
}
},
};
启动proxy服务器
anyproxy --intercept --rule rules.js
访问线上代码,结果如下图,我们发现线上的js文件已经替换成我本地的dev版本的资源了,这样一些在线上才能复现的问题,很容易在本地调试了。
下图是原本线上的代码
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。