reconstruct PNG from HAR file in Chrome

Question

I was looking through HAR files, which Chrome uses to record browsing sessions. It was made with WebInspector.

for my session and I wondered what it with with image files. Apparently it downloads them as text... I see one PNG recorded as:

"content": {
            "size": 633,
            "mimeType": "image/png",
            "compression": 0,
            "text": "iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAwFBMVEUAAAD//vn/6qj/8cX/4nv/4Gj/3Fb/2Ub/+/H/+OP/5oz0nnjxg1DthDn9wxf+zA3/ywL+yAn/89LoYkjiUzzeWif+7sj8yWvaQS7wtpj9ylf1uSr/1Tj+zjz+yUn90Ibrdz/9viT+2WL/0yz8v1bTMR7mehLEuVhUruWdsJv1rQjnwStiuOtlx/9Vwv9Jvv9uyv//0Rn/7riEv8o/u/+zuXhZtetnrMs9wf9x0f9SuPib2vnM7f/y+v/4z3h61P9T93Q2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADjSURBVBjTLdDtcoIwEEBRDAmB1AYiWlCCLVBE/EgUsRW18v5v1Q26P8/c3ZnEsqwRQjYmDqXUca3neAy/jd+5HwTCHmDkTfA4DKczAcQ+TIcYi0Cm8XxixgNiGC+A4jiRMl0uPg0RQr9AZrDHsyR6kpOHEBVFmi6/TUUkLei8XEFUrdd1DeQU1HdQuQnEdrdX+gBEj9Jv8lIIkZxeRChpkL8RnGcnpVpDDUK5qHZnntQ/Srd7c+so4crhXP0qpfSlA3JtxOHK9Qqgb/e/4ZV2ltWm0O3l/voJ9xE9bn3fd103NP/JehnXpgX3BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wMy0xNFQxNTo0MTo0OS0wNTowMIuGhf0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMTItMjJUMTM6NDI6NDctMDY6MDBvXc3SAAAAAElFTkSuQmCC"
          }

I would like to see the PNG file, so I typed nano test.png and saved the text to a file, starting with iVBOR... When I opened the image with Chrome I got a broken picture - actually nothing.

Are there any additional steps to reconstructing the PNG file this way?

According to the same file, the original url is https://i.stack.imgur.com/XDJKz.png and the image should be

score 3 · Answer 1 · answered Nov 05 '14 at 19:47

The text part is the image data encoded with Base64.

If you just want to see it in a browser rather than using the method shown by Alexander O'Mara to actually convert it to a png file, you can just copy the text and use the data URI scheme like this:

<html><head><title></title></head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAwFBMVEUAAAD//vn/6qj/8cX/4nv/4Gj/3Fb/2Ub/+/H/+OP/5oz0nnjxg1DthDn9wxf+zA3/ywL+yAn/89LoYkjiUzzeWif+7sj8yWvaQS7wtpj9ylf1uSr/1Tj+zjz+yUn90Ibrdz/9viT+2WL/0yz8v1bTMR7mehLEuVhUruWdsJv1rQjnwStiuOtlx/9Vwv9Jvv9uyv//0Rn/7riEv8o/u/+zuXhZtetnrMs9wf9x0f9SuPib2vnM7f/y+v/4z3h61P9T93Q2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADjSURBVBjTLdDtcoIwEEBRDAmB1AYiWlCCLVBE/EgUsRW18v5v1Q26P8/c3ZnEsqwRQjYmDqXUca3neAy/jd+5HwTCHmDkTfA4DKczAcQ+TIcYi0Cm8XxixgNiGC+A4jiRMl0uPg0RQr9AZrDHsyR6kpOHEBVFmi6/TUUkLei8XEFUrdd1DeQU1HdQuQnEdrdX+gBEj9Jv8lIIkZxeRChpkL8RnGcnpVpDDUK5qHZnntQ/Srd7c+so4crhXP0qpfSlA3JtxOHK9Qqgb/e/4ZV2ltWm0O3l/voJ9xE9bn3fd103NP/JehnXpgX3BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wMy0xNFQxNTo0MTo0OS0wNTowMIuGhf0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMTItMjJUMTM6NDI6NDctMDY6MDBvXc3SAAAAAElFTkSuQmCC" alt="">
</body>
</html>

score 1 · Answer 2 · answered Nov 05 '14 at 19:41

The text string is the image Base64 encoded. If you put the contents of the string in a text file like so.

text.txt

iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAwFBMVEUAAAD//vn/6qj/8cX/4nv/4Gj/3Fb/2Ub/+/H/+OP/5oz0nnjxg1DthDn9wxf+zA3/ywL+yAn/89LoYkjiUzzeWif+7sj8yWvaQS7wtpj9ylf1uSr/1Tj+zjz+yUn90Ibrdz/9viT+2WL/0yz8v1bTMR7mehLEuVhUruWdsJv1rQjnwStiuOtlx/9Vwv9Jvv9uyv//0Rn/7riEv8o/u/+zuXhZtetnrMs9wf9x0f9SuPib2vnM7f/y+v/4z3h61P9T93Q2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADjSURBVBjTLdDtcoIwEEBRDAmB1AYiWlCCLVBE/EgUsRW18v5v1Q26P8/c3ZnEsqwRQjYmDqXUca3neAy/jd+5HwTCHmDkTfA4DKczAcQ+TIcYi0Cm8XxixgNiGC+A4jiRMl0uPg0RQr9AZrDHsyR6kpOHEBVFmi6/TUUkLei8XEFUrdd1DeQU1HdQuQnEdrdX+gBEj9Jv8lIIkZxeRChpkL8RnGcnpVpDDUK5qHZnntQ/Srd7c+so4crhXP0qpfSlA3JtxOHK9Qqgb/e/4ZV2ltWm0O3l/voJ9xE9bn3fd103NP/JehnXpgX3BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wMy0xNFQxNTo0MTo0OS0wNTowMIuGhf0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMTItMjJUMTM6NDI6NDctMDY6MDBvXc3SAAAAAElFTkSuQmCC

You can decoded it from the command line like so.

base64 -D text.txt > decoded.png

The decoded PNG is identical to the one you linked to.

reconstruct PNG from HAR file in Chrome

2 Answers2