0

I am trying to access a cross-origin page in my development environment using an iframe.

Here's the host page that is served by Express js at http://localhost:5000. It has an embedded iframe that's trying to access a React app running at http://localhost:3000.

<!DOCTYPE html>
<html>
<body>
    <h1>Host Page</h1>

    <iframe
        id="child"
        src="http://localhost:3000"
        scrolling="no"
        sandbox="allow-popups allow-scripts allow-same-origin"
        style="width: 1px; min-width: 100%; border-width: 0;"
    ></iframe>
</body>
</html>

However when this page comes up, the iframe shows the following error:

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

What's the easiest way to make this work? This is just for my local development - no security concerns whatsoever!

Naresh
  • 23,937
  • 33
  • 132
  • 204
  • Please refer to existing answer: https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame – Mathieu Seiler Dec 16 '20 at 08:12
  • 2
    Mathieu, the answer that you are referring to is talking about communication between parent frame and iframe. I am doing something much simpler - just showing an iframe at a different origin (due to the port # being different). – Naresh Dec 17 '20 at 15:42

0 Answers0