The current settings of our iFrame are allowing communication between the parent and the child, so
in this video, we're going to start to take a look at these different settings and understand how we
can change them to disallow any direct access between the two.
OK, so here's our diagram.
So we can directly access information between these frames whenever everything on this diagram right
here is true, if any of the stuff is not true, then we do not get any direct access.
So we're going to first focus on just this scenario right here.
So we are allowed direct access between the parent and the child frame.
Whenever the iFrame element does not have a sandbox property or if it has a sandbox property of allow
same origin.
So just read this really closely.
This is describing when we do have direct access.
If this scenario is not true, then we do not get any direct access.
So let's try violating this or making this scenario false.
So I'm going to go into my iFrame element and I'm going to add on a sandbox property to it.
So back inside of my editor.
Here's my index file, I'm going to find iFrame right here and I'm going to add in a sandbox property
and set it equal to an empty string.
So now that my iFrame has a sandbox, that means that we do not get direct access between our parent
and the child.
I'm going to save this, I'm going to go back over refresh.
And then going to select the test context and I'm going to try to access a property on the parent,
just as we did a moment ago, remember, if we want to try to access stuff on the parent, we reference
parent.
And then that gives us the parent window object so we can then start to refer to any property on there
that we want.
So if I tried to refer to anything on the parent, I end up with a really nasty error message that says
sorry, but we blocked a frame that is our iFrame in this case from accessing a cross origin frame.
The cross origin frame that this error message is referring to is our parent index, not HTML file.
So again, we have very clearly disallowed direct communication from the child up to the parent.
The opposite is true as well.
So if we select up and then do another one of those documents.
Where he selecter for iFrame, we can still find the iFrame element, but if I tried to access content.
Window and then get any property off of their.
Again, I end up with a nasty error message.
So we made this scenario right here false, which means we do not get any direct access.
Now, take a look at the other case inside of you, if that sandbox property, instead of having an
empty string, says allow same origin, then we do get direct access.
So let's take a look at that scenario really quickly as well.
Back inside my editor, I'll find Sandbox and I'm going to add in, allow same origin.
So we have enabled direct access between the parent and the child.
Look back over, do it, refresh again, go to test HTML and reference parent thought anything this
time I get undefined.
I do not get any kind of error message.
That's it, if we want to allow direct access, we either cannot have a sandbox property or the sandbox
property must contain a string that says allow same origin.
If we don't want to allow direct access, then we can add on a sandbox property that does not say allow
same origin.
OK, so now we understand this scenario.
Quick pause, come back to the next video and we'll take a look at the other way in which we can disable
direct access.