Move mitmweb to Vite (mitmproxy#7971)

* Partially Revert "Web: harden `xsrf_token` usage (mitmproxy#7491)"

This reverts commit b761cb4.

The reason for this revert is that it's incompatible with Vite's
server (mitmproxy#7969).

We keep the parts that are compatible, and add an additional
`Sec-Fetch-Site` check for for all requests.

* use type imports for Vite compatibility

* make flow columns work with function name minification

* make modals work with function name minification

* vite: move assets

* web: switch builds to vite

* move to vite

* vite: move css and js

* update CHANGELOG

* [autofix.ci] apply automated fixes

* fix test failures

* fix static viewer

* obtain xsrf cookie lazily

* split js/css bundles into app/vendor

* [autofix.ci] apply automated fixes

* update compiled assets

* fix nits

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: mhils

CHANGELOG.md

@@ -13,9 +13,11 @@
 from collections.abc import Sequence
 from io import BytesIO
 from typing import Any
+from typing import Awaitable
 from typing import ClassVar
 from typing import Concatenate
 from typing import Literal
+from typing import Optional
 
 import tornado.escape
 import tornado.web
@@ -35,7 +37,6 @@
 from mitmproxy import version
 from mitmproxy.dns import DNSFlow
 from mitmproxy.http import HTTPFlow
-from mitmproxy.net.http import status_codes
 from mitmproxy.tcp import TCPFlow
 from mitmproxy.tcp import TCPMessage
 from mitmproxy.tools.web.webaddons import WebAuth
@@ -274,6 +275,14 @@ def get_current_user(self) -> bool:
 class RequestHandler(AuthRequestHandler):
     application: Application
 
+    def prepare(self):
+        if (
+            self.request.method not in ("GET", "HEAD", "OPTIONS")
+            and "Sec-Fetch-Site" in self.request.headers
+            and self.request.headers["Sec-Fetch-Site"] not in ("same-origin", "none")
+        ):
+            raise tornado.httpclient.HTTPError(403)
+
     def write(self, chunk: str | bytes | dict | list):
         # Writing arrays on the top level is ok nowadays.
         # http://flask.pocoo.org/docs/0.11/security/#json-security
@@ -292,6 +301,7 @@ def set_default_headers(self):
             "Content-Security-Policy",
             "default-src 'self'; "
             "connect-src 'self' ws:; "
+            "img-src 'self' data:; "
             "style-src   'self' 'unsafe-inline'",
         )
 
@@ -343,25 +353,11 @@ def write_error(self, status_code: int, **kwargs):
 
 
 class IndexHandler(RequestHandler):
-    def _is_fetch_mode_navigate(self) -> bool:
-        # Forbid access for non-navigate fetch modes so that they can't obtain xsrf_token.
-        return self.request.headers.get("Sec-Fetch-Mode", "navigate") == "navigate"
-
     def auth_fail(self, invalid_password: bool) -> None:
-        # For mitmweb, we only write a login form for IndexHandler,
-        # which has additional Sec-Fetch-Mode protections.
-        if self._is_fetch_mode_navigate():
-            self.render("login.html", invalid_password=invalid_password)
+        self.render("login.html", invalid_password=invalid_password)
 
     def get(self):
-        # Forbid access for non-navigate fetch modes so that they can't obtain xsrf_token.
-        if self._is_fetch_mode_navigate():
-            self.render("index.html", xsrf_token=self.xsrf_token)
-        else:
-            raise APIError(
-                status_codes.PRECONDITION_FAILED,
-                f"Unexpected Sec-Fetch-Mode header: {self.request.headers.get('Sec-Fetch-Mode')}",
-            )
+        self.render("../index.html")
 
     post = get  # login form
 
@@ -378,6 +374,11 @@ class WebSocketEventBroadcaster(tornado.websocket.WebSocketHandler, AuthRequestH
     _send_queue: asyncio.Queue[bytes]
     _send_task: asyncio.Task[None]
 
+    def prepare(self) -> Optional[Awaitable[None]]:
+        token = self.xsrf_token  # https://github.com/tornadoweb/tornado/issues/645
+        assert token
+        return None
+
     def open(self, *args, **kwargs):
         self.connections.add(self)
         self._send_queue = asyncio.Queue()
@@ -918,11 +919,12 @@ def __init__(
             template_path=os.path.join(os.path.dirname(__file__), "templates"),
             static_path=os.path.join(os.path.dirname(__file__), "static"),
             xsrf_cookies=True,
-            xsrf_cookie_kwargs=dict(httponly=True, samesite="Strict"),
+            xsrf_cookie_kwargs=dict(samesite="Strict"),
             cookie_secret=secrets.token_bytes(32),
             debug=debug,
             autoreload=False,
             transforms=[GZipContentAndFlowFiles],
             is_valid_password=auth_addon.is_valid_password,
             auth_cookie_name=auth_addon.auth_cookie_name,
+            compiled_template_cache=False,  # Vite
         )

mitmproxy/tools/web/app.py

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>mitmproxy</title>
+        <link rel="icon" href="static/favicon.ico" type="image/x-icon" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <script type="module" crossorigin src="./static/index-B67aJAE2.js"></script>
+      <link rel="modulepreload" crossorigin href="./static/vendor-BS4xPthR.js">
+      <link rel="stylesheet" crossorigin href="./static/vendor-Cg3S-P9H.css">
+      <link rel="stylesheet" crossorigin href="./static/index-DhPPoJ7G.css">
+    </head>
+    <body>
+        <div id="mitmproxy"></div>
+    </body>
+</html>