Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame

Question

I'm trying to change style inside an iframe, I gave to the iframe the sandbox="allow-same-origin allow-scripts" attribute but I still get 'Blocked a frame with origin' what more can be the issue ?

<iframe
  height="100%"
  sandbox="allow-same-origin allow-scripts"
  src={formLink}
  onLoad={event => {
    console.log('event', event, event.target);
    const iframeEle = event.target;
    const iframeEleDocument = (iframeEle.contentWindow || iframeEle.contentDocument);
    console.log('iframeEleDocument', iframeEleDocument);
    debugger;
    iframeEleDocument.body.style.backgroundColor = "red";
  }}
/>

postMessage since different ports are seen as different domains. — epascarello, Jul 05 '18 at 13:41
https://stackoverflow.com/questions/31184505/sandboxing-iframe-and-allow-same-origin — Lain, Jul 05 '18 at 13:41
thanks for your comments, but I don't have access to the url that is implemented in the iframe src. — greW, Jul 05 '18 at 13:44
Then you cannot change it's contents through cross-origin js — Patrick Evans, Jul 05 '18 at 13:45
Sandboxing controls what the iframe (resp. the document that is loaded inside it) can do, but it does not disable the _Same Origin Policy_. — CBroe, Jul 05 '18 at 13:47

Simon.Lay · Answer 1 · 2018-07-05T14:14:28.613

0

I think thepostMessage is the security way to do that. You can set an event function in your iframe by using postMessage, and you can do what you wanna do there.

GitHub has many goods about the postMessage, and you can do it conveniently.

edited Jul 05 '18 at 14:14

answered Jul 05 '18 at 13:56

Simon.Lay

263
2
9

Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame

1 Answers1