Detached mode viewer

[cortesi]

We're soon going to have the ability for users to upload a capture to the mitmproxy servers and share it for viewing. To make this scale, I want to be able to host the capture with no server-side support. This means that we'll have an export format that uses summary JSON files and a folder structure that mimics the server-side API of mitmweb, plus a static viewer that can be initialized with a root location. The details here are yet to be finalised - in particular, the static serialization format and upload mechanics are still up in the air - but we need to keep this possibility in mind as we work on the web interface.

A lot of the issues here can be solved by sensibly componentizing things, and making sure that we are mindful of the boundary between active proxy and "viewing only" modes. This will also help the static viewer usecase within mitmweb itself.

[mhils]

Good that you mention it explicitly - I already marked all issues that require an active proxy as such. :smiley:

[mhils]

@MatthewShao will tackle this during his last GSoC weeks 😃. Here's a quick overview of what we need to implement:

• [x] Add <script>MITMWEB_STATIC = true;</script> to index.html
• [x] Add a new backend (next to the WebSocket backend) that is responsible for fetching all resources. So this is like the WebSocket backend, but without waiting for the WebSocket connection.
• [x] Hide all interactive elements. Maybe we can create a <HideInStatic><Button/></HideInStatic> React component for this and use this where it makes sense. We can just use the global MITMWEB_STATIC variable here, no need to pass this down using props etc. At this point, we should already have a working static viewer, which is still powered by a mitmweb instance though.
• [ ] Write a flow -> static files converter (this part needs some more details/refinement)
• [ ] Think about how to best expose this functionality in mitmweb itself. 😃

[MatthewShao]

@mhils I'm afraid we could not simply add <script>MITMWEB_STATIC=ture;</script> to index.html :pensive: , because we have set the Content-Security-Policy here:https://github.com/mitmproxy/mitmproxy/blob/master/mitmproxy/tools/web/app.py#L124-L129, which prevent us from adding in-line scripts.

Correct me if I'm wrong: we want to have a global variable to tell whether the fronend is in static mode, this variable should be controlled by the backend server, for example, we can add a option --static to turn that js var on. One possible solution is that we have two different index template, one for static mode and the other for the normal. The static mode template included one more .js file, maybe called static_var.js, containing all the static mode specified variables. Then we can switch between these two template according to the --static option. Hope that I've made my idea clear, any other ideas are super welcome! :grinning:

[mhils]

I'm afraid we could not simply add to index.html

Good catch. Let's do what you proposed, just create a static.js file that contains MITMWEB_STATIC=true; and include that. :)

we want to have a global variable to tell whether the fronend is in static mode

Exactly.

his variable should be controlled by the backend server, for example, we can add a option --static to turn that js var on.

I'm not sure if I'm following you here. In normal mitmweb operation mode, we never want this to be set. This should only be added by our flow -> static converter. For testing/development, we may of course want to include it in the template.

Does that make sense? :)

[MatthewShao]

@mhils, so before we have the flow->static converter implementation, what should we do to turn the MITMWEB_STATIC variable on and off? or do we need to finish the converter before we start the frontend jobs?

[mhils]

We only need to turn it on for development, so we can just add static.js and include it in index.html 😃