[Bug] Amazon CCP Iframe Modifies Session History Affecting Browser Navigation

[jq123v]

Background

I am currently using Amazon Streams v2.14.5 to display the Amazon Connect Control in an iframe. Overall, the library works as expected, but the iframe is affecting navigation on the browser.

• Chrome Version: Version 128.0.6613.85
• OS: Mac OS X 13.6.9

Issue

Iframes and parent pages share the same session history. When the iframe renders on the page, it loads the Amazon CCP page and request storage page. The session history is modified when the iframe loads these pages. As a result, when we click on the 'Back' button on the browser, the iframe is navigated back, but the parent window stays on the same page. The user has to spam the back button to pop off all Amazon Connect history entries before the navigation can function normally again.

• Current Behavior: Back button navigates back on the Amazon CCP iframe.
• Expected Behavior: Back button should navigate back on the parent window. Amazon CCP iframe should not navigate back.

Steps to Reproduce

1. Import Amazon Streams library
2. Render Amazon CCP iframe on page
3. Reload page
4. Click back button on Browser
5. Iframe navigates back instead of parent window

Potential Root Cause

When the Amazon CCP iframe is mounted and loaded on the page, in connect.core._createCCPIframe there is a check if Connect can request storage access. If this check returns true, a storage access request handler is attached on the iframe's load event.

   // connect.core._createCCPIframe
    if(connect.storageAccess.canRequest()){
      iframe.src = connect.storageAccess.getRequestStorageAccessUrl();
      iframe.addEventListener('load', connect.storageAccess.request);
    }

When the load handler is invoked, Streams gets the iframe and sends a message to the iframe's content window. I believe this is the area where the iframe's initial navigation is happening. The webpage in the iframe is likely navigating based on the landat parameter from the message. However, the navigation is occurring on the iframe's webpage, and we don't have a way to see what happens on the receiver's end of the message.

//  connect.storageAccess.request
request: () => {
      const iframeContainer = connect.core._getCCPIframe();
      iframeContainer.contentWindow.postMessage(
        {
          event: storageAccessEvents.REQUEST,
          data: { ...storageParams, landat: getlandAtPath() },
        },
        '*'
      );

Potential Fix

When we comment out this load handler, navigation works as expected; however, the iframe no longer updates when the user signs into their Amazon Connect account. I think we need to remove the iframe from the page before the navigation happens (i.e. before the message is sent) to prevent the navigation from affecting the session history.

I can see this logic is performed when the iframe is recreated in connect.core._refreshIframeOnTimeout. This is necessary because Streams updates the iframe src attribute, which will cause the browser's history to update if the iframe is not removed before the src is updated.

         // connect.core._refreshIframeOnTimeout
          var iframe = connect.core._getCCPIframe();
          if (iframe) {
            iframe.parentNode.removeChild(iframe); // The only way to force a synchronous reload of the iframe without the old iframe continuing to function is to remove the old iframe entirely.
          }
          var newIframe = connect.core._createCCPIframe(containerDiv, initCCPParams);

Additional References

• https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/
• https://medium.com/whatfix-techblog/handling-navigation-in-iframes-4eb17bf6852b