From da9a712a9e17942dcd05b8d955f0764c2026a4ad Mon Sep 17 00:00:00 2001
From: Luke Miles <luke@restocks.io>
Date: Fri, 6 Jan 2017 20:13:20 -0800
Subject: [PATCH] Add a injectJavaScript method to the WebView component

Summary:
Currently, < WebView > allows you to pass JS to execute within the view. This works great, but there currently is not a way to execute JS after the page is loaded. We needed this for our app.

We noticed that the WebView had messaging support added (see #9762) . Initially, this seemed like more than enough functionality for our use case - just write a function that's injected on initial load that accepts a message with JS, and `eval()` it. However, this broke once we realized that Content Security Policy can block the use of eval on pages. The native methods iOS provide to inject JS allow you to inject JS without CSP interfering. So, we just wrapped the native methods on iOS (and later Android) and it worked for our use case. The method injectJavaScript was born.

Now, after I wrote this code, I realized that #8798 exists and hadn't been merged because of a lack of tests. I commend what was done in #8798 as it sorely solves a problem (injecting JS after the initial load) and has more features than what I'
Closes https://github.com/facebook/react-native/pull/11358

Differential Revision: D4390425

fbshipit-source-id: 02813127f8cf60fd84229cb26eeea7f8922d03b3
---
 Examples/UIExplorer/js/WebViewExample.js      | 35 ++++++++++++++++++-
 .../Components/WebView/WebView.android.js     | 14 ++++++++
 Libraries/Components/WebView/WebView.ios.js   | 14 ++++++++
 React/Views/RCTWebView.h                      |  1 +
 React/Views/RCTWebView.m                      |  5 +++
 React/Views/RCTWebViewManager.m               | 12 +++++++
 .../views/webview/ReactWebViewManager.java    |  8 ++++-
 7 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/Examples/UIExplorer/js/WebViewExample.js b/Examples/UIExplorer/js/WebViewExample.js
index be1fb44ae..a0f3c6357 100644
--- a/Examples/UIExplorer/js/WebViewExample.js
+++ b/Examples/UIExplorer/js/WebViewExample.js
@@ -264,6 +264,35 @@ class MessagingTest extends React.Component {
   }
 }
 
+class InjectJS extends React.Component {
+  webview = null;
+  injectJS = () => {
+    const script = 'document.write("Injected JS ")';  // eslint-disable-line quotes
+    if (this.webview) {
+      this.webview.injectJavaScript(script);
+    }
+  }
+  render() {
+    return (
+      <View>
+        <WebView
+          ref={webview => { this.webview = webview; }}
+          style={{
+            backgroundColor: BGWASH,
+            height: 300,
+          }}
+          source={{uri: 'https://www.facebook.com'}}
+          scalesPageToFit={true}
+        />
+        <View style={styles.buttons}>
+          <Button text="Inject JS" enabled onPress={this.injectJS} />
+        </View>
+    </View>
+    );
+  }
+}
+
+
 var styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -442,5 +471,9 @@ exports.examples = [
   {
     title: 'Mesaging Test',
     render(): ReactElement<any> { return <MessagingTest />; }
-  }
+  },
+  {
+    title: 'Inject JavaScript',
+    render(): React.Element<any> { return <InjectJS />; }
+  },
 ];
diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js
index 4617b2cb6..294095035 100644
--- a/Libraries/Components/WebView/WebView.android.js
+++ b/Libraries/Components/WebView/WebView.android.js
@@ -286,6 +286,20 @@ class WebView extends React.Component {
     );
   };
 
+  /**
+  * Injects a javascript string into the referenced WebView. Deliberately does not
+  * return a response because using eval() to return a response breaks this method
+  * on pages with a Content Security Policy that disallows eval(). If you need that
+  * functionality, look into postMessage/onMessage.
+  */
+  injectJavaScript = (data) => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RCTWebView.Commands.injectJavaScript,
+      [data]
+    );
+  };
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
index 7961d777f..15409e2cc 100644
--- a/Libraries/Components/WebView/WebView.ios.js
+++ b/Libraries/Components/WebView/WebView.ios.js
@@ -489,6 +489,20 @@ class WebView extends React.Component {
     );
   };
 
+  /**
+  * Injects a javascript string into the referenced WebView. Deliberately does not
+  * return a response because using eval() to return a response breaks this method
+  * on pages with a Content Security Policy that disallows eval(). If you need that
+  * functionality, look into postMessage/onMessage.
+  */
+  injectJavaScript = (data) => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RCTWebView.Commands.injectJavaScript,
+      [data]
+    );
+  };
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
diff --git a/React/Views/RCTWebView.h b/React/Views/RCTWebView.h
index e4f57567d..92e9c6bb7 100644
--- a/React/Views/RCTWebView.h
+++ b/React/Views/RCTWebView.h
@@ -43,5 +43,6 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 - (void)reload;
 - (void)stopLoading;
 - (void)postMessage:(NSString *)message;
+- (void)injectJavaScript:(NSString *)script;
 
 @end
diff --git a/React/Views/RCTWebView.m b/React/Views/RCTWebView.m
index 23fe37b84..7220fddeb 100644
--- a/React/Views/RCTWebView.m
+++ b/React/Views/RCTWebView.m
@@ -96,6 +96,11 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
   [_webView stringByEvaluatingJavaScriptFromString:source];
 }
 
+- (void)injectJavaScript:(NSString *)script
+{
+  [_webView stringByEvaluatingJavaScriptFromString:script];
+}
+
 - (void)setSource:(NSDictionary *)source
 {
   if (![_source isEqualToDictionary:source]) {
diff --git a/React/Views/RCTWebViewManager.m b/React/Views/RCTWebViewManager.m
index 2730124ff..ddc66e2b8 100644
--- a/React/Views/RCTWebViewManager.m
+++ b/React/Views/RCTWebViewManager.m
@@ -111,6 +111,18 @@ RCT_EXPORT_METHOD(postMessage:(nonnull NSNumber *)reactTag message:(NSString *)m
   }];
 }
 
+RCT_EXPORT_METHOD(injectJavaScript:(nonnull NSNumber *)reactTag script:(NSString *)script)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTWebView *> *viewRegistry) {
+    RCTWebView *view = viewRegistry[reactTag];
+    if (![view isKindOfClass:[RCTWebView class]]) {
+      RCTLogError(@"Invalid view returned from registry, expecting RCTWebView, got: %@", view);
+    } else {
+      [view injectJavaScript:script];
+    }
+  }];
+}
+
 #pragma mark - Exported synchronous methods
 
 - (BOOL)webView:(__unused RCTWebView *)webView
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java
index 650701851..9671dac65 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java
@@ -95,6 +95,7 @@ public class ReactWebViewManager extends SimpleViewManager<WebView> {
   public static final int COMMAND_RELOAD = 3;
   public static final int COMMAND_STOP_LOADING = 4;
   public static final int COMMAND_POST_MESSAGE = 5;
+  public static final int COMMAND_INJECT_JAVASCRIPT = 6;
 
   // Use `webView.loadUrl("about:blank")` to reliably reset the view
   // state and release page resources (including any running JavaScript).
@@ -477,7 +478,9 @@ public class ReactWebViewManager extends SimpleViewManager<WebView> {
         "goForward", COMMAND_GO_FORWARD,
         "reload", COMMAND_RELOAD,
         "stopLoading", COMMAND_STOP_LOADING,
-        "postMessage", COMMAND_POST_MESSAGE);
+        "postMessage", COMMAND_POST_MESSAGE,
+        "injectJavaScript", COMMAND_INJECT_JAVASCRIPT
+      );
   }
 
   @Override
@@ -504,6 +507,9 @@ public class ReactWebViewManager extends SimpleViewManager<WebView> {
           throw new RuntimeException(e);
         }
         break;
+      case COMMAND_INJECT_JAVASCRIPT:
+        root.loadUrl("javascript:" + args.getString(0));
+        break;
     }
   }