Message Listener Only Receives "{isTrusted: true}" Object

[reggie3]

The webpage rendered inside webview only receives {isTrusted: true} when receiving events.

This issue can be reproduced by adding the following code to the webage that attaches a function to the message event:
window.addEventListener('message', this.handleMessage);

In the webview, I activate the message event using the injectJavaScript method like this this.webview.injectJavaScript(window.postMessage(${stringMessage}, '*'); true;)

where stringMessage is as JSON.stringified object

Expected behavior:
I expected the entire stringified object to be received as a variable in the handleMessage function. Instead, I only receive the {isTrusted: true}

Environment:

• OS: Windows, Android OnePlus 5
• OS version: 10
• react-native version: 0.59.8 using Expo https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz
• react-native-webview version: 5.12.0

[rgoldiez]

@reggie3 - have you tried (in your webview's JS to log/message the data property of the object (yes, object) that comes in?

[reggie3]

@rgoldiez Actually, I'm not getting a data property. I am using the following code to handle and debug incoming messages for the page that the WebView renders:

  handleMessage = (event) => {
    this.addDebugMessage('HandleMessage 1:');
    this.addDebugMessage({event})
    let msgData = JSON.parse(event);
    this.addDebugMessage({msgData})
    try {
      this.addDebugMessage(`received message: `, msgData);
      if(msgData.payload){
      this.setState({ ...this.state, ...msgData.payload }, () => {
        this.addDebugMessage(this.state);
      });}
    } catch (error) {
      this.addDebugMessage(JSON.stringify(error));
    }
  };

When the webview runs the following code:
this.webview.injectJavaScript(`window.postMessage("test2", '*');`);

The screenshot below show's the "conversation" between the webview and the page its rendering:

The text in the orange background is what the rendered page is doing. "Handle Message 1" correlates to this.addDebugMessage('HandleMessage 1:'); in the code above. So I can confirm that the webpage is receiving something. The printed event object is created by the this.addDebugMessage({event}) code.

Unfortunately, I'm not seeing a data property.

[rgoldiez]

@reggie3 ... Humor me and trying changing this.addDebugMessage({event}) to this.addDebugMessage(event.data)

[reggie3]

@rgoldiez That worked. Thank you for your help.

[rgoldiez]

@reggie3 - Glad to hear! I've faced the same issue so I thought it might be what you were facing.

[philnova]

@reggie3 @rgoldiez I'm facing this exact same issue. Sending message via:

this.webview.injectJavaScript(`
    (function(){
      window.dispatchEvent(new MessageEvent('message', {data: ${JSON.stringify(message)}}));
    })();
    true;
    `);

And receiving it with:

window.addEventListener('message', onReceiveMessage);

The onReceiveMessage function does:

const onReceiveMessage = (nativeEvent: MessageEvent) => {


    let nativeMessage;
    try {
      nativeMessage = JSON.parse(nativeEvent.data);
    } catch (err) {
      postMessage({
        id: 'unknownId',
        type: 'error',
        payload: {
          error: {
            name: 'MessageParsingError',
            message: JSON.stringify(nativeEvent),
          },
        },
      });
      return;
    }
...

The receiver method always errors trying to JSON.parse the data payload because it's undefined. When I stringify and send back the nativeEvent, it's just "{ "isTrusted": true }".

Any ideas on how to proceed?

[philnova]

Aha -- the error wasn't due to a missing payload, it was due to the JSON.parse. Apparently when you send the payload via injectJavaScript vs. postMessage it's already parsed, so you can just use it as a JS object directly.

[LindaOjo]

Solutions above didn't work for me.

What worked for me.

I had a false false report. WebView logs {isTrusted: false} when the event data is from an "untrusted source". Even though the data is as expected.

console.log(data) // {isTrusted: false}

Ignoring the log and treating the data as expected (assuming the correct data was logged) worked for me.

[CallumHemsley]

Aha -- the error wasn't due to a missing payload, it was due to the JSON.parse. Apparently when you send the payload via injectJavaScript vs. postMessage it's already parsed, so you can just use it as a JS object directly.

This isn't true for me! I do something hardcoded like

webviewRef.current.injectJavascript(window.postMessage(JSON.stringify({
        source: "native",
        data: {
          deviceId: "dummy-device-id-12345",
          deviceToken: "dummy-device-token-67890",
          message: "Hello from React Native with dummy device info!"
        }
      }), '*'));`

This comes back as a string for me on the webside - I have to JSON.parse(event.data)