Receiving the following error when using "braintree-web-drop-in" module in react nativ

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Unexpected token / in JSON at postion 0 about react-native-webview-messaging HOT 11 CLOSED

lesnitsky commented on May 24, 2024

Unexpected token / in JSON at postion 0

from react-native-webview-messaging.

Comments (11)

reggie3 commented on May 24, 2024

I figured it out. Braintree was emitting an event that was being picked up in the react-native-webview-messaging/WebView component. The data from the event.nativeEvent object was a string that began with "/event/{..." the beginning portion is what was screwing it up.

What do you think about wrapping the JSON.parse(data) call in a try/catch in attempt to avoid errors like this? I tried it on a local version and it seemed to work.

from react-native-webview-messaging.

lesnitsky commented on May 24, 2024

@reggie3 sorry for long reply, I've been on vacation. Could you please provide exact object which causes this error?

from react-native-webview-messaging.

reggie3 commented on May 24, 2024

I hope your vacation was nice.
The problem is caused when a webview contains code that emits a message itself. For example, the following code in the Braintree JavaScript SDK can be put into a WebView (via the source prop) in order to display a payment form:

<head>
  <meta charset="utf-8">
  <script src="https://js.braintreegateway.com/web/dropin/1.7.0/js/dropin.min.js"></script>
</head>
<body>
  <div id="dropin-container"></div>
  <button id="submit-button">Request payment method</button>
  <script>
    var button = document.querySelector('#submit-button');

    braintree.dropin.create({
      authorization: 'CLIENT_TOKEN_FROM_SERVER',
      container: '#dropin-container'
    }, function (createErr, instance) {
      button.addEventListener('click', function () {
        instance.requestPaymentMethod(function (err, payload) {
          // Submit payload.nonce to your server
        });
      });
    });
  </script>
</body>

The form that is displayed includes a submit button that executes the code in the event listener. The code that is activated on click emits an event on its own as part of the Braintree SDK's code. The user is unable to control the format of that event. I don't have the full message available to me right now, but it begins with "/event/{..." which does not match react-native-webview-messaging's expected format for an event. This results in the attempt to parse the event on line 29 of your library's WebView.js file failing with the above error.

However, wrapping that JSON.parse(data) call along with the switch statement that follows in a try/catch statement keeps the error from happening.

from react-native-webview-messaging.

lesnitsky commented on May 24, 2024

I'd better add unique hash to messages posted using send/sendJson/emit and check this hash in RN WebView to avoid confusion in case someone will post actual json with type field using window.postMessage. This approach seems more accurate as it fixes one more potential issue + try/catch could affect performance

from react-native-webview-messaging.

lesnitsky commented on May 24, 2024

could you also give me short overview of how are you going to combine this module with Braintree SDK? This seems quite tricky to me and I'd expect more difficulties 😞

from react-native-webview-messaging.

reggie3 commented on May 24, 2024

Now that you mention it, only using the try/catch might result in unexpected messages being received. However, how would you package a hash in such a way that it can be decoded without potentially trying to JSON.parse something that isn't JSON?

I was working on a picture for a blog post to describe the process, so hopefully that will do a better job of explaining how I plan to use this module with Braintree. The bolded & underlined actions are what I plan to use your module for.

from react-native-webview-messaging.

lesnitsky commented on May 24, 2024

how would you package a hash in such a way that it can be decoded without potentially trying to JSON.parse something that isn't JSON?

I'd implement smth like this

Stringify:

const dataToEmit = { a: 1};
const stringified = JSON.stringify(dataToEmit);
const withHash = SOME_MAGIC_VALUE + stringified;
window.postMessage(withHash);

Parse:

if (data.indexOf(SOME_MAGIC_VALUE) !== 0) {
    return; // that's not something that was received from rn messages channel
}

const jsonString = data.replace(SOME_MAGIC_VALUE, '');
const parsed = JSON.parse(jsonString);

Thanks for illustration, now it's more clear 👍

from react-native-webview-messaging.

reggie3 commented on May 24, 2024

That's a pretty cool solution!

from react-native-webview-messaging.

reggie3 commented on May 24, 2024

SOME_MAGIC_VALUE doesn't need to change, it can be hardwired into your library, correct? It just has to be something unique that isn't likely to be created by some other library. Would a GUID suffice?

from react-native-webview-messaging.

lesnitsky commented on May 24, 2024

Yes, you're right. Sorry, had no spare time to address this issue yet 😞

from react-native-webview-messaging.

reggie3 commented on May 24, 2024

I'll try to implement your technique above using a GUID and submit a pull request.

from react-native-webview-messaging.

Unexpected token / in JSON at postion 0 about react-native-webview-messaging HOT 11 CLOSED

Comments (11)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent