5

I'm trying to use custom DOM events to communicate between the main world and the isolated world for a page in a webextension in Firefox. When trying to access an event object property, I get an access denied error. Most of what follows is just context. I really want to know what a "restricted" object is rather than how to make it unrestricted.

listener

function onCustom( e ) {
  console.log( e );
  console.log( e.detail );
  console.log( e.detail.plugh );
}
document.addEventListener( 'custom', onCustom );

sender

e = new CustomEvent( 'custom', { detail: {
  plugh: 'xyzzy'
} } );

document.dispatchEvent( e );

If the listener and the sender are both in the same world, it works fine. (This case is just a sanity check, since the point is to communicate between worlds.)

If the listener is in the isolated world and the sender is in the main world, it works fine.

If the listener is in the main world and the sender is in the isolated world, it pukes as follows.

console output

custom { blah, blah, blah, lots of properties }
Object { plugh: "xyzzy" }
Uncaught Error: Permission denied to access property "plugh"

That's all the error information that there is: an untyped error and a message string.

I can expand the Object (second line) in the devtools console. It's there.

If I expand the "custom" object (first line) in the devtools console, it says (in part):

  detail: Restricted {  }

The detail property of a CustomEvent can be anything serializable. I can do my own serialization with JSON.stringify() in the sender and deserialize it with JSON.parse() in the listener. It's a workaround that does work. I still want to know what's going on with the object that I cannot access it after it was serialized and deserialized transparently for me.

EDIT (from the comments): The documented way to send objects from the isolated world into the main world is cloneInto().

sender (isolated to main only)

e = new CustomEvent( 'custom', cloneInto( { detail: {
  plugh: 'xyzzy'
} }, wrappedJSObject ) );

document.dispatchEvent( e );
15
  • 1
    What do you mean by "same world"? Do you mean how browser extensions' run in a separate execution context? Is your script running in a Background-script context or a Content-script context? Commented Dec 2, 2024 at 14:51
  • @Dai, the content world is either main or isolated. The web page loaded from a server is the "main" world. The default world for an extension content script is "isolated." Nothing in this question is in the background. Commented Dec 2, 2024 at 14:54
  • 1
    Firefox implements a structured clone algorithm to transfer data across world while maintaining isolation. If an object cannot be fully cloned or if it's flagged as unsafe, it becomes a restricted object. This ensures that: 1. Sensitive data doesn't leak across contexts. 2. Malicious scripts cannot tamper with objects from secure origins. In your case, the detail object, although serializable, is wrapped as Restricted when accessed from the main world. This ensures that extensions cannot inadvertently expose sensitive or insecure data to the webpage. Commented Dec 2, 2024 at 15:03
  • 3
    Simply use cloneInto function as explained in Firefox's documentation. Commented Dec 2, 2024 at 15:49
  • 1
    If, when "trying to access an event object property, [you] get an access denied error", remember to show that error in your post. Commented Dec 2, 2024 at 16:58

1 Answer 1

3

This answer represents what I've learned today from (what I can remember of) a deleted answer from another poster plus the comments.

Because it's structured data, when sending { detail: { plugh: "xyzzy" } } in an event, the browser makes a structured clone. A common example of structured cloning is passing objects back and forth between realms with web workers. The question doesn't deal with web workers, but the main and isolated worlds of the content context are different realms, which have different window objects. (Having different window objects is part of how the isolation of "isolated world" works, even though the main and isolated worlds share the DOM and, hence, DOM events. That part I already knew.)

When Firefox serializes the detail object, the object (or at least members of it) retains the characterization of belonging to the isolated world. (I would have thought serialization discards it, but it doesn't.) In the main world, the deserialized object still belongs to the isolated world. Because the isolated world has a higher privilege level, the deserialized object is inaccessible ("restricted") in the main world.

Explicitly serializing the object with JSON.stringify() does discard the realm information, so the object can be deserialized without the origin realm information (and it works). Primitives, like strings, apparently don't have realm information. Mozilla has another solution for content scripts, however.

cloneInto() sets the realm information to whatever else is specified, usng the window of the target realm. Since wrappedJSObject is a reference in the isolated world to the window object in the main world, detail can be characterized as belonging to the main world before serialization. When it's deserialized, it still belongs to the main world, so it is accessible (not "restricted") in the main world.

TL;DR: Serialization and deserialization across the main/isolated world boundary retains world information for complex data. Objects belonging to the higher-privileged isolated world are restricted from access in the lower-privileged main world.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.