Let's take a look at the other condition that must be true in order for us to have direct access between
frames so we can only have direct access between frames if we fetch the parent document and the iFrame
XML document from the exact same domain and port and protocol.
This is currently true inside of our application if we go back over to our browser.
And open up the network inspector tab and then going to refresh and I'm going to find the initial request
to localhost, this is our index, not HTML document.
If I click on that request and go to response, I can very clearly see that is indexed HTML.
If I mouse over the request, you'll notice it says that we made a request to http localhost PT. three
thousand.
Our iFrame is loading up a HTML document as well.
It is called test on HTML.
There's the request for it right there.
The test file is being loaded from HTTP localhost or three thousand to.
So because we are loading up both documents from the exact same domain, the exact same port and the
same protocol, we are allowed to have direct access.
If any of these three scenarios right here are these three conditions are not true.
We don't get direct access.
So let me show you a very quick example of how we could simulate this very easily.
You do not have to go through what I'm about to do.
As a matter of fact, I would recommend you not make the change.
I'm going to change some settings on my local computer to allow me to load up that test on HTML document
from a different domain.
So again, you do not have to make the change I'm about to make.
I'm going to very quickly open up my terminal, I'm going to open up my Etsy hosts file inside my code
editor, if you're on Windows, this file does not exist.
So if you're on Windows in particular, I would recommend just kind of hanging out for just a moment
and taking a look at what happens.
So inside of here, I'm going to say.
That if I ever make a request to nothing dot localhost, I want that request to be rerouted back to
my local computer.
So we essentially treat localhost as like the exact same thing as nothing dot localhost.
These two domains localhost and nothing dot localhost are essentially identical now.
But as far as the browser is concerned, they are in fact different domains.
I'm going to save this file.
And then I can go over to my browser now, open up another tab, navigate to nothing dot localhost or
three thousand, and that will still load up my application because again, nothing dot localhost is
still routing requests back to my local machine.
Now, I'm going to go back to my code editor and I'm going to try to load up my index, not HTML file
still from localhost, I'm going to change the source of that iFrame to try to load up the test html
file from this new different domain of nothing that localhost.
So back inside my index TSX file.
I'm going to remove that sandbox just to say, hey, not any conflict here or anything like that.
I'll then change the source to http ohlin nothing localhost or three thousand.
I'll save that back over, I can still load up that document, but now if I mouseover my localhost request,
so that's for indexed HMO, I still have localhost three thousand and if I go down to test TML, I now
have a different domain.
So because I am loading up my test file from a different domain, communication or direct access between
these frames is not allowed and we could very easily confirm that by going over to our console.
I'll change my context to test HTML and then again I'll do a parent dot whatever.
And again, I see we have blocked a frame from accessing a cross origin frame.
OK, so that is it.
These are the scenarios or the conditions that must be true to allow direct access between frames now
that we understand all this, while it's kind of related back to the world of the application that we
are trying to build and see why all this stuff is so relevant.