2

Every question I found told me that the only way to get back the object is to fetch it with an ajax request using the blob:https://www.example.com/0ea6c8a8-732f-42c7-9530-4805c4e785f5 as the destination url. Are blobs not saved in my browsers memory and should therefore be immediately accessible? The way I understand it, it has nothing to do with the remote server/website. Some JS file created the blob object, generated the blob URL and saved it in memory.

I tried using let blob = await fetch(url).then(r => r.blob()); on several websites, always running in cors limitations. Perhaps only the script that created it (different domain) is allowed to access it within its context, which is very unfortunate considering the blob content is literally saved in my browser's memory.

I know other methods of accessing the resource the blob points to or contains by observing network requests. That is not what I am asking here. I wish to understand, how to unpack the blob URL to access Blob object inside browser console to see how the information was saved in the first place. When it comes to videos, Blob simply can't contain the actual video, because of size and bandwidth constrains, so what does it contain then? Manifest file itself?

miran80
  • 945
  • 7
  • 22

1 Answers1

4

See this answer of mine for a way to retrieve the Blob from a blob: URI (you need to run the script there before the Blob is created by the page). Fetching only creates a copy.

The blob: URL is linked to the remote server in that it shares the same origin. So yes, the Blob (binary data) is on your computer, but the URL is only accessible to scripts running from the same origin than the one it was generated from.

And yes, the Blob does contain all the video data, but the string you have is a blob: URL, which is only a pointer to that Blob, itself stored in the browser's memory.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thank you for this explanation. I'll try your way. Just have one question regarding your "Blob does contain all the video data" comment. How could blob in my browser memory contain all video data, if the page took 2 seconds to load and the video could be of any length/size, let's say 2GB? I don't see how it could, at least not at page load. – miran80 Oct 17 '21 at 23:42
  • Nice, hooking worked perfectly, well, almost. I can access MediaSource object now, but even after checking MDN, I can't find where in it is the actual binary data. I should probably open a separate question though. – miran80 Oct 17 '21 at 23:55
  • Well a Blob if not generated as to be fetched, either through network or through selection. But if you say that you did retrieve a MediaSource object, then the page is probably feeding this MediaSource object with chunks of the media. It seems you are a bit confused between Blob objects (which do hold the data) and blob: URLs which are strings, pointing to the data (either from a Blob or a MediaStream) – Kaiido Oct 18 '21 at 00:11
  • As to how to retrieve the actual data from a MediaSource search for dupes first, but unfortunately there are cases you won't be able to do so, because the browser will discard previous data when its buffer is too full. – Kaiido Oct 18 '21 at 00:15
  • I guess I need to add some event listeners on these MediaStream objects, if I want to intercept and dump the chunk data to console. Sure feels like a lot of work compared to grabbing the m3u8 or mpd:) I wasn't aware that MediaStream objects hold chunks of data only temporarily. – miran80 Oct 18 '21 at 00:21
  • 1
    @miran80 you'd need to hook on the [SourceBuffer](https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer) interface, and then retrieve the correct instance from the `MediaSource.sourceBuffers` property. But beware, unlike my solution for blob: URLs doing so you'll store data that should have been discarded, actually creating a memory leak. – Kaiido Oct 18 '21 at 00:27