Add a injectJavaScript method to the WebView component by worm-emoji · Pull Request #11358 · react/react-native

worm-emoji · 2016-12-08T00:31:54Z

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've done here (allows you to return the response). But, it uses eval() internally which makes it subject to Content Security Policy.

I'm not exactly sure what to do, but I think something should be merged. Perhaps I can add a way to try to return the results without using eval() but that seems tricky. I think the best way would be some sort of internal check when the WebView is loaded to see if CSP applies, and to not return a result on injected JavaScript (disable the use of eval() ) if that is the case. Or, you could make the argument that you don't need an evaluateJavascript function because you can accomplish it using the messaging features as it would work in all of the same places.

Looking for input - thanks.

Code was tested on iOS but not yet on Android - setting up my emulator later on.

facebook-github-bot · 2016-12-08T00:32:01Z

By analyzing the blame information on this pull request, we identified @jacobp100 and @spicyj to be potential reviewers.

jacobp100

Good, clean implementation

ericnakagawa · 2016-12-08T17:58:16Z

@lukemiles This looks like it could be a useful addition. I'm having someone from my team review.
@jacobp100 Thanks for reviewing, too.

ericnakagawa · 2016-12-08T18:33:04Z

@lukemiles Can you add some tests to this PR?

worm-emoji · 2016-12-08T19:24:30Z

@ericnakagawa On it!

worm-emoji · 2016-12-08T20:41:22Z

@ericnakagawa Test added.

yungsters

Code was tested on iOS but not yet on Android - setting up my emulator later on.

Have you had a chance to test this on Android, yet?

yungsters · 2016-12-12T09:01:41Z

+    * 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.


Nit: Can you fix the indentation here? (One too many spaces.)

yungsters · 2016-12-12T09:01:49Z

+    * 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.


yungsters · 2016-12-12T09:03:25Z

+  },
+  {
+    title: 'Inject JavaScript',
+    render(): React.Element<any> { return <InjectJS/>; }


Nit: Space before />.

mmmulani · 2016-12-12T17:32:45Z

iOS side lgtm

worm-emoji · 2016-12-13T01:21:05Z

@yungsters:

Managed to get it working on Android and fixed all the nits. Let me know what else this needs before it can be merged!

eslint-bot · 2016-12-13T02:46:33Z

+      <View>
+        <WebView
+          ref={webview => { this.webview = webview; }}
+          style={{


quotes: Strings must use singlequote.

SRandazzo · 2017-01-03T17:10:51Z

Just what I came here looking for! Thanks @lukemiles for this, looking forward to it landing in master

worm-emoji · 2017-01-03T19:04:43Z

Thanks @SRandazzo!

@jacobp100 @yungsters @ericnakagawa What more has to be done here to get this merged into master?

jacobp100 · 2017-01-04T07:50:37Z

Someone at Facebook has to merge it.

worm-emoji · 2017-01-06T23:07:41Z

Made some stylistic changes thanks to suggestions @brentvatne made. Would love to know if there's anything else blocking this PR!

brentvatne · 2017-01-07T03:07:30Z

@facebook-github-bot shipit

facebook-github-bot · 2017-01-07T03:08:22Z

@brentvatne has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

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 react#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 react#8798 exists and hadn't been merged because of a lack of tests. I commend what was done in react#8798 as it sorely solves a problem (injecting JS after the initial load) and has more features than what I' Closes react#11358 Differential Revision: D4390425 fbshipit-source-id: 02813127f8cf60fd84229cb26eeea7f8922d03b3

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 react/react-native#11358 Differential Revision: D4390425 fbshipit-source-id: 02813127f8cf60fd84229cb26eeea7f8922d03b3

Luke Miles added 2 commits December 6, 2016 18:23

Add injectJavaScript function for iOS webviews

f85e5d8

Add android support for webview JS injection

55d38af

facebook-github-bot added the GH Review: review-needed label Dec 8, 2016

Fix typo: close parentheses

3e82117

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 8, 2016

Merge branch 'master' into master

928c35f

jacobp100 approved these changes Dec 8, 2016

View reviewed changes

Merge branch 'master' into master

5b837a7

Luke Miles and others added 2 commits December 8, 2016 12:40

Add test for injectJS to UIExplorer

00c03f5

Merge branch 'master' into master

51da2d0

Luke Miles and others added 6 commits December 8, 2016 12:47

Improve comments for method

0987da2

Merge branch 'master' of github.com:lukemiles/react-native

4188ae6

Merge branch 'master' into master

063d463

Merge branch 'master' into master

bbb9bf6

Merge branch 'master' into master

43e748c

Merge branch 'master' into master

ce33309

yungsters reviewed Dec 12, 2016

View reviewed changes

Luke Miles added 5 commits December 12, 2016 15:05

Fix comment indentation

43ce911

Add space after component name

d2f4f66

Merge branch 'master' of github.com:lukemiles/react-native

0c72177

Merge branch 'master' of github.com:facebook/react-native

cf5e50e

Tweak example test

2b09845

eslint-bot reviewed Dec 13, 2016

View reviewed changes

Luke Miles added 3 commits December 12, 2016 18:49

fix quotes

6206476

trick stupid linter

e90335e

disable linter on infringing line

b621061

jacobp100 approved these changes Dec 13, 2016

View reviewed changes

Luke Miles added 2 commits January 6, 2017 14:56

Fix single quote; don't cast to string

9b46d04

Fix wrapping of comments

02704cd

Merge branch 'master' into master

3eca02d

brentvatne added GH Review: accepted and removed GH Review: review-needed labels Jan 7, 2017

facebook-github-bot closed this in da9a712 Jan 7, 2017

Conversation

worm-emoji commented Dec 8, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

facebook-github-bot commented Dec 8, 2016

Uh oh!

jacobp100 left a comment

Choose a reason for hiding this comment

Uh oh!

ericnakagawa commented Dec 8, 2016

Uh oh!

ericnakagawa commented Dec 8, 2016

Uh oh!

worm-emoji commented Dec 8, 2016

Uh oh!

worm-emoji commented Dec 8, 2016

Uh oh!

yungsters left a comment

Choose a reason for hiding this comment

Uh oh!

yungsters Dec 12, 2016

Choose a reason for hiding this comment

Uh oh!

yungsters Dec 12, 2016

Choose a reason for hiding this comment

Uh oh!

yungsters Dec 12, 2016

Choose a reason for hiding this comment

Uh oh!

mmmulani commented Dec 12, 2016

Uh oh!

worm-emoji commented Dec 13, 2016

Uh oh!

eslint-bot Dec 13, 2016

Choose a reason for hiding this comment

Uh oh!

SRandazzo commented Jan 3, 2017

Uh oh!

worm-emoji commented Jan 3, 2017

Uh oh!

jacobp100 commented Jan 4, 2017

Uh oh!

worm-emoji commented Jan 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brentvatne commented Jan 7, 2017

Uh oh!

facebook-github-bot commented Jan 7, 2017

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

worm-emoji commented Dec 8, 2016 •

edited

Loading

worm-emoji commented Jan 6, 2017 •

edited

Loading