Fix/detect in iframe fix (#2475)

* detectInIframe fn fix

* detectInIframe renamed to the more accurate (if lengthy!) detectInIframeInAccessibleDomain

* adding changeset file

* changed import in unit test

* Changed check for reading window.parent.location

* Clarified function name and purpose (via comments)

* update comment in changeset file

.changeset/twelve-clouds-float.md

@@ -0,0 +1,6 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Renaming detectInIframe to the more accurate, but lengthy, detectInIframeInSameOrigin.
+Now the functionality only considers itself to be running in an iframe _if_ it is possible to access the parent domain and thus be able to redirect the top, parent, window

packages/lib/src/components/Redirect/Redirect.test.tsx

@@ -4,7 +4,7 @@ import Redirect from './Redirect';
 import RedirectShopper from './components/RedirectShopper';
 import RedirectElement from './Redirect';
 
-jest.mock('../../utils/detectInIframe', () => {
+jest.mock('../../utils/detectInIframeInSameOrigin', () => {
     return jest.fn().mockImplementation(() => {
         return true;
     });

packages/lib/src/components/Redirect/components/RedirectShopper/RedirectShopper.tsx

@@ -1,5 +1,5 @@
 import { Component, h } from 'preact';
-import detectInIframe from '../../../../utils/detectInIframe';
+import detectInIframeInSameOrigin from '../../../../utils/detectInIframeInSameOrigin';
 
 interface RedirectShopperProps {
     beforeRedirect: (resolve, reject, url) => Promise<void>;
@@ -21,7 +21,7 @@ class RedirectShopper extends Component<RedirectShopperProps> {
             if (this.postForm) {
                 this.postForm.submit();
             } else {
-                if (this.props.redirectFromTopWhenInIframe && detectInIframe()) {
+                if (this.props.redirectFromTopWhenInIframe && detectInIframeInSameOrigin()) {
                     // if in an iframe and the config prop allows it - try to redirect from the top level window
                     window.top.location.assign?.(this.props.url);
                 } else {
@@ -51,7 +51,7 @@ class RedirectShopper extends Component<RedirectShopperProps> {
                     ref={ref => {
                         this.postForm = ref;
                     }}
-                    {...(this.props.redirectFromTopWhenInIframe && detectInIframe() && { target: '_top' })}
+                    {...(this.props.redirectFromTopWhenInIframe && detectInIframeInSameOrigin() && { target: '_top' })}
                 >
                     {Object.keys(data).map(key => (
                         <input type="hidden" name={key} key={key} value={data[key]} />

packages/lib/src/utils/detectInIframeInSameOrigin.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns true if the page is being run in an iframe with the same origin as the parent.
+ * In this scenario, if the merchant has set redirectFromTopWhenInIframe: true, then we can perform the redirect on the top level, parent, window;
+ * rather than on the iframe's window
+ */
+export default () => {
+    try {
+        if (window.parent.location.href) {
+            return window.location !== window.parent.location; // iframe check: locations will differ if we're in an iframe
+        }
+    } catch (e) {
+        return false; // we cannot access window.parent.location.href - so consider us "not to be in an iframe" for the purpose of Redirects
+    }
+};