Chrome Back button issue after interaction with Iframe Angular

I have an Angular application. Below are the steps to follow:

1. A customer goes through a flow and lands into one of the partial pages.

2. From one of the partial page, I click a button to get an ID from a cross domain (done via service call, thus no CORS issue).

3. Using this ID, I append on the cross domain url -- something like http://externalpahe.com?responseId=ID

4. This url is executed a child component, inside an Iframe.

5. In this Iframe cross domain's page, there are two button - 'Save' and 'Cancel'

6. On Click of any of these buttons, the application is navigated back.

7. ISSUE: After successful back navigation, on click of Chrome browser's back button, the application reloads.

Due to this, the flow of the application restarts again and the customer is required to go through the flow again. Though the data gets updated, on arriving back to the partial page, where the action has been performed previously, but it is not a good ease-of-use scenario.

I am making use of the below code to execute the cross domain's url in an iframe. I doubt that the DomSanitizer is causing the weird issue for Chrome. For others browsers', it works fine.

Angular Component:

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {
    this.targetUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.sourceUrl);
}

Angular Template:

<iframe #crossDomainIframe [src]="targetUrl" (load)="onPageLoad()">
</iframe>

In onPageLoad() I am doing simple business logic of emitting the response back to the parent component.

onPageLoad () {
    this.callbackResponse.emit(returnUrl);
}

Is there a way to handle the issue?

Or can the cross domain be executed on Iframe in a different way?

from Chrome Back button issue after interaction with Iframe Angular