Ensure sync-xhr is allowed before reload and profile

packages/react-devtools-shared/src/backend/agent.js

@@ -38,6 +38,8 @@ import type {
   RendererInterface,
 } from './types';
 import type {ComponentFilter} from '../types';
+import {
+} from './utils';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -215,12 +217,14 @@ export default class Agent extends EventEmitter<{|
 
     // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
     // If not, features like reload-and-profile will not work correctly and must be disabled.
+    // The same goes for sync XHR requests; it's how DevTools injects before ReactDOM starts rendering.
     let isBackendStorageAPISupported = false;
     try {
       localStorage.getItem('test');
       isBackendStorageAPISupported = true;
     } catch (error) {}
     bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);
+    bridge.send('isSynchronousXHRSupported', isSynchronousXHRSupported());
 
     setupHighlighter(bridge, this);
     setupTraceUpdates(this);

packages/react-devtools-shared/src/backend/utils.js

@@ -183,3 +183,11 @@ export function format(
 
   return '' + formatted;
 }
+
+export function isSynchronousXHRSupported(): boolean {
+  return (
+    window.document &&
+    window.document.featurePolicy &&
+    window.document.featurePolicy.allowsFeature('sync-xhr')
+  );
+}

packages/react-devtools-shared/src/bridge.js

@@ -134,6 +134,7 @@ export type BackendEvents = {|
   syncSelectionFromNativeElementsPanel: [],
   syncSelectionToNativeElementsPanel: [],
   unsupportedRendererVersion: [RendererID],
+  isSynchronousXHRSupported: [boolean],
 
   // React Native style editor plug-in.
   isNativeStyleEditorSupported: [

packages/react-devtools-shared/src/devtools/store.js

@@ -77,6 +77,7 @@ export default class Store extends EventEmitter<{|
   supportsProfiling: [],
   supportsReloadAndProfile: [],
   unsupportedRendererVersionDetected: [],
+  supportsSynchronousXHR: [],
 |}> {
   _bridge: FrontendBridge;
 
@@ -141,6 +142,9 @@ export default class Store extends EventEmitter<{|
   _supportsReloadAndProfile: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
+  // Needed for reload and profile
+  _supportsSynchronousXHR: boolean = false;
+
   _unsupportedRendererVersionDetected: boolean = false;
 
   // Total number of visible elements (within all roots).
@@ -205,6 +209,10 @@ export default class Store extends EventEmitter<{|
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
     );
+    bridge.addListener(
+      'isSynchronousXHRSupported',
+      this.onBridgeSynchronousXHRSupported,
+    );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
   }
@@ -365,6 +373,9 @@ export default class Store extends EventEmitter<{|
     // Both of these are required for the reload-and-profile feature to work.
     return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
   }
+  get supportsSynchronousXHR(): boolean {
+    return this._supportsSynchronousXHR;
+  }
 
   get supportsTraceUpdates(): boolean {
     return this._supportsTraceUpdates;
@@ -1149,4 +1160,10 @@ export default class Store extends EventEmitter<{|
 
     this.emit('unsupportedRendererVersionDetected');
   };
+
+  onBridgeSynchronousXHRSupported = (isSynchronousXHRSupported: boolean) => {
+    this._supportsSynchronousXHR = isSynchronousXHRSupported;
+
+    this.emit('supportsSynchronousXHR');
+  };
 }

packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js

@@ -17,6 +17,7 @@ import {useSubscription} from '../hooks';
 type SubscriptionData = {|
   recordChangeDescriptions: boolean,
   supportsReloadAndProfile: boolean,
+  supportsSynchronousXHR: boolean,
 |};
 
 export default function ReloadAndProfileButton() {
@@ -28,13 +29,16 @@ export default function ReloadAndProfileButton() {
       getCurrentValue: () => ({
         recordChangeDescriptions: store.recordChangeDescriptions,
         supportsReloadAndProfile: store.supportsReloadAndProfile,
+        supportsSynchronousXHR: store.supportsSynchronousXHR,
       }),
       subscribe: (callback: Function) => {
         store.addListener('recordChangeDescriptions', callback);
         store.addListener('supportsReloadAndProfile', callback);
+        store.addListener('supportsSynchronousXHR', callback);
         return () => {
           store.removeListener('recordChangeDescriptions', callback);
           store.removeListener('supportsReloadAndProfile', callback);
+          store.removeListener('supportsSynchronousXHR', callback);
         };
       },
     }),
@@ -43,6 +47,7 @@ export default function ReloadAndProfileButton() {
   const {
     recordChangeDescriptions,
     supportsReloadAndProfile,
+    supportsSynchronousXHR,
   } = useSubscription<SubscriptionData>(subscription);
 
   const reloadAndProfile = useCallback(() => {
@@ -59,11 +64,15 @@ export default function ReloadAndProfileButton() {
     return null;
   }
 
+  const buttonTitle = supportsSynchronousXHR
+    ? 'Reload and start profiling'
+    : 'Reload and start profiling has been disabled because synchronous XHR is not supported on this site';
+
   return (
     <Button
-      disabled={!store.supportsProfiling}
+      disabled={!store.supportsProfiling || !supportsSynchronousXHR}
       onClick={reloadAndProfile}
-      title="Reload and start profiling">
+      title={buttonTitle}>
       <ButtonIcon type="reload" />
     </Button>
   );