Debugging image payloads with Charles Proxy.

Today, I tested that my app works properly and after few UI checks, I needed to go deeper and ensure that the data were transmitted to the server I was exchanging with.

To do so, I use Charles Proxy which seems to me the most viable option. I started to debug and everything seemed to work fine until I wanted to ensure that the new profile picture I was sending was the one I expected. Here is what it was looking like:

So no image to see so no way to know what picture I was actually sending. But I’m stubborn as a mule when it comes to coding and I WANTED TO SEE MY PICTURE!

So I looked at many options by using the HTTP Trace of the request but I was unable to reconstruct the picture from it (at least by using some text editors).

Here is what it looks like if you put a Multipart Curl Request with a binary file in a text editor:

 — _CghIRYjp1IiXsD4Y5F5K8gZFEOxJL
Content-Disposition: form-data; name=\”profilePicture\”; filename=\”Image1502369158250–1507933801.jpeg\”
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary
�����JFIF���������C�
 %# , #&’)*)-0-(0%()(���C
(((((((((((((((((((((((((((((((((((((((((((((((((((������\”��������������
 �������}�!1AQa\”q2���#B��R��$3br�
%&’()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�����������������������������������������������������������������������������������
 ������w�!1AQaq\”2�B���� #3R�br�

So you obviously understand that I cannot really say what the picture is about…

But after few hours (yes hours, I’m stubborn), I went to the conclusion that text editors are totally overrated and that binary editors are way better!

I downloaded this nice, fast and small binary editor and started to look at what a JPG actually is. So I went on Wikipedia and saw this table:

I went then back to my good old Charles Proxy and tried to find a 0xFF0xD8 and a 0xFF0xD9 (theoretically the start and end of a JPEG). And they were here!

Then I just had to open my HTTP Trace in the Hex Editor and remove everything that was not contained between 0xFF0xD8 and 0xFF0xD9, save it as a JPG and Voilà!