feat: Error boundary default refresh always takes top window (#4224)

Author: pan-kot

src/error-boundary/__tests__/error-boundary.test.tsx

@@ -7,15 +7,9 @@ import { render } from '@testing-library/react';
 import ErrorBoundary, { ErrorBoundaryProps } from '../../../lib/components/error-boundary';
 import { BuiltInErrorBoundaryProps } from '../../../lib/components/error-boundary/interfaces';
 import { BuiltInErrorBoundary } from '../../../lib/components/error-boundary/internal';
-import { refreshPage } from '../../../lib/components/error-boundary/utils';
 import TestI18nProvider from '../../../lib/components/i18n/testing';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
-jest.mock('../../../lib/components/error-boundary/utils', () => ({
-  ...jest.requireActual('../../../lib/components/error-boundary/utils'),
-  refreshPage: jest.fn(),
-}));
-
 type RenderProps = Omit<
   Partial<ErrorBoundaryProps> & { i18nProvider?: Record<string, Record<string, string>> } & {
     [key: `data-${string}`]: string;
@@ -618,10 +612,39 @@ describe('built-in error boundaries', () => {
 });
 
 describe('default behaviors', () => {
+  let originalLocation: PropertyDescriptor | undefined;
+
+  beforeEach(() => {
+    originalLocation = Object.getOwnPropertyDescriptor(window, 'location');
+  });
+
+  afterEach(() => {
+    if (originalLocation) {
+      Object.defineProperty(window, 'location', originalLocation);
+    }
+  });
+
   test('window reload is called when the refresh action is clicked', () => {
+    const mockReload = jest.fn();
+    Object.defineProperty(window, 'location', { configurable: true, value: { reload: mockReload } });
+
     renderWithErrorBoundary(<b>{{}}</b>);
     findRefreshAction()!.click();
-    expect(refreshPage).toHaveBeenCalledTimes(1);
+    expect(mockReload).toHaveBeenCalledTimes(1);
+  });
+
+  test('hides default refresh in cross-origin iframes', () => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        get href() {
+          throw new Error();
+        },
+      },
+    });
+
+    renderWithErrorBoundary(<b>{{}}</b>);
+    expect(findRefreshAction()).toBe(null);
   });
 });
 

src/error-boundary/fallback.tsx

@@ -10,7 +10,7 @@ import InternalButton from '../button/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { ErrorBoundaryProps } from './interfaces';
-import { refreshPage } from './utils';
+import { canUseRefresh, refreshPage } from './utils';
 
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
@@ -32,11 +32,11 @@ export function ErrorBoundaryFallback({
         <DefaultDescriptionContent i18nStrings={i18nStrings} />
       </div>
     ),
-    action: (
+    action: canUseRefresh() ? (
       <div className={clsx(styles.action, testUtilStyles.action)}>
         <DefaultActionContent i18nStrings={i18nStrings} />
       </div>
-    ),
+    ) : null,
   };
   return (
     <div {...baseProps} className={clsx(baseProps.className, testUtilStyles.fallback)}>

src/error-boundary/utils.ts

@@ -1,7 +1,27 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-/* istanbul ignore next */
-export function refreshPage() {
-  window.location.reload();
+// The default refresh action reloads the top window to avoid iframe lifecycle getting out of sync with the parent page.
+// This is not possible from cross-origin iframes, in which case the default refresh action must be hidden.
+export function canUseRefresh(): boolean {
+  try {
+    // In cross-origin iframes, accessing top.location can throw a SecurityError.
+    void getTopWindow().location.href;
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function refreshPage(): void {
+  try {
+    getTopWindow().location.reload();
+  } catch {
+    // noop
+  }
+}
+
+// In browsers, window.top is always defined, but it is treated as optional by our current DOM types.
+function getTopWindow(): Window {
+  return window.top ?? window;
 }