2

使用MITM调试线上前端错误

前言

目前所在的公司每次部署上线至少半小时,如果在上线刚完成,检查线上发现有bug时,这意味着你又要等一次部署,尤其是接近下班的时候出这事的话,整个人都不好了。

首先线上的前端代码都是压缩+混淆过的,加上没有sourceMap(即使有map有时也不好调试),导致很多时候看到问题只能靠猜是哪里不对。这个时候如果能把线上的css、js文件替换成我本地的dev模式打包的文件,那将极大的提高debug效率,但是运维当然不会给你权限在线上调试啦,整个页面崩了怎么办?于是我想到了中间人攻击的方式来替换我本地浏览器请求的资源,这样不会污染服务器,又可以方便我调试,两全其美。

思路

线上的模块页面主要依赖两个文件,js和css文件,只要能把浏览器对线上这静态文件的请求转发到我本机,就可以实现线上实时调试了。
简单来说就是使用Chrome的代理工具,把我们所有的流量转发到本地的一个代理服务器,这个代理服务器会匹配url,对请求进行修改和过滤。

准备工具

Proxy SwitchyOmega
anyproxy

开始动手

安装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版本的资源了,这样一些在线上才能复现的问题,很容易在本地调试了。

clipboard.png

下图是原本线上的代码

clipboard.png


Larry_
704 声望186 粉丝

FE