Parent to Child Communication using postMessage() not Working- Cross Domain

Question

Tried to load an angular web app inside an ionic app using iframe, Main concern is, I need to use the locally stored values from ionic app to angular web app when entered through iframe instead of using query params which sometimes gave error as Error : URI too long

Ionic App -- http://localhost:8100/ng-iframe-loader

HTML code

 <iframe id="myiframe" allow="camera *;microphone *"  src=" localhost:4200" style="height: 100%;  width: 100%"> </iframe>

Ts Code

 const data = { message: 'Data Received' }
    const iframe: any = window.document.createElement('myiframe');

    iframe.onload = () => {
      debugger
      iframe.contentWindow.postMessage(data, '*');
    };
    document.body.appendChild(iframe);

Angular Web App rendered through Iframe-- http://localhost:4200/credit-mobile-form

App.component.ts code

window.addEventListener('message', (event: MessageEvent) => {
      if (event) {
        console.log(event.data, 'Received Data ===>>>');
      }
    });

Response received for event.data is undefined in angular web app

data : { data: undefined type: "webpackInvalid" (sometimes webpackOK) }