|
|
@@ -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
|
+}
|
Jamie Birch
пре 5 година