14

If you get JSON data from Instagram's API you will find a media_preview key, the value of which is some Base64-encoded data. It really looks like some very small preview binary data. Maybe compressed.

Take this post for example. It's just a black square and its preview is very small. Its JSON contains data['graphql']['media_preview'] = "ACoq5miiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z"

I could not reverse the code and find out how Instagram uses this data. What should I do to create a preview from this data?

I am not good at understanding minified js, but I think it draws blurred preview for "sensitive content" on a dynamically created canvas.

Here is a post with some sensitive content (medical) as an example

Update: I've noticed that b64decoded data always starts with 00 2A 2A and ends with FF D9.

1 Answer 1

12
+50

I've debugged a few lines of code and compiled this function for you. media_preview part of data is so small because full jpeg header already available in code as jpegtpl in my example:

function ig_media_preview(base64data) {
	var jpegtpl = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
		t = atob(base64data),
		p = t.slice(3).split(""),
		o = t.substring(0, 3).split("").map(function(e) {
			return e.charCodeAt(0)
		}),
		c = atob(jpegtpl).split("");
	c[162] = String.fromCharCode(o[1]);
	c[160] = String.fromCharCode(o[2]);
	return base64data ? "data:image/jpeg;base64," + btoa(c.concat(p).join("")) : null
};
      
var data = "ACoq5miiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z";
var uri = ig_media_preview(data);
document.body.insertAdjacentHTML('beforeend', '<img src="' + uri + '">');

3
  • Try this: instagram.com/p/BgwalephZYo -> "ACoqg2t2br70wlv72aVYysgfaWUDHBz2x0qBrd9+4DjOfwzWXKVced1HWm8gnceT04pykA/WhpoLlmNKsbRVMOyhicf7OOv41B5z+ppJXKuIEB4q3b2m5sMO2cdM1TVhxuyOc5FakdqBh4mZTjhmOR+uP0rSUraBCKerKlzAI8OnRuMHqD/hVIsVx61cknlUlZCHB9Oh+npVPC9eefenG7VmTO19CxFI3JJ57cUwqD2/nUe/PC4o2vTUbbk83YkRWLY7eh6D3qzLKIh5a4b1I/zxVZjyfwqGPp+NDjd+Q1Jone4Z+AABTAoA9D+n0/zxSilrSxIhXPB4pm0VNn5B+NMpLULH/9k=" -- it makes damaged jpeg Apr 13, 2018 at 17:12
  • @AlexanderChzhen Looks like you missed c[162] and c[160] manipulation in your python example, correct me if I'm wrong.
    – 350D
    Apr 13, 2018 at 17:28
  • 1
    yes it seems like header[160] = data[2] and header[162] = data[1]. data[0] is useless. So final data is header + data[3:] Apr 14, 2018 at 6:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.