Exception error in console related to "KeyboardEvent" property

[Luisav1]

Test Device

Windows PC

Operating System

Windows 11

Browser

Firefox, Chrome, Microsoft Edge

Problem Description

For https://github.com/phetsims/qa/issues/1080. An exception related to the "KeyboardEvent" property appears in the console. This doesn't affect anything else, keyboard navigation still worked well before and after this message. However, it did pop up the debugger in Chrome, but keyboard navigation works fine once you exit out of that.

Message in Firefox:

Uncaught DOMException: Permission denied to access property "KeyboardEvent" on cross-origin object
    r https://phet-dev.colorado.edu/html/greenhouse-effect/1.3.0-dev.11/phet-io/lib/phet-io.js:686
3 phet-io.js:686
    r https://phet-dev.colorado.edu/html/greenhouse-effect/1.3.0-dev.11/phet-io/lib/phet-io.js:686

Message in Chrome and Edge:

phet-io.js:686  Uncaught DOMException: Failed to read a named property 'KeyboardEvent' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
    at r (https://phet-dev.colorado.edu/html/greenhouse-effect/1.3.0-dev.11/phet-io/lib/phet-io.js:686:32821)

Steps to Reproduce

1. Download https://phet-dev.colorado.edu/html/greenhouse-effect/1.3.0-dev.11/phet-io/greenhouse-effect-phet-io-1.3.0-dev.11.zip
2. Unzip it to a spot locally and open index.html
3. Immediately after opening open the console, and the error appears. OR, keep the console closed and reopen it after a while, and the error appears, though this doesn't always work.

Visuals

Firefox:

Chrome:

Edge:

[jessegreenberg]

Thanks @Luisav1!

The relevant file here is KeyboardEventForwarding. Around here:

https://github.com/phetsims/phet-io-wrappers/blob/74bcedfa72a2f3fb86ced7dd50529b50e9ec055f/common/js/keyboardEventForwarding.js#L45-L51

If running a downloaded file locally, there will be a cross-origin permissions issue.

Some questions for the phet-io team: 1) Can we skip forwarding events if the origins don't match? 2) Is this an expected use case for PhET-iO? 3) Is this a problem for many sims that will require a maintenance release?

[samreid]

Is this being launched with file:// or http://?

[jessegreenberg]

I just tried to reproduce the problem by following the steps in "Steps to Reproduce". It loads with file://. 1) I don't see any errors in the console in Edge and Chrome. But global keyboard input only works if focus is inside the sim. 2) In Firefox, global keyboard commands work great, regardless of where focus is. No errors.

[samreid]

@zepumph would be good to consult with here. We worked on a related issue recently.

[jbphet]

A few things:

1. My experience with reproducing this was the same as @jessegreenberg's above, meaning that I never saw the console errors in Chrome, Firefox, or Edge, but global keyboard input didn't work in Chrome and Edge.
2. This use case is phet-io-specific, and involves phet-io-enabled versions of the sim being used in an iframe where the domain at which the sim is hosted is different from the parent page, and global keyboard input is being used. Global input still works when the focus is inside the sim. So, it's a pretty rare use case with a reasonable workaround.
3. This is a general problem, and is not specific to Greenhouse Effect.

Given these observations, I think this issue should not block publication of the next Greenhouse Effect release. I'll assign this to @arouinfar to see if she concurs. If she does, this should be passed on to @jessegreenberg and @zepumph for next steps (I've discussed this with @jessegreenberg) and the issue should either be moved to a common code repo or closed in favor of a new one.

[arouinfar]

Sounds good @jbphet

[jessegreenberg]

OK, thanks! Ill open an issue in phet-io-wrappers for follow up and close this issue.

[jessegreenberg]

Issue has been created, closing.