addEventListener before postMessage is just obviously more intuitive.

What it wrote makes a lot more sense to me than your explanation. Maybe it's not true with what JS? But I would assume I could be preempted immediately after calling postMessage and your method would have no listener in place to receive the response. So putting the listener in place first is the only way that doesn't read as a bug to this old-timer.

So it’s writing defensively in case someone changes postMessage. Sounds right to me

This is perfectly reasonable code and logically sound. I'm speculating, in your head you're thinking, it doesn't make sense to wait for something that hasn't even happened yet. So, post, then listen, then receive. postMessage -> addEventListener -> (receive). But I see it like this: I'm going to send you a message and want you to let me know when we get a reply. Promise? addEventListener -> postMessage -> (receive) The AI isn't being defensive, it's just ordering the logic sequence differently. This is much closer to how event handlers and callbacks work in system/backend platforms/languages.

4/ GetScreenshot was interesting, so I pushed on: - wrap parent postMessage → cross-origin SecurityError - steal webpack_require → not reachable - forge the calls → dropped, or ignored entirely All of them held on both iOS and desktop.

3/ Introspecting window.claude exposed the transport: a typed postMessage RPC to the parent frame. Four documented methods, BUT the source enum listed nine, including GetScreenshot, RunCode, GetFile, SetContent.

1/ I just wanted to see if I could call a different model from inside a Claude artifact. That then turned into a full teardown of the sandbox bridge: the postMessage RPC behind window.claude, the undocumented method surface, and a hunt for a way out. Deets in thread 🧵

The reason that attaching the message handler after sending the message *cannot* (under any circumstance) cause a bug is not because postMessage has an internal queue or something like that. It's because when the worker responds, the message event gets pushed to the main thread's event queue, and this queue is only processed when no code is currently being executed. So even *if* the worker responds immediately, we won't know of it until after attaching the message handler.

In my defense I actually had just woken up and read that it was a postMessage to a worker so the first thing that came to mind was when I was trying to figure out what happens when you send a message from the main thread -> worker while the worker is "busy" on startup

That is the imperative order, but you have to set things up in reverse topological order, especially because postMessage is async. AddEventHandler is synchronous. However, why even use messages at all? You could refactor the entire thing to a sync assign. reply = {type...};

right, the event loop guarantees the worker reply cannot be delivered until your current synchronous block finishes, so attaching the listener after postmessage is completely safe. the defensive ordering is cargo cult, copied from race conditions in other languages that do not apply here. confident code reads better and is still correct

There is a postMessage API that websites and extensions can use to communicate over. Many are misconfigured and can allow for 1. Extensions to snoop on sensitive website content 2. Websites to gain access to privileged extension capabilities. Great research!