webview: Encode input messages in base64

Fixes #2505 #2538 #2558

When using `postMessage` to communicate with the WebView, depending
on the content of the message we send, an exception might be thrown.

A minimal but reliable way to reproduce the issue is to send
the string `'%22'`. Other character combinations might also cause issues.

Messages are sent to the WebView in different ways for iOS/Android.
This explains why the issue this is fixing is Android-specific.

In iOS, a custom navigation scheme is used to pass the data into
the webview (the RCTJSNavigationScheme constant one can grep for)

More interesting source code reading on that can be done if one
looks at `webViewDidFinishLoad` in `RTCWebView.m`.

The Android messaging happens in `receiveCommand` in `ReactWebViewManager.java`
It is passed by navigating to a URL of the type `javascript:(.....)`
which is a standard way of injecting JavaScript into webpages.

The issue comes from the fact that `loadUrl` since Android 4.4 does
an URL decode on the string passed to it:

https://developer.android.com/reference/android/webkit/WebView#loadUrl(java.lang.String)

`evaluateJavascript` does not:

https://developer.android.com/reference/android/webkit/WebView.html#evaluateJavascript(java.lang.String,%20android.webkit.ValueCallback%3Cjava.lang.String%3E)

Author: borisyankov

src/webview/MessageListWeb.js

@@ -10,6 +10,7 @@ import getHtml from './html/html';
 import renderMessagesAsHtml from './html/renderMessagesAsHtml';
 import { getInputMessages } from './webViewHandleUpdates';
 import * as webViewEventHandlers from './webViewEventHandlers';
+import { objToBase64 } from '../utils/encoding';
 
 export default class MessageListWeb extends Component<Props> {
   context: Context;
@@ -29,7 +30,7 @@ export default class MessageListWeb extends Component<Props> {
 
   sendMessages = (messages: WebviewInputMessage[]): void => {
     if (this.webview && messages.length > 0) {
-      this.webview.postMessage(JSON.stringify(messages), '*');
+      this.webview.postMessage(objToBase64(messages), '*');
     }
   };
 

src/webview/js/generatedEs3.js

@@ -241,7 +241,8 @@ var messageHandlers = {
 document.addEventListener('message', function (e) {
   scrollEventsDisabled = true;
 
-  var messages = JSON.parse(e.data);
+  var decodedData = decodeURIComponent(escape(window.atob(e.data)));
+  var messages = JSON.parse(decodedData);
   messages.forEach(function (msg) {
     messageHandlers[msg.type](msg);
   });

src/webview/js/js.js

@@ -261,7 +261,8 @@ const messageHandlers = {
 document.addEventListener('message', e => {
   scrollEventsDisabled = true;
   // $FlowFixMe
-  const messages: WebviewInputMessage[] = JSON.parse(e.data);
+  const decodedData = decodeURIComponent(escape(window.atob(e.data)));
+  const messages: WebviewInputMessage[] = JSON.parse(decodedData);
   messages.forEach((msg: WebviewInputMessage) => {
     // $FlowFixMe
     messageHandlers[msg.type](msg);