DevTools: Improve browser extension iframe support (#19854)
Co-authored-by: Joel DSouza <joel.dsouza@kapturecrm.com> Co-authored-by: Damien Maillard <damien.maillard@dailymotion.com> Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
6h057 committed
Sep 23, 2020 at 22:56 UTC
a99bf5c5f4840c558f5e5923fcbe4ad6cb8ade98
30 files changed
+149
-134
fixtures/devtools/iframe/iframe-in-component.html
new
+23
@@ -0,0 +1,23 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6
+ </head>
7
+ <body>
8
+ <div id="root"></div>
9
+ <script>
10
+ const MyComponent = () => {
11
+ return React.createElement("h1", null, "Parent", React.createElement(MainIframe, null, null));
12
+ };
13
+
14
+ const MainIframe = () => {
15
+ return React.createElement("iframe", {src: "./main.html", sandbox:"allow-same-origin allow-scripts"}, null);
16
+ }
17
+
18
+ const el = () => React.createElement(MyComponent, null)
19
+
20
+ ReactDOM.render(el(), document.getElementById('root'))
21
+ </script>
22
+ </body>
23
+</html>
\ No newline at end of file
fixtures/devtools/iframe/iframe-other-origin.html
new
+7
@@ -0,0 +1,7 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head></head>
4
+ <body>
5
+ <iframe src="http://127.0.0.1:3000/main.html"></iframe>
6
+ </body>
7
+</html>
\ No newline at end of file
fixtures/devtools/iframe/iframe-same-origin-sandbox.html
new
+7
@@ -0,0 +1,7 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head></head>
4
+ <body>
5
+ <iframe sandbox="allow-scripts" src="./main.html"></iframe>
6
+ </body>
7
+</html>
\ No newline at end of file
fixtures/devtools/iframe/iframe-same-origin.html
new
+7
@@ -0,0 +1,7 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head></head>
4
+ <body>
5
+ <iframe src="./main.html"></iframe>
6
+ </body>
7
+</html>
\ No newline at end of file
fixtures/devtools/iframe/index.html
new
+14
@@ -0,0 +1,14 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>React DevTools iframe test</title>
6
+ <link rel="stylesheet" href="styles.css" />
7
+ </head>
8
+ <body>
9
+ <iframe src="iframe-in-component.html"></iframe>
10
+ <iframe src="iframe-other-origin.html"></iframe>
11
+ <iframe src="iframe-same-origin-sandbox.html"></iframe>
12
+ <iframe src="iframe-same-origin.html"></iframe>
13
+ </body>
14
+</html>
\ No newline at end of file
fixtures/devtools/iframe/main.html
new
+19
@@ -0,0 +1,19 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6
+ </head>
7
+ <body>
8
+ <div id="root"></div>
9
+ <script>
10
+ const MyComponent = () => {
11
+ return React.createElement("h1", null, "Coucou");
12
+ };
13
+
14
+ const el = () => React.createElement(MyComponent, null)
15
+
16
+ ReactDOM.render(el(), document.getElementById('root'))
17
+ </script>
18
+ </body>
19
+</html>
\ No newline at end of file
fixtures/devtools/iframe/server.js
new
+18
@@ -0,0 +1,18 @@
1
+#!/usr/bin/env node
2
+
3
+const finalhandler = require('finalhandler');
4
+const http = require('http');
5
+const serveStatic = require('serve-static');
6
+
7
+// Serve fixtures folder
8
+const serve = serveStatic(__dirname);
9
+
10
+// Create server
11
+const server = http.createServer(function onRequest(req, res) {
12
+ serve(req, res, finalhandler(req, res));
13
+});
14
+
15
+console.log('Listening on http://localhost:3000');
16
+
17
+// Listen
18
+server.listen(3000);
fixtures/devtools/regression/14.9.html
-6
@@ -5,12 +5,6 @@
5
<title>React 14.9</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
10
fixtures/devtools/regression/15.0.html
-5
@@ -5,11 +5,6 @@
5
<title>React 15.0</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
8
9
<script src="https://unpkg.com/react@15.0/dist/react.js"></script>
10
<script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
fixtures/devtools/regression/15.1.html
-6
@@ -5,12 +5,6 @@
5
<title>React 15.1</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@15.1/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
10
fixtures/devtools/regression/15.2.html
-6
@@ -5,12 +5,6 @@
5
<title>React 15.2</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@15.2/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>
10
fixtures/devtools/regression/15.3.html
-6
@@ -5,12 +5,6 @@
5
<title>React 15.3</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@15.3/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>
10
fixtures/devtools/regression/15.4.html
-6
@@ -5,12 +5,6 @@
5
<title>React 15.4</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@15.4/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>
10
fixtures/devtools/regression/15.5.html
-6
@@ -5,12 +5,6 @@
5
<title>React 15.5</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@15.5/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>
10
fixtures/devtools/regression/15.6.html
-6
@@ -5,12 +5,6 @@
5
<title>React 15.6</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@15.6/dist/react.js"></script>
9
<script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>
10
fixtures/devtools/regression/16.0.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.0</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
9
<script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>
10
fixtures/devtools/regression/16.1.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.1</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
9
<script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>
10
fixtures/devtools/regression/16.2.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.2</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
9
<script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>
10
fixtures/devtools/regression/16.3.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.3</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
9
<script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>
10
fixtures/devtools/regression/16.4.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.4</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
9
<script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>
10
fixtures/devtools/regression/16.5.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.5</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
9
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
10
<script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
fixtures/devtools/regression/16.6.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.6</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
9
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
10
<script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
fixtures/devtools/regression/16.7.html
-6
@@ -5,12 +5,6 @@
5
<title>React 16.7</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
9
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
10
<script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
fixtures/devtools/regression/canary.html
-6
@@ -5,12 +5,6 @@
5
<title>React canary</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
9
<script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
10
<script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
fixtures/devtools/regression/next.html
-6
@@ -5,12 +5,6 @@
5
<title>React next</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
- <script type="text/javascript">
9
- // Enable DevTools to inspect React inside of an <iframe>
10
- // This must run before React is loaded
11
- __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
- </script>
13
-
8
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
9
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
10
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
packages/react-devtools-extensions/README.md
+3
@@ -34,4 +34,7 @@ yarn run test:chrome # Test Chrome extension
34
35
yarn build:firefox # => packages/react-devtools-extensions/firefox/build
36
yarn run test:firefox # Test Firefox extension
37
+
38
+yarn build:edge # => packages/react-devtools-extensions/edge/build
39
+yarn run test:edge # Test Edge extension
40
```
packages/react-devtools-extensions/chrome/manifest.json
+2
-1
@@ -53,7 +53,8 @@
53
{
54
"matches": ["<all_urls>"],
55
"js": ["build/injectGlobalHook.js"],
56
- "run_at": "document_start"
56
+ "run_at": "document_start",
57
+ "all_frames": true
58
}
59
]
60
}
packages/react-devtools-extensions/edge/manifest.json
+2
-1
@@ -53,7 +53,8 @@
53
{
54
"matches": ["<all_urls>"],
55
"js": ["build/injectGlobalHook.js"],
56
- "run_at": "document_start"
56
+ "run_at": "document_start",
57
+ "all_frames": true
58
}
59
]
60
}
packages/react-devtools-extensions/firefox/manifest.json
+2
-1
@@ -57,7 +57,8 @@
57
{
58
"matches": ["<all_urls>"],
59
"js": ["build/injectGlobalHook.js"],
60
- "run_at": "document_start"
60
+ "run_at": "document_start",
61
+ "all_frames": true
62
}
63
]
64
}
packages/react-devtools-shared/src/hook.js
+45
-24
@@ -21,6 +21,25 @@ export function installHook(target: any): DevToolsHook | null {
21
return null;
22
}
23
24
+ function getMainWindow(targetWindow: any): any {
25
+ if (!canAccessParentWindow(targetWindow) || isMainWindow(targetWindow)) {
26
+ return targetWindow;
27
+ }
28
+ return getMainWindow(targetWindow.parent);
29
+ }
30
+
31
+ function isMainWindow(targetWindow: any): boolean {
32
+ return targetWindow.self === targetWindow.top;
33
+ }
34
+
35
+ function canAccessParentWindow(targetWindow: any): boolean {
36
+ try {
37
+ return !!targetWindow.parent.origin;
38
+ } catch (error) {
39
+ return false;
40
+ }
41
+ }
42
+
43
function detectReactBuildType(renderer) {
44
try {
45
if (typeof renderer.version === 'string') {
@@ -282,30 +301,32 @@ export function installHook(target: any): DevToolsHook | null {
301
const listeners = {};
302
const renderers = new Map();
303
285
- const hook: DevToolsHook = {
286
- rendererInterfaces,
287
- listeners,
288
-
289
- // Fast Refresh for web relies on this.
290
- renderers,
291
-
292
- emit,
293
- getFiberRoots,
294
- inject,
295
- on,
296
- off,
297
- sub,
298
-
299
- // This is a legacy flag.
300
- // React v16 checks the hook for this to ensure DevTools is new enough.
301
- supportsFiber: true,
302
-
303
- // React calls these methods.
304
- checkDCE,
305
- onCommitFiberUnmount,
306
- onCommitFiberRoot,
307
- };
308
-
304
+ let hook: DevToolsHook = getMainWindow(target).__REACT_DEVTOOLS_GLOBAL_HOOK__;
305
+ if (!hook) {
306
+ hook = {
307
+ rendererInterfaces,
308
+ listeners,
309
+
310
+ // Fast Refresh for web relies on this.
311
+ renderers,
312
+
313
+ emit,
314
+ getFiberRoots,
315
+ inject,
316
+ on,
317
+ off,
318
+ sub,
319
+
320
+ // This is a legacy flag.
321
+ // React v16 checks the hook for this to ensure DevTools is new enough.
322
+ supportsFiber: true,
323
+
324
+ // React calls these methods.
325
+ checkDCE,
326
+ onCommitFiberUnmount,
327
+ onCommitFiberRoot,
328
+ };
329
+ }
330
Object.defineProperty(
331
target,
332
'__REACT_DEVTOOLS_GLOBAL_HOOK__',