Dispatched virtual keyboard events missing `origin` when `mathVirtualKeyboardPolicy = "sandboxed"`

[karnilaev]

When using the library in an iframe with mathVirtualKeyboardPolicy = "sandboxed", the library dispatches events using a MessageEvent via window.dispatchEvent.

Those events lack a valid origin even though I set virtualKeyboardTargetOrigin implicitly. In my sandboxed environment, this triggers an error indicating that the message event has no origin domain:

Uncaught Error: Post message did not have origin domain
    at global-bridge.js:2:151778
    at e.try (global-bridge.js:2:124315)
    at global-bridge.js:2:151628
    at n (global-bridge.js:2:151880)
    at JM.sendMessage (index-DjpiC-Wc.js:3042:21441)
    at ResizeObserver.<anonymous> (index-DjpiC-Wc.js:3042:12155)

This issue appears when the virtual keyboard is opened or any of its buttons is clicked.

Steps to Reproduce

1. Set mathVirtualKeyboardPolicy = "sandboxed".

      const MathField = ({ id, formula, onChange }: Props) => {
        const ref = useRef<MathfieldElement>(null);
   
        useEffect(() => {
            const element = ref.current;
   
            if (!element) {
                return;
            }
   
            element.mathVirtualKeyboardPolicy = "sandboxed";
            element.virtualKeyboardTargetOrigin = window.origin;
        }, []);
   
        return (
            <math-field
                id={id}
                onInput={(e) => {
                    // @ts-expect-error library types don't provide us correct event property
                    onChange(e.target.value);
                }}
                ref={ref}
            >
                {formula}
            </math-field>
        );
    };
   
   

2. Run Mathlive inside an iframe.
3. Open the virtual keyboard or press a virtual keyboard button.
4. An error appears in the console/logs from a specific environment that requires MessageEvent to have origin domain.

Expected Behavior

In sandboxed mode, virtual keyboard events should include origin property.

Actual Behavior

A virtual keyboard MessageEvent lacks origin.

Thank you for looking into this! If there is any other information or testing I can provide, please let me know.

[arnog]

I'm not sure I'm following what's going on...

First, the iframe example in /examples/iframe/ works and does not displays message in the console. Can you confirm that this works for you?

Second, it seems that there's something in your environment that is triggering this problem. Looking at the stack trace:>

Uncaught Error: Post message did not have origin domain
    at global-bridge.js:2:151778
    at e.try (global-bridge.js:2:124315)
    at global-bridge.js:2:151628
    at n (global-bridge.js:2:151880)
    at JM.sendMessage (index-DjpiC-Wc.js:3042:21441)
    at ResizeObserver.<anonymous> (index-DjpiC-Wc.js:3042:12155)

I'm not sure what global-bridge.js is, but it's not part of mathlive.

It looks like something is listening for messages, and expecting them to have an "origin domain"?

Are you suggesting that a targetOrigin parameter should be provided with the MessageEvent? A targetOrigin is provided when the message is posted (i.e. with postMessage()), but targetOrigin is not a standard property of MessageEvent...

[karnilaev]

Hi @arnog! Thanks for the quick response. Yes, the error occurs in my environment where I run Mathfield. The environment expects the origin property of the MessageEvent to be set. This property is described as a standard property of MessageEvent. If I include the origin property in the dispatched event, the environment doesn’t throw an error.

[karnilaev]

I've edited the initial message to make it more clear. Sorry if it confused you previously.