Browse Source

Example to test JS injection

(cherry picked from commit 1382887d9c)
Jamie Birch 4 years ago
parent
commit
6409d60947
2 changed files with 82 additions and 0 deletions
  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
+}