How to postMessage from different orign than recipient?

Question

I have a problem, that I have no idea how to bypass. I am working on Angular client app and ASP.NET Core 2.2 Web API. Basing on this example, In my Web API controller I need to call a view and pass a model to it, and this works fine:

(...)
else
            {
                TokenResponseViewModel response = GenerateResponse(user);

                return View(response);
            }

The view is parsing the model and is sending a message with window.postMessage:

<body>
    <script>
        var accessToken = "@Model.Token";
        var message = {};
        if (accessToken) {
            message.status = true;
            message.token = '@Model.Token';
            message.email = '@Model.Email';
            message.refreshToken = '@Model.RefreshToken';
            message.user = '@Model.User';
        } else {
            message.status = false;
        }
        console.log('posting message');
        this.window.postMessage(JSON.stringify(message), "http://localhost:4200");
        console.log('posted message');
    </script>
</body>

The idea is to activate handleMessage in my Angular component:

this.externalProviderWindow = window.open(url, "ExternalProvider", params, false);
    this.externalProviderWindow.addEventListener("message", this.handleMessage.bind(this), false);
  }

  private handleMessage(event: Event) {
(...)//process "message"
}

But the problem is that I am getting:

Failed to execute 'postMessage' on 'DOMWindow': The („http://localhost:4200”) target origin provided („http://localhost:50962”)

The reason of that is the Web API controllers endpoint returns view with port 50962 and Angular client app runs with port 4200. And I am running out of ideas how to fix that.

I tried already this with the same result.

How to postMessage from different orign than recipient?

0 Answers0