Added support for ~b, ~bq, and ~bs filters in mitmweb.

CHANGELOG.md

@@ -19,6 +19,9 @@
   ([#4860](https://github.com/mitmproxy/mitmproxy/pull/4860), @Speedlulu)
 * Enhance documentation and add alert log messages when stream_large_bodies and modify_body are set
   ([#6514](https://github.com/mitmproxy/mitmproxy/pull/6514), @rosydawn6)
+* Added support for `~b`, `~bq`, and `~bs` filters in `mitmweb`.
+  ([#6538](https://github.com/mitmproxy/mitmproxy/pull/6538), @dsphper)
+
 
 
 ## 14 November 2023: mitmproxy 10.1.5

mitmproxy/tools/web/app.py

@@ -354,6 +354,24 @@ async def post(self):
         bio.close()
 
 
+class FilterFlows(RequestHandler):
+    def get(self) -> None:
+        self.set_header("Content-Type", "application/json")
+
+        def get_matched_ids(match):
+            return [f.id for f in self.view if match(f)]
+
+        try:
+            match = flowfilter.parse(self.request.arguments["filter"][0].decode())
+            matched_ids = get_matched_ids(match)
+        except (ValueError, KeyError, IndexError):
+            matched_ids = []  # return empty list if error occurs
+
+        self.set_status(200)
+        # Write the list of incrIds to the response
+        self.write(json.dumps(matched_ids))
+
+
 class ClearAll(RequestHandler):
     def post(self):
         self.view.clear()
@@ -685,6 +703,7 @@ def __init__(
                 (r"/events(?:\.json)?", Events),
                 (r"/flows(?:\.json)?", Flows),
                 (r"/flows/dump", DumpFlows),
+                (r"/flows/filter", FilterFlows),
                 (r"/flows/resume", ResumeFlows),
                 (r"/flows/kill", KillFlows),
                 (r"/flows/(?P<flow_id>[0-9a-f\-]+)", FlowHandler),

test/mitmproxy/tools/web/test_app.py

@@ -241,6 +241,14 @@ def test_flows_dump_filter_error(self):
         resp = self.fetch("/flows/dump?filter=[")
         assert resp.code == 400
 
+    def test_flows_filter(self):
+        resp = self.fetch("/flows/filter?filter=foo")
+        assert b"[]" == resp.body
+
+    def test_flows_filter_error(self):
+        resp = self.fetch("/flows/filter?filter=~b")
+        assert b"[]" == resp.body
+
     def test_clear(self):
         events = self.events.data.copy()
         flows = list(self.view)

web/src/js/__tests__/components/Header/FilterInputSpec.tsx

@@ -4,6 +4,10 @@ import FilterInput from "../../../components/Header/FilterInput";
 import FilterDocs from "../../../components/Header/FilterDocs";
 import TestUtil from "react-dom/test-utils";
 import ReactDOM from "react-dom";
+import { fetchApi } from "../../../utils";
+import fetchMock, { enableFetchMocks } from "jest-fetch-mock";
+
+enableFetchMocks();
 
 describe("FilterInput Component", () => {
     it("should render correctly", () => {
@@ -106,4 +110,18 @@ describe("FilterInput Component", () => {
         filterInput.select();
         expect(input.select).toBeCalled();
     });
+
+    it("should handle fetchFilterData", async () => {
+        expect(filterInput.fetchFilterData("~bs ")).toEqual(
+            Promise.resolve({})
+        );
+    });
+
+    it("should handle change2", () => {
+        fetchMock.mockOnceIf("/flows/filter?filter=~b%20x", "[]");
+        fetchMock.mockResponses("{}");
+        let mockEvent = { target: { value: "~b x" } };
+        filterInput.onChange(mockEvent);
+        expect(filterInput.state.value).toEqual("~b x");
+    });
 });

web/src/js/components/Header/FilterInput.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import classnames from "classnames";
 import Filt from "../../filt/filt";
 import FilterDocs from "./FilterDocs";
+import { fetchApi } from "../../utils";
 
 type FilterInputProps = {
     type: string;
@@ -71,13 +72,39 @@ export default class FilterInput extends Component<
         }
     }
 
+    fetchFilterData(filterParam) {
+        return fetchApi(
+            `/flows/filter?filter=${encodeURIComponent(filterParam)}`
+        )
+            .then((response) => {
+                return response.json();
+            })
+            .catch((error) => {});
+    }
+
     onChange(e) {
         const value = e.target.value;
         this.setState({ value });
-
-        // Only propagate valid filters upwards.
-        if (this.isValid(value)) {
-            this.props.onChange(value);
+        // Check if input starts with "~bs", "~b" or "~bq" and has more characters after it
+        if (
+            value.includes("~bs ") ||
+            value.includes("~b ") ||
+            value.includes("~bq ")
+        ) {
+            // Use the new fetchFilterData function
+            this.fetchFilterData(value).then((data) => {
+                // @ts-ignore
+                window.filtFilterList = data;
+                // Only propagate valid filters upwards.
+                if (this.isValid(value)) {
+                    this.props.onChange(value);
+                }
+            });
+        } else {
+            // Only propagate valid filters upwards.
+            if (this.isValid(value)) {
+                this.props.onChange(value);
+            }
         }
     }
 
@@ -119,6 +146,12 @@ export default class FilterInput extends Component<
         ReactDOM.findDOMNode(this.refs.input).select();
     }
 
+    componentDidMount() {
+        if (this.state.value) {
+            this.onChange({ target: { value: this.state.value } });
+        }
+    }
+
     render() {
         const { type, color, placeholder } = this.props;
         const { value, focus, mousefocus } = this.state;

web/src/js/filt/filt.js

@@ -2077,34 +2077,42 @@ export default (function() {
         return false;
     }
     assetFilter.desc = "is asset";
-
     // ~b
     function body(regex){
         regex = new RegExp(regex, "i");
         function bodyFilter(flow){
-            return true;
+            if (window.filtFilterList && window.filtFilterList.includes(flow.id)) {
+                return true
+            }
+            return false;
         }
-        bodyFilter.desc = "body filters are not implemented yet, see https://github.com/mitmproxy/mitmproxy/issues/3609";
+        bodyFilter.desc = "body filters " + regex;
         return bodyFilter;
     }
 
     // ~bq
     function requestBody(regex){
         regex = new RegExp(regex, "i");
         function requestBodyFilter(flow){
-            return true;
+            if (window.filtFilterList && window.filtFilterList.includes(flow.id)) {
+                return true
+            }
+            return false;
         }
-        requestBodyFilter.desc = "body filters are not implemented yet, see https://github.com/mitmproxy/mitmproxy/issues/3609";
+        requestBodyFilter.desc = "request body filters " + regex;
         return requestBodyFilter;
     }
 
     // ~bs
     function responseBody(regex){
         regex = new RegExp(regex, "i");
         function responseBodyFilter(flow){
-            return true;
+            if (window.filtFilterList && window.filtFilterList.includes(flow.id)) {
+                return true
+            }
+            return false;
         }
-        responseBodyFilter.desc = "body filters are not implemented yet, see https://github.com/mitmproxy/mitmproxy/issues/3609";
+        responseBodyFilter.desc = "response body filters " + regex;
         return responseBodyFilter;
     }
 

web/src/js/filt/filt.peg

@@ -62,34 +62,42 @@ function assetFilter(flow) {
     return false;
 }
 assetFilter.desc = "is asset";
-
 // ~b
 function body(regex){
     regex = new RegExp(regex, "i");
     function bodyFilter(flow){
-        return true;
+        if (window.filtFilterList && window.filtFilterList.includes(flow.id)) {
+            return true
+        }
+        return false;
     }
-    bodyFilter.desc = "body filters are not implemented yet, see https://github.com/mitmproxy/mitmproxy/issues/3609";
+    bodyFilter.desc = "body filters " + regex;
     return bodyFilter;
 }
 
 // ~bq
 function requestBody(regex){
     regex = new RegExp(regex, "i");
     function requestBodyFilter(flow){
-        return true;
+        if (window.filtFilterList && window.filtFilterList.includes(flow.id)) {
+            return true
+        }
+        return false;
     }
-    requestBodyFilter.desc = "body filters are not implemented yet, see https://github.com/mitmproxy/mitmproxy/issues/3609";
+    requestBodyFilter.desc = "request body filters " + regex;
     return requestBodyFilter;
 }
 
 // ~bs
 function responseBody(regex){
     regex = new RegExp(regex, "i");
     function responseBodyFilter(flow){
-        return true;
+        if (window.filtFilterList && window.filtFilterList.includes(flow.id)) {
+            return true
+        }
+        return false;
     }
-    responseBodyFilter.desc = "body filters are not implemented yet, see https://github.com/mitmproxy/mitmproxy/issues/3609";
+    responseBodyFilter.desc = "response body filters " + regex;
     return responseBodyFilter;
 }