2

I have a problem with iframe. In my application I'm using the html of other different pages, passing this to iframe, as srcdoc. But they may have their own iframe with srcdoc too. And when I'm trying to modify this nested iframes (add some styles, add event listiners, so on) - I have this error

error screenshot

If I'm running app not on my local machine - the origin changed to another url.

This happen only with some nested iframe, never with my first order iframe. I'm adding dynamically sandbox=allow-same-origin to all iframes that I've found, before editing, but this not working for me.

The question is, how to solve this, how browser understand, that this iframe have cross-origin error, and this not?

One more time, I'm using the iframes with srcdoc, so there is no other origin there. I'm not trying to get another's code, and change this. I have the originals htmls, and just passing this to iframe, and trying to edit.

Karl Nelson
  • 75
  • 5
  • Generally the protocol, domain, and port all have to match. If they don't, you get a cross-origin error. – Ouroborus Aug 30 '21 at 04:27
  • Does this answer your question? [SecurityError: Blocked a frame with origin from accessing a cross-origin frame](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) – Ouroborus Aug 30 '21 at 04:27
  • How It can be different domain and protocol, if I use only srcdoc?) I know how cross-origin error works, but I don't know why it is my case – Karl Nelson Aug 30 '21 at 05:33
  • 1
    You have a host page, an outer `iframe`, and an inner `iframe`. Both the inner and outer `iframe` use `srcdoc` for their content. Due to using `srcdoc`, the host page and outer `iframe` are considered to meet same origin requirements. Same with the outer `iframe` and inner `iframe`. But the host page and the inner `iframe` are not same origin. So, if the host page's javascript tries to access the inner `iframe`'s content, you get a cross-origin error. – Ouroborus Aug 30 '21 at 06:14
  • 1
    The javascript that accesses the inner `iframe` needs to run in the context of the outer `iframe`. One way to do this is to inject the javascript into the outer `iframe`'s `srcdoc`. Another way is to inject a script into the outer `iframe`'s content. – Ouroborus Aug 30 '21 at 06:17
  • Could something like `onLoad` event on outer iframe help me? Because I'm not sure, that I can inject this script in the inner iframe. I'm using React.js – Karl Nelson Aug 30 '21 at 07:24
  • No, because `onload` on the outer iframe is run in the context of the host page. The event is emitted by the the iframe element and the iframe element is on the host page's side of the boundary between the iframe element and the iframe's content. – Ouroborus Aug 30 '21 at 15:57
  • ok, so is there any way to change my inner iframe from my host page? Or any hack that will help me to do that? Because one more time, I have written my web application on React.js, and I don't know how can I inject scripts to the iframe, especially, if I should to call some methods from my host page context. – Karl Nelson Sep 01 '21 at 07:43
  • Inject javascript into the outer `iframe` content. That injected javascript would make the needed changes to the inner `iframe` content. I guess the reason you asked about `onload` is because that's something you have convenient control over in React. You could certain use that to kickstart the process. – Ouroborus Sep 01 '21 at 16:11

0 Answers0