[web] fix query editing

fix mitmproxy#4565
yesmeck · Sep 9, 2022 · f7e7968 · f7e7968
1 parent 57c71ea
commit f7e7968
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,8 @@
   ([#5548](https://github.com/mitmproxy/mitmproxy/pull/5548), @sanlengjingvv)
 * Fix a mitmweb crash when scrolling down the flow list.
   ([#5507](https://github.com/mitmproxy/mitmproxy/pull/5507), @LIU-shuyi)
+* Fix query editing on mitmweb.
+  ([#5574](https://github.com/mitmproxy/mitmproxy/pull/5574), @yesmeck)
 
 ## 28 June 2022: mitmproxy 8.1.1
 

diff --git a/mitmproxy/tools/web/app.py b/mitmproxy/tools/web/app.py
@@ -392,6 +392,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}")
 

diff --git a/test/mitmproxy/tools/web/test_app.py b/test/mitmproxy/tools/web/test_app.py
@@ -162,6 +162,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
@@ -296,13 +297,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()
 

diff --git a/web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx b/web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx
@@ -4,7 +4,15 @@ 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) => {
+            return <div>{props.value}</div>
+        })
+    }
+})
 
 enableFetchMocks();
 
@@ -32,6 +40,7 @@ test("HttpMessage", async () => {
     );
 
     const tflow = TFlow();
+    tflow.request.path = "/path?foo=1&bar=2";
     const {asFragment} = render(<HttpMessage flow={tflow} message={tflow.request}/>);
     await waitFor(() => screen.getAllByText("data"));
     expect(screen.queryByText('additional')).toBeNull();
@@ -46,7 +55,7 @@ test("HttpMessage", async () => {
 
     fireEvent.click(screen.getByText("Edit"));
     expect(asFragment()).toMatchSnapshot();
-    fireEvent.click(screen.getByText("Cancel"));
+    fireEvent.click(screen.getByText("Done"));
 
     await waitFor(() => screen.getAllByText("rawdata"));
     expect(asFragment()).toMatchSnapshot();

diff --git a/web/src/js/__tests__/components/contentviews/__snapshots__/HttpMessageSpec.tsx.snap b/web/src/js/__tests__/components/contentviews/__snapshots__/HttpMessageSpec.tsx.snap
@@ -126,7 +126,12 @@ exports[`HttpMessage 2`] = `
     </div>
     <div
       class="codeeditor"
-    />
+    >
+      <div>
+        foo=1
+bar=2
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -140,7 +145,7 @@ exports[`HttpMessage 3`] = `
       class="controls"
     >
       <h5>
-        Raw
+        Loading...
       </h5>
       <button
         class="btn-xs btn btn-default"
@@ -185,43 +190,6 @@ exports[`HttpMessage 3`] = `
         </span>
       </a>
     </div>
-    <pre>
-      <div>
-        <span
-          class="text"
-        >
-          rawdata
-        </span>
-      </div>
-      <div>
-        <span
-          class="text"
-        >
-          rawdata
-        </span>
-      </div>
-      <div>
-        <span
-          class="text"
-        >
-          rawdata
-        </span>
-      </div>
-      <div>
-        <span
-          class="text"
-        >
-          rawdata
-        </span>
-      </div>
-      <div>
-        <span
-          class="text"
-        >
-          rawdata
-        </span>
-      </div>
-    </pre>
   </div>
 </DocumentFragment>
 `;

diff --git a/web/src/js/components/contentviews/HttpMessage.tsx b/web/src/js/components/contentviews/HttpMessage.tsx
@@ -32,7 +32,13 @@ export default function HttpMessage({flow, message}: HttpMessageProps) {
     } else {
         url = MessageUtils.getContentURL(flow, message, contentView, maxLines + 1);
     }
-    const content = useContent(url, message.contentHash);
+    let content = useContent(url, message.contentHash);
+    if (flow.request.method === "GET" && edit) {
+         const params = new URLSearchParams(new URL(`${flow.request.scheme}://${flow.request.host}/${flow.request.path}`).search);
+         content = Array.from(params.entries())
+             .reduce((acc, [key, value]) => [...acc, `${key}=${value}`], [])
+             .join("\n");
+    }
     const contentViewData = useMemo<ContentViewData | undefined>(() => {
         if (content && !edit) {
             try {
@@ -48,8 +54,14 @@ export default function HttpMessage({flow, message}: HttpMessageProps) {
 
     if (edit) {
         const save = async () => {
-            const content = editorRef.current?.getContent();
-            await dispatch(flowActions.update(flow, {[part]: {content}}));
+            let content = editorRef.current?.getContent();
+            await dispatch(flowActions.update(flow, {
+                 [part]: flow.request.method === 'GET' ? {
+                     query: content?.split("\n").map(item => item.split('='))
+                 }: {
+                     content
+                 }
+            }));
             setEdit(false);
         }
         return (