Cross Origin issues, even with the same domain.

Photo by Evan Dennis on Unsplash

Cross Origin issues, even with the same domain.

How the same can be not exactly the same.

Today I was having an issue while trying to access the content of an iframe, and grab click-events from it.

I got this message:

Blocked a frame with origin "sameAsParentOrigin" from accessing a cross-origin frame.

This puzzled me somewhat, as the iframe content was coming from the same domain as the parent page.

After a lot of searching, I found an interesting post in stackoverflow which says, and I quote:

Origin is considered different if at least one of the following parts of the address isn't maintained: protocol://hostname:port... Protocol, hostname and port must be the same of your domain if you want to access a frame.

After more googling I came across a solution, which seemed so simple and cute, I almost didn't try it, of setting in the parent app and the iframe content app the following:

<script>document.domain = 'yourProjectsDomain';</script>

And it worked like a charm. Before I knew it, I had my iframe resizing on demand, as the user clicked on the slide-out/slide-back button of the embedded app; doing away with some pointer-event problems caused by a fixed-size iframe.

Nice!