1827104 - "Accessing from Xray wrapper is not supported." upon assigning an array to adoptedStyleSheets

Status: RESOLVED DUPLICATE of bug 1751346

(WebExtensions :: Untriaged, defect)

Description

[iwaduarte]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Steps to reproduce:

I am trying to set a style of a shadow element inside an extension/add-on.

const shadow = div.attachShadow({ mode: "open" });
const CSSStyle = new CSSStyleSheet();
CSSStyle.replaceSync(css);
shadow.adoptedStyleSheets = [CSSStyle];

Actual results:

Error Error: Accessing from Xray wrapper is not supported.
tt moz-extension://84efe39b-affb-4d58-8ab1-36d781707ee1/assets/src/ContentScript/main.555c7662.js:2

...

The code complains at:
shadow.adoptedStyleSheets = [CSSStyle];

Expected results:

The style should have been set.

The error is similar to this:

https://bugzilla.mozilla.org/show_bug.cgi?id=1766909

The only thing I could find by searching.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'WebExtensions::Untriaged' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Alex Cornestean]

Hello iwaduarte,

Would you be able to attach a test extension to this report so I can confirm the issue you are having?

Thank you !

Comment 3

[iwaduarte]

(In reply to Alex Cornestean from comment #2)

Hello iwaduarte,

Would you be able to attach a test extension to this report so I can confirm the issue you are having?

Thank you !

Hi Alex,

I have made a simple example showing the error. I did not quite get what you meant by "test extension" but I think this example should suffice. I have attached it to this thread.

Thanks for the response.

Comment 4

[iwaduarte]

Attachment: test-extension.zip

Comment 5

[Alex Cornestean]

Hello iwaduarte,

An example extension was what I was looking for. Thank you !

I reproduced the issue on the latest Nightly (114.0a1/20230410212705), Beta (113.0b1/20230410195555) and Release (111.0.1/20230321111920) Under Windows 10 x64 and macOS 11.3.1.

I loaded the extension via about:debugging, opened a new tab with https://www.wikipedia.org/ and then checked the web console (or the browser console). The Error: Accessing from Xray wrapper is not supported. error is logged to console.

See the attached screenshot for more details.

Comment 6

[Alex Cornestean]

Attachment: 2023-04-11_10h20_26.png

Comment 7

[Rob Wu [:robwu]]

This is happening because the the [] syntax creates an array in the (sandboxed) context of the content script, which is disallowed because the content script has a higher privilege than the page that is associated with the document.adoptedStyleSheets API.

IMO this restriction is too strict, it should be perfectly fine to see through the Xrays in this case and accept the items in the array (and have strict type checks, i.e. that the value is a JS Array and that the items within are CSSStyleSheet instances). I recommend this strict type checking, to prevent this API from being used to unwrap arbitrary XrayWrapped arrays.

Emilio, does the above sound reasonable? If yes, I suppose that this bug would have to be moved to Core::DOM: Bindings (WebIDL).

To the reporter, a workaround is to add the stylesheet as follows:

const shadow = div.attachShadow({ mode: "open" });
const CSSStyle = new CSSStyleSheet();
CSSStyle.replaceSync(css);

// Not needed in this case, but the equivalent to = [] would require emptying the array before pushing:
shadow.adoptedStyleSheets.length = 0;
shadow.adoptedStyleSheets.push(CSSStyle);

Emilio, second question: is this kind of pattern (with push or splice) something we should encourage in the documentation on MDN?

Comment 8

[Emilio Cobos Álvarez (:emilio)]

This is basically bug 1751346, right? Re push / splice... I don't have a strong opinion? If you just created the shadow root, then push makes sense and you don't need the .length = 0...

Comment 10

[Rob Wu [:robwu]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #8)

This is basically bug 1751346, right?

The other bug is about accessing. This bug is about a very specific case: writing an array. If that is equivalent, then it's a duplicate. Otherwise this bug is merely a dependency of the other bug.

Comment 11

[iwaduarte]

Thanks, :robwu.

I have ended up creating a style tag inside the shadow element :

const style = document.createElement("style");
style.textContent = css;

But your approach is cleaner.