Sending & Receiving data from one domain to another using iframes

Question

I have a HTML-CSS-JS editor embedded into my Angular application (running on http://localhost:4200). The body of the editor has an iframe with the source URL given as http://localhost:3000 (React application). I want to pass a value (say a string value) to the source URL and receive it at the other end simultaneously.

Note: Both are running on separate domains, different browser windows.

I tried using the postMessage function for the iframes, but somehow it didn't work.

What I tried:

In the HTML-CSS-JS Editor of the Angular app

HTML:

<iframe src="http://localhost:3000/test"></iframe>

JS:

window.parent.postMessage('stringValue', 'http://localhost:3000/test');

In the Test.jsx of the React app

useEffect(() => {
    const handleMessage = (event) => {
        console.log('Received message. Origin:', event.origin, 'Data:', event.data);
    
        // Check the origin of the data
        if (event.origin !== 'http://localhost:4200') {
        return;
        }
    
        // Handle the message
        console.log('Handling message:', event.data);
    };
    
    window.addEventListener('message', handleMessage);
    
    return () => {
        // Cleanup: Remove the event listener when the component is unmounted
        window.removeEventListener('message', handleMessage);
    };
}, []);

What I received on my React app console is

{
    "type": "webpackWarnings",
    "data": [
        "WARNING in ./src/pages/projectDetails.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/projectDetails.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(129:5) autoprefixer: end value has mixed support, consider using flex-end instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1286:3) autoprefixer: end value has mixed support, consider using flex-end instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1287:3) autoprefixer: end value has mixed support, consider using flex-end instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1318:3) autoprefixer: start value has mixed support, consider using flex-start instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1350:3) autoprefixer: start value has mixed support, consider using flex-start instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1351:3) autoprefixer: start value has mixed support, consider using flex-start instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1543:3) autoprefixer: end value has mixed support, consider using flex-end instead",
        "WARNING in ./src/pages/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/main.css)\nModule Warning (from ./node_modules/postcss-loader/dist/cjs.js):\nWarning\n\n(1544:3) autoprefixer: end value has mixed support, consider using flex-end instead"
    ]
}

What I expect is to get the event.origin in the React app as 'http://localhost:4200' instead of 'http://localhost:3000' and the sent data from the iframe in the event.data.