Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Including %22 in Android WebView postMessage payload results in SyntaxError #19611

Closed
jordoh opened this issue Jun 7, 2018 · 0 comments
Closed

Including %22 in Android WebView postMessage payload results in SyntaxError #19611

jordoh opened this issue Jun 7, 2018 · 0 comments
Labels
Component: WebView Related to the WebView component. Platform: Android Android applications. Platform: Linux Building on Linux. Resolution: Locked This issue was locked by the bot.

Comments

@jordoh
Copy link

jordoh commented Jun 7, 2018

Environment

Environment:
OS: Linux 4.16
Node: 9.11.1
Yarn: 1.6.0
npm: 6.0.1
Watchman: 4.9.0
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Description

On Android 4.4 and above, WebView's loadUrl performs URL decoding on the string passed in. This results in a %22 being decoded to " prior to the javascript being executed. The extra un-escaped quote results in the javascript containing a syntax error, thus failing to execute.

There are (at least) two past and present PRs that have sought to address this in injectedJavascript, by using evaluateJavascript on 4.4 and above:
#12321
#9945

I can confirm that changing ReactWebViewmanager's receiveCommand to call root.evaluateJavascript results in the expected behavior.

Steps to Reproduce

  1. Create a new app using CRNA/Expo and change App.js to:
import React, { Component } from 'react';
import { Button, Dimensions, View, WebView } from 'react-native';

const html = `
<html>
  <body>
    <div id="element">test</div>
    
    <script type="text/javascript">
        document.addEventListener("message", function(event) {
          document.querySelector("#element").textContent = "success";
        });
    </script>
  </body>
</html>
`;

export default class App extends Component {
  postMessage(text) {
    this.webView.postMessage(text);
  }

  render() {
    const { height, width } = Dimensions.get("window");

    return (
      <View style={{ flex: 1 }}>
        <Button
          onPress={ () => this.postMessage("test") }
          title="postMessage without %22"
        />
        <Button
          onPress={ () => this.postMessage("test%22") }
          title="postMessage with %22"
        />
        <WebView
          ref={ webView => this.webView = webView }
          source={ { html } }
          style={ { height, width } }
        />
      </View>
    );
  }
}
  1. Run with react-native run-android.
  2. Press postMessage with %22 button.

Expected Behavior

Text inside the WebView should change from "test" to "success". Expected behavior can be observed by pressing the postMessage without %22 button.

Actual Behavior

Text inside the WebView does not change.

Inspecting the WebView with Chrome reveals the following error: Uncaught SyntaxError: Invalid or unexpected token

e.g. after clicking the button 4 times:
image
@react-native-bot react-native-bot added Platform: Android Android applications. Component: WebView Related to the WebView component. Platform: Linux Building on Linux. labels Jun 7, 2018
jordoh added a commit to jordoh/react-native that referenced this issue Jun 8, 2018
@jordoh
Use evaluateJavascript for postMessage, if available. Fixes facebook#…
83cc0f3 
…19611

loadUrl's behavior on Android 4.4+ is to URL decode the input prior
to evaluating it, so a `%22` in the input will be decoded to `"`. Since
it is not escaped, this quote introduces a syntax error into the
javascript, preventing execution.
jordoh added a commit to jordoh/react-native that referenced this issue Jun 11, 2018
@jordoh
Use evaluateJavascript for postMessage, if available. Fixes facebook#…
d9e2936 
…19611

loadUrl's behavior on Android 4.4+ is to URL decode the input prior
to evaluating it, so a `%22` in the input will be decoded to `"`. Since
it is not escaped, this quote introduces a syntax error into the
javascript, preventing execution.
@jordoh jordoh mentioned this issue Jun 11, 2018
Closed
@LinusU LinusU mentioned this issue Jul 24, 2018
Closed
@borisyankov borisyankov mentioned this issue Aug 2, 2018
Closed
kelset pushed a commit that referenced this issue Aug 13, 2018
@LinusU @kelset
Properly escape JavaScript code on Android (#20366)
e4f6694 
Summary:
These changes will fix executing javascript with any special characters, by making use of the `evaluateJavascript` function on Android 4.4+, and by properly escaping the URI on Android <4.4.

Fixes #19611 • Fixes #20365 • Fixes #9749 • Closes #19655 • Closes #12321

This PR supersedes #19655 by patching the same problem in all the places, and fixing it for Android <4.4 as well.
Pull Request resolved: #20366

Differential Revision: D9242968

Pulled By: hramos

fbshipit-source-id: f2e1abc786ba333dbd8aaa8922e716fd99ec26e0
@spaceye spaceye mentioned this issue Oct 11, 2018
Closed
@spaceye spaceye mentioned this issue Oct 23, 2018
Closed
@facebook facebook locked as resolved and limited conversation to collaborators Aug 9, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Aug 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Component: WebView Related to the WebView component. Platform: Android Android applications. Platform: Linux Building on Linux. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
2 participants
@jordoh @react-native-bot