javascript postMessage using iframe creating errors in react app

Question

I'm getting two errors when running the following code in my React application:

try {
      iframe.src = applicationRoutes.href;
      iframe.style.width = '0px';
      iframe.style.height = '0px';
      iframe.style.border = '0px';
      iframe.style.display = 'none';
      iframe.id = 'iframe';
      iframeRef.current.appendChild(iframe);

      const myIframe = window.frames['iframe'].contentWindow;
      myIframe.postMessage('user info', applicationRoutes.href);
    } catch (error) {
      console.log(error);
    }

The errors I receive are the following:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://localhost:4001').

and

Refused to display 'http://localhost:3000/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

What can I do to fix these issues?

The answer depends on your final setup. Why are there 2 different ports? Will there be 2 different ports in production? Do you control them both? — Codebling
– Codebling, Commented Aug 8, 2022 at 18:39
Yes I'm sending a message to another domain, I control both. — Dylan L.
– Dylan L., Commented Aug 8, 2022 at 22:03
You can start by adding X-Frame-Options header to the iframe — Konrad
– Konrad, Commented Aug 8, 2022 at 22:58
Have you been able to confirm that the rendered iframe src is set at http://localhost:3000/? Also, from your browser's console, if you type window.frames['iframe'], does the output match the iframe you expected? Finally, what is at http://localhost:4001? — M. Gallant
– M. Gallant, Commented Aug 10, 2022 at 2:53

inwerpsel · Accepted Answer · 2022-08-11 15:43:16Z

Both errors are a result of the iframe and main document being on different ports of your localhost.

Let's break up the message so it's easier to read.

Failed to execute 'postMessage' on 'DOMWindow':
The target origin provided ('http://localhost:3000')
does not match
the recipient window's origin ('http://localhost:4001').

Browsers limit to what degree pages from one origin can access resources from another, this is called CORS (Cross Origin Resource Sharing). An origin is not only defined by its domain name, but also its port number.

Your resource will need to be either from the same origin, or should have an HTTP header on the response that allows cross domain use. So you have 2 options.

Ensure your `iframe` is served from the same port locally

This could be a sensible solution if the app you're developing will, on production, also always runs on the same domain.

Perhaps you're running 2 instances of a server while really you could run 1 that serves both types?

If that's not possible, you'll have to do the following.

Add a CORS header to the iframe's response

You can add a CORS header with * for simplicity, or a specific host, to tell the browser it's OK to include this on other domains.

For example, in PHP:

 <?php
 header('Access-Control-Allow-Origin: *');

or

 <?php
 header('Access-Control-Allow-Origin: http://localhost:4001');

Collectives™ on Stack Overflow

javascript postMessage using iframe creating errors in react app

1 Answer 1

Ensure your `iframe` is served from the same port locally

Add a CORS header to the iframe's response

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Ensure your iframe is served from the same port locally

Add a CORS header to the iframe's response

Comments

Related

Ensure your `iframe` is served from the same port locally