DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame

Question

I have two web application on different domain.

1. Web App1
2. Web App2

My Final goal is as par below.

I have found the tutorial to login with Google account API in Asp.net MVC - 5.

https://tutorialslink.com/Articles/How-to-login-with-Google-account-API-in-Aspnet-MVC---5/18

By using same concept I am trying to do below things

1. Open WebApp2 from WebApp1

2. From WebApp2 on Apply event redirect to specified URL consist of URL + required data in encrypted format.

3. From WebApp1 by continuously checking for the updated URL and accordingly display the data on WebAp1.

4. Close the WebApp2.

To achieve the above steps, my source code (WebApp1) as par below.

var REDIRECT = "http://localhost/Home/Test";
var webApp2 = window.open("WebApp2Url", "CrossDomain", '', true);
var pollTimer = window.setInterval(function () {
try {
    if (webApp2.document.URL.indexOf(REDIRECT) != -1) {
    window.clearInterval(pollTimer);
    // logic to retrieve data from webApp2.document.URL
    webApp2.close();
    debugger;
    }
}
catch (e) {
}
}, 500);

I am getting below error at code line

[if (webApp2.document.URL.indexOf(REDIRECT) != -1) {]

DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

Please any one can guide me to resolve above error.

I have tried with enabling CORS in WebApp2 but it didn't work.

Any idea to design WebApp2 is highly welcome.

Solution

I have got the work around for the same.

In my WebApp2 After finishing with processing I am redirect control to my WebApp1 i.e to domain1.

Reference:

How do I get around window.opener cross-domain security