|
|
@@ -0,0 +1,114 @@
|
|
|
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
|
+ <p style="">beforeContentLoaded <span id="before_failed" style="display: inline-block;">failed</span><span id="before_succeeded" style="display: none;">succeeded</span>!</p>
|
|
|
16
|
+ <p style="">afterContentLoaded <span id="after_failed" style="display: inline-block;">failed</span><span id="after_succeeded" style="display: none;">succeeded</span>!</p>
|
|
|
17
|
+ <iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe.html?v=1" name="iframe_0" style="width: 100%; height: 25px;"></iframe>
|
|
|
18
|
+ <iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
|
|
|
19
|
+ <iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
|
|
|
20
|
+ </body>
|
|
|
21
|
+</html>
|
|
|
22
|
+`;
|
|
|
23
|
+
|
|
|
24
|
+type Props = {};
|
|
|
25
|
+type State = {
|
|
|
26
|
+ backgroundColor: string,
|
|
|
27
|
+};
|
|
|
28
|
+
|
|
|
29
|
+export default class Injection extends Component<Props, State> {
|
|
|
30
|
+ state = {
|
|
|
31
|
+ backgroundColor: '#FF00FF00'
|
|
|
32
|
+ };
|
|
|
33
|
+
|
|
|
34
|
+ render() {
|
|
|
35
|
+ return (
|
|
|
36
|
+ <ScrollView>
|
|
|
37
|
+ <View style={{ }}>
|
|
|
38
|
+ <View style={{ height: 200 }}>
|
|
|
39
|
+ <WebView
|
|
|
40
|
+ /**
|
|
|
41
|
+ * This HTML is a copy of a multi-frame JS injection test that I had lying around.
|
|
|
42
|
+ * @see https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframeTest.html
|
|
|
43
|
+ */
|
|
|
44
|
+ source={{ html: HTML }}
|
|
|
45
|
+ automaticallyAdjustContentInsets={false}
|
|
|
46
|
+ style={{backgroundColor:'#00000000'}}
|
|
|
47
|
+
|
|
|
48
|
+ /* Must be populated in order for `messagingEnabled` to be `true` to activate the
|
|
|
49
|
+ * JS injection user scripts, consistent with current behaviour. This is undesirable,
|
|
|
50
|
+ * so needs addressing in a follow-up PR. */
|
|
|
51
|
+ onMessage={() => {}}
|
|
|
52
|
+
|
|
|
53
|
+ /* We set this property in each frame */
|
|
|
54
|
+ injectedJavaScriptBeforeContentLoaded={`
|
|
|
55
|
+ window.self.colourToUse = "green";
|
|
|
56
|
+
|
|
|
57
|
+ function declareSuccessBeforeContentLoaded(head){
|
|
|
58
|
+ var style = window.self.document.createElement('style');
|
|
|
59
|
+ style.type = 'text/css';
|
|
|
60
|
+ style.innerHTML = "#before_failed { display: none !important; }#before_succeeded { display: inline-block !important; }";
|
|
|
61
|
+ head.appendChild(style);
|
|
|
62
|
+ }
|
|
|
63
|
+
|
|
|
64
|
+ const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
|
|
|
65
|
+
|
|
|
66
|
+ if(head){
|
|
|
67
|
+ declareSuccessBeforeContentLoaded(head);
|
|
|
68
|
+ } else {
|
|
|
69
|
+ window.self.document.addEventListener("DOMContentLoaded", function (event) {
|
|
|
70
|
+ const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
|
|
|
71
|
+ declareSuccessBeforeContentLoaded(head);
|
|
|
72
|
+ });
|
|
|
73
|
+ }
|
|
|
74
|
+
|
|
|
75
|
+ `}
|
|
|
76
|
+
|
|
|
77
|
+ injectedJavaScriptForMainFrameOnly={false}
|
|
|
78
|
+
|
|
|
79
|
+ /* We read the colourToUse property in each frame to recolour each frame */
|
|
|
80
|
+ injectedJavaScript={`
|
|
|
81
|
+ function declareSuccessAfterContentLoaded(head){
|
|
|
82
|
+ var style = window.self.document.createElement('style');
|
|
|
83
|
+ style.type = 'text/css';
|
|
|
84
|
+ style.innerHTML = "#after_failed { display: none !important; }#after_succeeded { display: inline-block !important; }";
|
|
|
85
|
+ head.appendChild(style);
|
|
|
86
|
+ }
|
|
|
87
|
+
|
|
|
88
|
+ declareSuccessAfterContentLoaded(window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
|
|
|
89
|
+
|
|
|
90
|
+ if(window.self.colourToUse){
|
|
|
91
|
+ window.self.document.body.style.backgroundColor = window.self.colourToUse;
|
|
|
92
|
+ } else {
|
|
|
93
|
+ window.self.document.body.style.backgroundColor = "cyan";
|
|
|
94
|
+ }
|
|
|
95
|
+ `}
|
|
|
96
|
+ />
|
|
|
97
|
+ </View>
|
|
|
98
|
+ </View>
|
|
|
99
|
+ <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>
|
|
|
100
|
+ <Text>Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
|
|
|
101
|
+ <Text>1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'green' as the "colour to be used".</Text>
|
|
|
102
|
+ <Text>1b) Also upon "beforeContentLoaded", a style element to change the text "beforeContentLoaded failed" -> "beforeContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>
|
|
|
103
|
+ <Text>2a) At injection time "afterContentLoaded", that variable will be read – if present, the colour green will be injected into all frames. Otherwise, cyan.</Text>
|
|
|
104
|
+ <Text>2b) Also upon "afterContentLoaded", a style element to change the text "afterContentLoaded failed" -> "afterContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>
|
|
|
105
|
+ <Text>✅ If the main frame, iframe_0, and iframe_1 all become green or cyan, then multi-frame injection is supported.</Text>
|
|
|
106
|
+ <Text>✅ If the two texts say "beforeContentLoaded succeeded!" and "afterContentLoaded succeeded!", then both injection times are supported.</Text>
|
|
|
107
|
+ <Text>❌ If the text "beforeContentLoaded failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.</Text>
|
|
|
108
|
+ <Text>❌ If the text "afterContentLoaded failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.</Text>
|
|
|
109
|
+ <Text>❌ If any frames become coloured cyan, then JS injection has failed before the content loaded (but succeeded after the content loaded).</Text>
|
|
|
110
|
+ <Text>❌ If only the main frame changes colour (to green or cyan), then multi-frame injection is not supported.</Text>
|
|
|
111
|
+ </ScrollView>
|
|
|
112
|
+ );
|
|
|
113
|
+ }
|
|
|
114
|
+}
|
Salvatore Randazzo
5 years ago