MITMを使用してラインフロントエンドエラーをデバッグ

2438 ワード

MITMを使用してラインフロントエンドエラーをデバッグ
前言
現在の会社では、オンラインを導入するたびに少なくとも30分かかります.オンラインが完了したばかりで、チェックラインにバグが見つかった場合、これはあなたがまた配置を待つことを意味します.特に退勤に近いときにこのことが起こったら、全体がよくありません.
まず線上のフロントエンドコードは圧縮+混同されており、加えてsourceMapなし(mapがあってもデバッグがうまくいかない場合が多い)ということで、どこが間違っているのか推測するしかありません.このとき、オンラインのcss、jsファイルをローカルのdevモードでパッケージ化されたファイルに置き換えることができれば、debugの効率が大幅に向上しますが、運維はもちろんオンラインでデバッグする権限を与えません.ページ全体が崩れたらどうしますか?仲介者の攻撃を考えましたローカルブラウザで要求されたリソースを置き換えるには、サーバーを汚染することなく、デバッグを容易にすることができます.
構想
オンラインのモジュールページは主に2つのファイル、jsとcssファイルに依存し、ブラウザのオンラインの静的ファイルに対する要求を私のホストに転送すれば、オンラインのリアルタイムデバッグを実現することができます.簡単に言えばChromeのエージェントツールを使用して、urlに一致し、リクエストを修正してフィルタリングするローカルのエージェントサーバにすべてのトラフィックを転送します.
ツールの準備
Proxy SwitchyOmegaanyproxy
手を出す
インストール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バージョンのリソースに置き換えられていることがわかりました.このようにオンラインで再現できる問題は、ローカルでデバッグしやすくなりました.
下図は元の線上のコードです

CentOS 7にMariaDB 10.0をインストール（SCL）

CentOS 6にMariaDB 10.2をインストール（SCL）