使用MITM调试线上前端错误

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

下图是原本线上的代码