[web] fix query editing

fix mitmproxy#4565

CHANGELOG.md

@@ -12,7 +12,7 @@
   ([#5465](https://github.com/mitmproxy/mitmproxy/pull/5465), @meitinger, @mhils)
 * Add UDP layer and flow support.
   ([#5414](https://github.com/mitmproxy/mitmproxy/pull/5414), @meitinger)
-* Setting `connection_strategy` to `lazy` now also disables early 
+* Setting `connection_strategy` to `lazy` now also disables early
   upstream connections to fetch TLS certificate details.
   ([#5487](https://github.com/mitmproxy/mitmproxy/pull/5487), @mhils)
 * Fix `tls_version_server_min` and `tls_version_server_max` options.
@@ -22,11 +22,11 @@
 * Update Linux binary builder to Ubuntu 20.04, bumping the minimum glibc version to 2.31. (@jorants)
 * "Save filtered" button in mitmweb.
   ([#5531](https://github.com/mitmproxy/mitmproxy/pull/5531), @rnbwdsh, @mhils)
-* DTLS support. 
+* DTLS support.
   ([#5397](https://github.com/mitmproxy/mitmproxy/pull/5397), @kckeiks).
-* Added Magisk module generation for Android onboarding 
+* Added Magisk module generation for Android onboarding
   ([#5547](https://github.com/mitmproxy/mitmproxy/pull/5547), @jorants).
-* Update Linux binary builder to Ubuntu 20.04, bumping the minimum glibc version to 2.31. 
+* Update Linux binary builder to Ubuntu 20.04, bumping the minimum glibc version to 2.31.
   ([#5547](https://github.com/mitmproxy/mitmproxy/pull/5547), @jorants).
 * Render application/prpc content as gRPC/Protocol Buffers
   ([#5568](https://github.com/mitmproxy/mitmproxy/pull/5568), @selfisekai)
@@ -38,7 +38,7 @@
   ([#5582](https://github.com/mitmproxy/mitmproxy/pull/5582), @mhils)
 * Deprecate `add_log` event hook. Users should use the builtin `logging` module instead.
   ([#5590](https://github.com/mitmproxy/mitmproxy/pull/5590), @mhils)
-* Deprecate `mitmproxy.ctx.log` in favor of Python's builtin `logging` module. 
+* Deprecate `mitmproxy.ctx.log` in favor of Python's builtin `logging` module.
   ([#5590](https://github.com/mitmproxy/mitmproxy/pull/5590), @mhils)
 * Add MQTT content view.
   ([#5588](https://github.com/mitmproxy/mitmproxy/pull/5588), @nikitastupin, @abbbe)
@@ -56,7 +56,8 @@
   ([#5658](https://github.com/mitmproxy/mitmproxy/issues/5658), [#5661](https://github.com/mitmproxy/mitmproxy/issues/5661), @LIU-shuyi, @mhils)
 * Added Docs for Transparent Mode on Windows.
   ([#5402](https://github.com/mitmproxy/mitmproxy/issues/5402), @stephenspol)
-
+* Fix query editing on mitmweb.
+  ([#5574](https://github.com/mitmproxy/mitmproxy/pull/5574), @yesmeck)
 
 ## 28 June 2022: mitmproxy 8.1.1
 
@@ -92,7 +93,7 @@
   ([#4469](https://github.com/mitmproxy/mitmproxy/issues/4469), @mhils)
 * Add flatpak support to the browser addon
   ([#5200](https://github.com/mitmproxy/mitmproxy/issues/5200), @pauloromeira)
-* Add example addon to dump contents to files based on a filter expression 
+* Add example addon to dump contents to files based on a filter expression
   ([#5190](https://github.com/mitmproxy/mitmproxy/issues/5190), @redraw)
 * Fix a bug where the wrong SNI is sent to an upstream HTTPS proxy
   ([#5109](https://github.com/mitmproxy/mitmproxy/issues/5109), @mhils)
@@ -102,14 +103,14 @@
   ([#5217](https://github.com/mitmproxy/mitmproxy/issues/5217), @randomstuff)
 * Improve cut addon to better handle binary contents
   ([#3965](https://github.com/mitmproxy/mitmproxy/issues/3965), @mhils)
-* Fix text truncation for full-width characters 
+* Fix text truncation for full-width characters
   ([#4278](https://github.com/mitmproxy/mitmproxy/issues/4278), @kjy00302)
 * Fix mitmweb export copy failed in non-secure domain.
   ([#5264](https://github.com/mitmproxy/mitmproxy/issues/5264), @Pactortester)
 * Add example script for manipulating cookies.
   ([#5278](https://github.com/mitmproxy/mitmproxy/issues/5278), @WillahScott)
-* When opening an external viewer for message contents, mailcap files are not considered anymore.  
-  This preempts the upcoming deprecation of Python's `mailcap` module. 
+* When opening an external viewer for message contents, mailcap files are not considered anymore.
+  This preempts the upcoming deprecation of Python's `mailcap` module.
   ([#5297](https://github.com/mitmproxy/mitmproxy/issues/5297), @KORraNpl)
 * Fix hostname encoding for IDNA domains in upstream mode.
   ([#5316](https://github.com/mitmproxy/mitmproxy/issues/5316), @nneonneo)
@@ -170,7 +171,7 @@
 * Add ability to specify custom ports with LDAP authentication (#5068, @demonoidvk)
 * Add support for rotating saved streams every hour or day (@EndUser509)
 * Console Improvements on Windows (@mhils)
-* Fix processing of `--set` options (#5067, @marwinxxii) 
+* Fix processing of `--set` options (#5067, @marwinxxii)
 * Lowercase user-added header names and emit a log message to notify the user when using HTTP/2 (#4746, @mhils)
 * Exit early if there are errors on startup (#4544, @mhils)
 * Fixed encoding guessing: only search for meta tags in HTML bodies (##4566, @Prinzhorn)

mitmproxy/tools/web/app.py

@@ -403,6 +403,8 @@ def put(self, flow_id):
                                 request.trailers.add(*trailer)
                         elif k == "content":
                             request.text = v
+                        elif k == "query":
+                            request.query = [tuple(i) for i in v]
                         else:
                             raise APIError(400, f"Unknown update request.{k}: {v}")
 
@@ -484,6 +486,13 @@ def get(self, flow_id, message):
         self.set_header("X-Frame-Options", "DENY")
         self.write(message.get_content(strict=False))
 
+class FlowQuery(RequestHandler):
+    def get(self, flow_id, message):
+        message = getattr(self.flow, message)
+        self.set_header("Content-Type", "application/text")
+        self.set_header("X-Content-Type-Options", "nosniff")
+        self.set_header("X-Frame-Options", "DENY")
+        self.write("\n".join("=".join(field) for field in message.query.fields))
 
 class FlowContentView(RequestHandler):
     def message_to_json(
@@ -674,6 +683,10 @@ def __init__(
                     r"/flows/(?P<flow_id>[0-9a-f\-]+)/(?P<message>request|response|messages)/content.data",
                     FlowContent,
                 ),
+                (
+                    r"/flows/(?P<flow_id>[0-9a-f\-]+)/(?P<message>request|response|messages)/query.data",
+                    FlowQuery,
+                ),
                 (
                     r"/flows/(?P<flow_id>[0-9a-f\-]+)/(?P<message>request|response|messages)/"
                     r"content/(?P<content_view>[0-9a-zA-Z\-\_%]+)(?:\.json)?",

test/mitmproxy/tools/web/test_app.py

@@ -163,6 +163,7 @@ async def make_master() -> webmaster.WebMaster:
         f = tflow.tflow(resp=True)
         f.id = "42"
         f.request.content = b"foo\nbar"
+        f.request.query = [("foo", "1")]
         f2 = tflow.tflow(ws=True, resp=True)
         f2.request.content = None
         f2.response.content = None
@@ -306,13 +307,15 @@ def test_flow_update(self):
         upd = {
             "request": {
                 "trailers": [("foo", "baz")],
+                "query": [("foo", "2")]
             },
             "response": {
                 "trailers": [("foo", "baz")],
             },
         }
         assert self.put_json("/flows/42", upd).code == 200
         assert f.request.trailers["foo"] == "baz"
+        assert f.request.query["foo"] == "2"
 
         f.revert()
 
@@ -390,6 +393,19 @@ def test_flow_content_returns_raw_content_when_decoding_fails(self):
 
         f.revert()
 
+    def test_flow_query(self):
+        f = self.view.get_by_id("42")
+        f.backup()
+
+        f.request.query = (("foo", "1"), ("bar", "2"))
+
+        r = self.fetch("/flows/42/request/query.data")
+
+        assert r.code == 200
+        assert r.body == b"foo=1\nbar=2"
+
+        f.revert()
+
     def test_update_flow_content(self):
         assert (
             self.fetch("/flows/42/request/content.data", method="POST", body="new").code

web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx

@@ -4,7 +4,20 @@ import HttpMessage, {ViewImage} from '../../../components/contentviews/HttpMessa
 import {fireEvent, render, screen, waitFor} from "../../test-utils"
 import fetchMock, {enableFetchMocks} from "jest-fetch-mock";
 
-jest.mock("../../../contrib/CodeMirror")
+jest.mock("../../../contrib/CodeMirror", () => {
+    const React = require("react");
+    return {
+        __esModule: true,
+        default: React.forwardRef((props, ref) => {
+            React.useImperativeHandle(ref, () => ({
+                codeMirror: {
+                    getValue: () => props.value
+                }
+            }));
+            return <div>{props.value}</div>
+        })
+    }
+})
 
 enableFetchMocks();
 
@@ -25,13 +38,19 @@ test("HttpMessage", async () => {
             description: "Raw",
         }),
         "raw content",
+        JSON.stringify({
+            lines: Array(5).fill([["text", "rawdata"]]),
+            description: "Raw",
+        }),
+        "",
         JSON.stringify({
             lines: Array(5).fill([["text", "rawdata"]]),
             description: "Raw",
         })
     );
 
     const tflow = TFlow();
+    tflow.request.method = "POST";
     const {asFragment} = render(<HttpMessage flow={tflow} message={tflow.request}/>);
     await waitFor(() => screen.getAllByText("data"));
     expect(screen.queryByText('additional')).toBeNull();
@@ -50,6 +69,52 @@ test("HttpMessage", async () => {
 
     await waitFor(() => screen.getAllByText("rawdata"));
     expect(asFragment()).toMatchSnapshot();
+
+    fireEvent.click(screen.getByText("Edit"));
+    fireEvent.click(screen.getByText("Done"));
+    await waitFor(() => screen.getAllByText("rawdata"));
+    expect(asFragment()).toMatchSnapshot();
+});
+
+test("HttpMessage edit query string", async () => {
+    const lines = [
+        [
+            ["header", "foo"],
+            ["text", "1"],
+        ],
+        [
+            ["header", "bar"],
+            ["text", "2"],
+        ],
+    ];
+
+    fetchMock.mockResponses(
+        JSON.stringify({
+            lines: lines,
+            description: "Query",
+        }),
+        JSON.stringify({
+            lines,
+            description: "Query",
+        }),
+        "",
+        JSON.stringify({
+            lines,
+            description: "Query",
+        })
+    );
+
+    const tflow = TFlow();
+    tflow.request.path = "/path?foo=1&bar=2";
+    const { asFragment } = render(
+        <HttpMessage flow={tflow} message={tflow.request} />
+    );
+    fireEvent.click(screen.getByText("Edit"));
+    expect(asFragment()).toMatchSnapshot();
+    fireEvent.click(screen.getByText("Done"));
+
+    await waitFor(() => screen.getAllByText("foo"));
+    expect(asFragment()).toMatchSnapshot();
 });
 
 test("ViewImage", async () => {