ローカルプロキシで、Chromeへのレスポンスを編集する（Mac OS BigSur）

やりたいこと

背景は聞かないでください。

• 特定のサイトにアクセスした時に
• 「本番サイトです！」とHTMLに表示

方針としては、ローカルプロキシを立てて特定のサイトの場合だけ当該プロキシを経由、プロキシでレスポンスを編集することを考えた。

ローカルプロキシ

GUIを備えたプロキシもあるようだが、導入がお手軽そうだったmitmproxyというのを使ってみた。

インストール

brew install mitmproxy

いったん起動する

mitmproxy

この状態で、プロキシ経由で証明書をダウンロードする

curl -x 127.0.0.1:8080 'http://mitm.it/cert/pem' > /tmp/mitm.pem

証明書をMacのKeyChainに登録し、Trustする。

タグ挿入スクリプト

BeautifulSoupを使うので入れておく。よく分からんがmitmproxy独自のpython仮想環境がある模様。

/usr/local/opt/mitmproxy/libexec/bin/pip install beautifulsoup4

pythonコードを書く。text/html のレスポンスにタグを挿入する。

import os
from bs4 import BeautifulSoup
from mitmproxy import http

class Injector:

    def response(self, flow: http.HTTPFlow) -> None:
        if flow.response.headers.get("content-type") and flow.response.headers.get("content-type").find("text/html") != -1:
            html = BeautifulSoup(flow.response.content, "html.parser")
            if html.body:
                tag = html.new_tag("span", id="mitmproxy", style="color: red;")
                tag.string = '本番サイトです！！！'
                html.body.insert(0, tag)
                flow.response.content = str(html).encode("utf8")
addons = [Injector()]

書いたスクリプトを指定して、起動しておく

mitmdump -s inject_alert.py

Chromeの設定

Chrome extensionをインストールする。 chrome.google.com

proxyの設定

auto switchの設定

最後に、extensionのアイコンから auto switch を選択する。

大成功の図

なんというか、そもそもこんなことをする必要に迫られたくない。

参考サイト

• mitmproxyを使った快適プロキシ生活 - Repro Tech Blog
• macOS 10.14 Mojave 以降で pac ファイルを使って proxy の設定を行いたいけど出来なかった話 - Qiita
• mitmproxy + curl で ssl通信のテスト - Qiita

失敗の科学　失敗から学習する組織、学習できない組織