在部署在不同域上的两个纯客户端 JS 应用程序之间共享本地 blob 数据

Question

I have two client-only (backend is static file server) applications written in JS. One is a recorder that records videos (eg the webcam) via the MediaRecorder API (this results in a Blob object). The other application is a video editor (don't mind how that one is implemented).

The two applications are deployed on different domains (eg foo-recorder.com and foo-editor.com ). My goal is to make editing your recordings as easy as possible. I would like the recorder to have a button "edit recording in editor" that opens the editor with the recording already loaded.

A naive solution would be to URL.createObjectUrl(blob) in the recorder, URL-encode that URL and pass it as query parameter to the editor. Eg https://foo-editor.com?video=blob://... . However, as far as I can tell, browsers do not allow sites to access blob URLs from another domain. (That's probably for good privacy reasons.)

I also thought about:

• Storing the blob as a file on the user's device and pass the path to the other site. But we can't just willy nilly write files with JS.
• Storing the blob in local storage: local storage usually is limited to a few MB and can't be access cross-domain either.
• Passing the whole video base64 encoded as query parameter: that's ridiculous. No.

So I can't come up with a working solution. And I wouldn't be surprised if it doesn't work at all because it's probably very tricky privacy and security wise.

Does anyone have an idea how I could pass this blob from one app to the other? Obviously, the blob should not be uploaded.

Answer 1

Thanks to Musa's hint, I found a solution: postMessage allows me to pass the Blob to the editor, even if it's deployed on another domain. The recorder has to open a new browsing contect with the editor loaded. This can be:

• windows.open to open a popup window
• An <iframe> with the editor as src . Acquire the context via iframeDomNode.contentWindow .

It's now possible to use postMessage to send a message to that context:

const iframe = document.getElementById('editor-iframe');
iframe.contentWindow.postMessage(videoBlob, "*"); 
// ^ TODO: change "*" to the specific target origin in production code!!!

On the editor side, I can receive that message via:

window.addEventListener("message", event => {
  // TODO: in real code, you should check `event.origin` here!

  const v = document.getElementById("a-video-element");
  v.src = URL.createObjectURL(event.data);
}, false);

Note: if you generate the blob URL on the recorder side, pass that to the editor, the editor still cannot access that. So you need to pass the blob directly.

Also note that sending a Blob via postMessage is not expensive and does not copy the Blob data .