能否为Mitmweb设置主题、修改页面标题或外观以区分不同代理接口？

mitmproxy 6.0.2版本没有原生支持修改web界面外观、自定义头部标识的配置项，你可以通过以下两种适配容器部署场景的方案实现需求：

方案一：挂载修改后的静态HTML文件（无需额外脚本，稳定性高） #

6.0.2版本官方容器中mitmweb的静态首页默认路径为 /usr/local/lib/python3.9/site-packages/mitmproxy/tools/web/static/index.html，如果路径不对可以进入容器执行 find / -name "index.html" | grep mitmweb 查找。

• 针对入向流量实例，修改index.html的两处内容：
  1. 修改<title>标签内容为 <title>mitmweb - 入向流量</title>，方便浏览器标签页直接区分
  2. 在<body>标签开头插入提示条代码，同时给body加顶部内边距避免遮挡原有内容：

  <div style="position: fixed; top: 0; left: 0; right: 0; height: 30px; background: #dc3545; color: white; line-height: 30px; padding-left: 20px; z-index: 99999; font-weight: bold;">当前：入向流量抓取接口</div>
  <style>body { padding-top: 30px !important; }</style>
  

• 针对出向流量实例，同理修改index.html，将提示条背景色改为#0d6efd，文字改为「当前：出向流量抓取接口」，title改为<title>mitmweb - 出向流量</title>
• 启动两个容器时，分别将修改后的对应index.html作为挂载卷覆盖容器内的原始文件即可，无需重新构建镜像。

方案二：注入自定义脚本实现修改（无需修改静态文件，灵活度高） #

你可以编写mitmproxy事件脚本，在mitmweb页面返回时自动注入自定义标识和样式，操作步骤如下：

1. 分别给入向、出向实例编写专属的注入脚本，比如出向实例的脚本custom_outbound.py内容如下：

from mitmproxy import http

def response(flow: http.HTTPFlow) -> None:
    # 仅匹配mitmweb自身的页面请求
    if flow.request.path == "/" and "text/html" in flow.response.headers.get("Content-Type", ""):
        # 自定义标识代码，入向实例可修改颜色和文字
        custom_content = """
        <div style="position: fixed; top: 0; left: 0; right: 0; height: 30px; background: #28a745; color: white; line-height: 30px; padding-left: 20px; z-index: 99999; font-weight: bold;">当前：出向流量抓取接口</div>
        <style>body { padding-top: 30px !important; }</style>
        """
        # 插入自定义标识
        flow.response.content = flow.response.content.replace(b"<body>", b"<body>" + custom_content.encode())
        # 修改页面标题
        flow.response.content = flow.response.content.replace(b"<title>mitmweb</title>", b"<title>mitmweb - 出向流量</title>")

2. 启动mitmweb时添加-s custom_outbound.py参数加载脚本即可，容器部署时将脚本挂载到容器内指定路径加载即可。

可选扩展 #

如果需要更高的区分度，你可以调整自定义样式给整个页面添加不同的浅色调背景、修改导航栏配色等，完全满足快速识别的需求。

内容的提问来源于stack exchange，提问作者stellarpower