npm
/
react-native-webview
Watch 11
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 141 Wiki Activity
Browse Source

Example to test JS injection 

(cherry picked from commit 1382887d9c)
Jamie Birch 4 years ago
parent
63788f99e8
commit
736f1bc08d
2 changed files with 82 additions and 0 deletions
Split View Show Diff Stats
  1. 14
    0
      example/App.tsx
  2. 68
    0
      example/examples/Injection.tsx

+ 14
- 0
example/App.tsx View File 

@@ -14,6 +14,7 @@ import Alerts from './examples/Alerts';
14 14 
 import Scrolling from './examples/Scrolling';
15 15 
 import Background from './examples/Background';
16 16 
 import Uploads from './examples/Uploads';
17 
+import Injection from './examples/Injection';
17 18
18 19 
 const TESTS = {
19 20 
   Alerts: {
 
@@ -48,6 +49,14 @@ const TESTS = {
48 49 
       return <Uploads />;
49 50 
     },
50 51 
   },
52 
+  Injection: {
53 
+    title: 'Injection',
54 
+    testId: 'injection',
55 
+    description: 'Injection test',
56 
+    render() {
57 
+      return <Injection />;
58 
+    },
59 
+  },
51 60 
 };
52 61
53 62 
 type Props = {};
 
@@ -101,6 +110,11 @@ export default class App extends Component<Props, State> {
101 110 
             title="Background"
102 111 
             onPress={() => this._changeTest('Background')}
103 112 
           />
113 
+          <Button
114 
+            testID="testType_injection"
115 
+            title="Injection"
116 
+            onPress={() => this._changeTest('Injection')}
117 
+          />
104 118 
           {Platform.OS === 'android' && <Button
105 119 
             testID="testType_uploads"
106 120 
             title="Uploads"

+ 68
- 0
example/examples/Injection.tsx View File 

@@ -0,0 +1,68 @@
1 
+import React, {Component} from 'react';
2 
+import {Text, View, ScrollView} from 'react-native';
3 
+
4 
+import WebView from 'react-native-webview';
5 
+
6 
+const HTML = `
7 
+<!DOCTYPE html>
8 
+<html>
9 
+	<head>
10 
+	    <meta charset="utf-8">
11 
+	    <meta name="viewport" content="width=device-width, initial-scale=1">
12 
+	    <title>iframe test</title>
13 
+	</head>
14 
+	<body>
15 
+		<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe.html?v=1" name="iframe_0" style="width: 100%; height: 25px;"></iframe>
16 
+		<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
17 
+		<iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
18 
+	</body>
19 
+</html>
20 
+`;
21 
+
22 
+type Props = {};
23 
+type State = {
24 
+  backgroundColor: string,
25 
+};
26 
+
27 
+export default class Injection extends Component<Props, State> {
28 
+  state = {
29 
+    backgroundColor: '#FF00FF00'
30 
+  };
31 
+
32 
+  render() {
33 
+    return (
34 
+      <ScrollView>
35 
+        <View style={{ }}>
36 
+          <View style={{ height: 120 }}>
37 
+            <WebView
38 
+              /**
39 
+               * This HTML is a copy of a multi-frame JS injection test that I had lying around.
40 
+               * @see https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframeTest.html
41 
+               */
42 
+              source={{ html: HTML }}
43 
+              automaticallyAdjustContentInsets={false}
44 
+              style={{backgroundColor:'#00000000'}}
45 
+
46 
+              /* Must be populated in order for `messagingEnabled` to be `true` to activate the
47 
+               * JS injection user scripts, consistent with current behaviour. This is undesirable,
48 
+               * so needs addressing in a follow-up PR. */
49 
+              onMessage={() => {}}
50 
+              /* We set this property in each frame */
51 
+              injectedJavaScriptBeforeContentLoaded={`window.self.colourToUse = "orange";`}
52 
+              injectedJavaScriptForMainFrameOnly={false}
53 
+              /* We read the colourToUse property in each frame to recolour each frame */
54 
+              injectedJavaScript={`window.self.document.body.style.backgroundColor = window.self.colourToUse;`}
55 
+            />
56 
+          </View>
57 
+        </View>
58 
+        <Text>This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').</Text>
59 
+        <Text>Before injection, the webpage's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
60 
+        <Text>1) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'orange' as the "colour to be used".</Text>
61 
+        <Text>2) At injection time "afterContentLoaded", that variable will be read, and thus the colour orange will be injected into all frames.</Text>
62 
+        <Text>✅ If all frames become orange, then multi-frame injection is supported and both injection times are supported.</Text>
63 
+        <Text>❌ If no frames become orange, then only one (or neither) of the injection times are supported, or even injection into the main frame is failing.</Text>
64 
+        <Text>❌ If only the main frame becomes orange, then multi-frame injection is not supported.</Text>
65 
+      </ScrollView>
66 
+    );
67 
+  }
68 
+}