|
|
@@ -11,8 +11,10 @@ const HTML = `
|
|
11
|
11
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
12
|
12
|
<title>iframe test</title>
|
|
13
|
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>
|
|
|
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>
|
|
16
|
18
|
<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
|
|
17
|
19
|
<iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
|
|
18
|
20
|
</body>
|
|
|
@@ -33,7 +35,7 @@ export default class Injection extends Component<Props, State> {
|
|
33
|
35
|
return (
|
|
34
|
36
|
<ScrollView>
|
|
35
|
37
|
<View style={{ }}>
|
|
36
|
|
- <View style={{ height: 120 }}>
|
|
|
38
|
+ <View style={{ height: 200 }}>
|
|
37
|
39
|
<WebView
|
|
38
|
40
|
/**
|
|
39
|
41
|
* This HTML is a copy of a multi-frame JS injection test that I had lying around.
|
|
|
@@ -47,21 +49,64 @@ export default class Injection extends Component<Props, State> {
|
|
47
|
49
|
* JS injection user scripts, consistent with current behaviour. This is undesirable,
|
|
48
|
50
|
* so needs addressing in a follow-up PR. */
|
|
49
|
51
|
onMessage={() => {}}
|
|
|
52
|
+
|
|
50
|
53
|
/* We set this property in each frame */
|
|
51
|
|
- injectedJavaScriptBeforeContentLoaded={`window.self.colourToUse = "orange";`}
|
|
|
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
|
+ }
|
|
|
69
|
+
|
|
|
70
|
+ window.self.document.addEventListener("DOMContentLoaded", function (event) {
|
|
|
71
|
+ const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
|
|
|
72
|
+ declareSuccessBeforeContentLoaded(head);
|
|
|
73
|
+ });
|
|
|
74
|
+ `}
|
|
|
75
|
+
|
|
52
|
76
|
injectedJavaScriptForMainFrameOnly={false}
|
|
|
77
|
+
|
|
53
|
78
|
/* We read the colourToUse property in each frame to recolour each frame */
|
|
54
|
|
- injectedJavaScript={`window.self.document.body.style.backgroundColor = window.self.colourToUse;`}
|
|
|
79
|
+ injectedJavaScript={`
|
|
|
80
|
+ function declareSuccessAfterContentLoaded(head){
|
|
|
81
|
+ var style = window.self.document.createElement('style');
|
|
|
82
|
+ style.type = 'text/css';
|
|
|
83
|
+ style.innerHTML = "#after_failed { display: none !important; }#after_succeeded { display: inline-block !important; }";
|
|
|
84
|
+ head.appendChild(style);
|
|
|
85
|
+ }
|
|
|
86
|
+
|
|
|
87
|
+ declareSuccessAfterContentLoaded(window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
|
|
|
88
|
+
|
|
|
89
|
+ if(window.self.colourToUse){
|
|
|
90
|
+ window.self.document.body.style.backgroundColor = window.self.colourToUse;
|
|
|
91
|
+ } else {
|
|
|
92
|
+ window.self.document.body.style.backgroundColor = "cyan";
|
|
|
93
|
+ }
|
|
|
94
|
+ `}
|
|
55
|
95
|
/>
|
|
56
|
96
|
</View>
|
|
57
|
97
|
</View>
|
|
58
|
98
|
<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
|
99
|
<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>
|
|
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 the main frame, iframe_0, and iframe_1 all 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>
|
|
|
100
|
+ <Text>1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'green' as the "colour to be used".</Text>
|
|
|
101
|
+ <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>
|
|
|
102
|
+ <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>
|
|
|
103
|
+ <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>
|
|
|
104
|
+ <Text>✅ If the main frame, iframe_0, and iframe_1 all become green or cyan, then multi-frame injection is supported.</Text>
|
|
|
105
|
+ <Text>✅ If the two texts say "beforeContentLoaded succeeded!" and "afterContentLoaded succeeded!", then both injection times are supported.</Text>
|
|
|
106
|
+ <Text>❌ If the text "beforeContentLoaded failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.</Text>
|
|
|
107
|
+ <Text>❌ If the text "afterContentLoaded failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.</Text>
|
|
|
108
|
+ <Text>❌ If any frames become coloured cyan, then JS injection has failed before the content loaded (but succeeded after the content loaded).</Text>
|
|
|
109
|
+ <Text>❌ If only the main frame changes colour (to green or cyan), then multi-frame injection is not supported.</Text>
|
|
65
|
110
|
</ScrollView>
|
|
66
|
111
|
);
|
|
67
|
112
|
}
|
Jamie Birch
4 years ago