mitmproxyでサイトにjsを埋め込む

概要

ウェブサイトにjsを埋め込んだときに、他のJavaScriptと競合したり、
埋め込んだjsが適切に挙動をするかというのを本番に入れる前に検証する必要がある。
そういうときに行うMITMクライアントとして、mitmproxyが良かった、という話

インストール

brewでサクッと手に入る

brew install mitmproxy

端末の設定

iPhoneの場合は、
1. 端末でのproxyの設定をする。
2. 証明書をインストールする。

ということが必要になる。
詳細は以下を見て欲しい
https://qiita.com/yimajo/items/c67cb711851f747c35e5

mitmproxyにフックさせるscriptの用意

概要

基本としては
- request(flow) リクエストにフックする関数
- response(flow) レスポンスにフックする関数

という形になる。
versionが上がって、ネット上のサンプルコードはほぼ動かないので、以下の公式のサンプル集を見ながら試すのがいい。

実際に書いて見ると

簡単にscriptタグを挿入するスクリプトは以下のようになった

hook.py

from bs4 import BeautifulSoup
from mitmproxy import ctx, http

def response(flow: http.HTTPFlow) -> None:
    html = BeautifulSoup(flow.response.content, "html.parser", from_encoding="utf8")
    if html.body:
        script_tag = html.new_tag("script", type="text/javascript")
        script_tag.string = "alert('okok');"

        html.head.insert(1, script_tag)
        flow.response.content = str(html).encode("utf8")

結果

実際に動かして、挙動を見てみる

mitmproxy -p 8080 -s hook.py --anticache

でGoogleにアクセスすると

一方、mitmproxyの方は、以下のように動いてるのがわかる

結論

便利