diff --git a/CHANGELOG.md b/CHANGELOG.md index 352f935ed..7bc986e2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ ## Unreleased: mitmproxy next +- mitmweb: Fix AVIF images and `image/vnd.microsoft.icon` favicons not rendering in the response tab. + ([#8232](https://github.com/mitmproxy/mitmproxy/pull/8232), @ariel42) ## 12 May 2026: mitmproxy 12.2.3 diff --git a/web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx b/web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx index 473d4f170..09773088b 100644 --- a/web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx +++ b/web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx @@ -101,6 +101,27 @@ test("ViewImage", async () => { expect(asFragment()).toMatchSnapshot(); }); +test("ViewImage.matches", () => { + const flow = TFlow(); + const matches = (contentType: string) => { + flow.response.headers = [["Content-Type", contentType]]; + return ViewImage.matches(flow.response); + }; + expect(matches("image/png")).toBe(true); + expect(matches("image/jpeg")).toBe(true); + expect(matches("image/jpg")).toBe(true); + expect(matches("image/gif")).toBe(true); + expect(matches("image/webp")).toBe(true); + expect(matches("image/avif")).toBe(true); + expect(matches("image/svg+xml")).toBe(true); + expect(matches("image/vnd.microsoft.icon")).toBe(true); + expect(matches("image/x-icon")).toBe(true); + expect(matches("IMAGE/AVIF")).toBe(true); + expect(matches("image/heic")).toBe(false); + expect(matches("application/json")).toBe(false); + expect(matches("video/mp4")).toBe(false); +}); + /* This test differs from the one above because clicking the copy button triggers 'handleClickCopyButton'. In the previous test, the response contained "raw content," which caused an "invalid JSON response body" error diff --git a/web/src/js/components/contentviews/HttpMessage.tsx b/web/src/js/components/contentviews/HttpMessage.tsx index 95db7d447..373a3a823 100644 --- a/web/src/js/components/contentviews/HttpMessage.tsx +++ b/web/src/js/components/contentviews/HttpMessage.tsx @@ -228,7 +228,7 @@ function CopyButton({ flow, message }: CopyButtonProps) { } const isImage = - /^image\/(png|jpe?g|gif|webp|vnc.microsoft.icon|x-icon|svg\+xml)$/i; + /^image\/(png|jpe?g|gif|webp|avif|vnd\.microsoft\.icon|x-icon|svg\+xml)$/i; ViewImage.matches = (msg) => isImage.test(MessageUtils.getContentType(msg) || "");