React-native: RN 0.59.8: postMessage result from iOS WebView is double-encoded

[aldistel]

The data returned to onMessage WebView callback on iOS is double-percent-encoded.

React Native version: 0.59.8

Steps To Reproduce

1. Inject a JS into WebView that calls e.g. window.postMessage('https://test.com')
2. The onMessage handler will receive double-encoded value:

<WebView onMessage={onMessage} ... />

function onMessage(event) {
   console.log(event.nativeEvent.data);  // "https%253A%252F%252Ftest.com"
}

This was introduced in https://github.com/facebook/react-native/commit/61ca11965046f75e7500e5152c5f2b60df2a2cd5#diff-17ddfccc3e39071c0aa51f82677e6d68 :

Correct method to use instead of stringByReplacingPercentEscapesUsingEncoding is stringByRemovingPercentEncoding.

cc @pvinis

[guhungry]

React Native's WebView was deprecated please migrate to Community version

[Ruanyang2015]

me too

[Atanatous]

I had the same error with Expo SDK 33 and iOS.
So I have tried to use react-native-webview from community, and it works to me!
In this change, if you use postMessage function, you should change windows.postMessage() to window.ReactNativeWebView.postMessage().

However, it shows error message as belows when I inject this code
Error evaluating injectedJavaScript: This is possibly due to an unsupported return type. Try adding true to the end of your injectedJavaScript string..

If you try this and solve, please notice me, too!

[yurnery]

me too

[Ruanyang2015]

me too

改 OC原生可以避免它

[aijason]

Platform.OS === 'ios' ? decodeURIComponent(decodeURIComponent(event.nativeEvent.data)) : event.nativeEvent.data

[Ruanyang2015]

Platform.OS === 'ios' ? decodeURIComponent(decodeURIComponent(event.nativeEvent.data)) : event.nativeEvent.data

I tried your method, but it still went wrong.

[hyper750]

I solve it with

let string_data = m.nativeEvent.data;
if(Platform.OS === "ios"){
    // IOS returns the data url encoded/percent-encoding twice
    // unescape('%257B') -> %7B
    // unescape(%7B) -> {
    string_data = unescape(unescape(string_data));
}

[t-benze]

somehow adding useWebKit={true} fix the issue.

---

seems the issue only affect UIWebView, not WKWebView

[bauerlaci]

somehow adding useWebKit={true} fix the issue

it's working for me, thanks a lot!
(using expo sdk 33 on iOS)

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.