1
00:00:00,920 --> 00:00:05,540
The current settings of our iFrame are allowing communication between the parent and the child, so

2
00:00:05,540 --> 00:00:09,260
in this video, we're going to start to take a look at these different settings and understand how we

3
00:00:09,260 --> 00:00:12,950
can change them to disallow any direct access between the two.

4
00:00:13,830 --> 00:00:15,510
OK, so here's our diagram.

5
00:00:16,420 --> 00:00:22,720
So we can directly access information between these frames whenever everything on this diagram right

6
00:00:22,720 --> 00:00:27,970
here is true, if any of the stuff is not true, then we do not get any direct access.

7
00:00:28,700 --> 00:00:31,290
So we're going to first focus on just this scenario right here.

8
00:00:31,840 --> 00:00:35,500
So we are allowed direct access between the parent and the child frame.

9
00:00:35,890 --> 00:00:43,720
Whenever the iFrame element does not have a sandbox property or if it has a sandbox property of allow

10
00:00:43,730 --> 00:00:44,470
same origin.

11
00:00:45,040 --> 00:00:46,480
So just read this really closely.

12
00:00:46,720 --> 00:00:49,660
This is describing when we do have direct access.

13
00:00:50,210 --> 00:00:53,710
If this scenario is not true, then we do not get any direct access.

14
00:00:54,410 --> 00:00:57,430
So let's try violating this or making this scenario false.

15
00:00:57,730 --> 00:01:03,010
So I'm going to go into my iFrame element and I'm going to add on a sandbox property to it.

16
00:01:03,910 --> 00:01:05,470
So back inside of my editor.

17
00:01:06,580 --> 00:01:12,430
Here's my index file, I'm going to find iFrame right here and I'm going to add in a sandbox property

18
00:01:12,670 --> 00:01:14,720
and set it equal to an empty string.

19
00:01:15,640 --> 00:01:21,460
So now that my iFrame has a sandbox, that means that we do not get direct access between our parent

20
00:01:21,460 --> 00:01:22,150
and the child.

21
00:01:23,140 --> 00:01:26,500
I'm going to save this, I'm going to go back over refresh.

22
00:01:28,620 --> 00:01:35,610
And then going to select the test context and I'm going to try to access a property on the parent,

23
00:01:35,610 --> 00:01:40,200
just as we did a moment ago, remember, if we want to try to access stuff on the parent, we reference

24
00:01:40,530 --> 00:01:41,040
parent.

25
00:01:41,460 --> 00:01:46,170
And then that gives us the parent window object so we can then start to refer to any property on there

26
00:01:46,170 --> 00:01:46,730
that we want.

27
00:01:47,250 --> 00:01:52,260
So if I tried to refer to anything on the parent, I end up with a really nasty error message that says

28
00:01:52,560 --> 00:01:59,100
sorry, but we blocked a frame that is our iFrame in this case from accessing a cross origin frame.

29
00:01:59,580 --> 00:02:04,470
The cross origin frame that this error message is referring to is our parent index, not HTML file.

30
00:02:05,100 --> 00:02:10,410
So again, we have very clearly disallowed direct communication from the child up to the parent.

31
00:02:11,420 --> 00:02:12,710
The opposite is true as well.

32
00:02:13,100 --> 00:02:16,760
So if we select up and then do another one of those documents.

33
00:02:18,110 --> 00:02:25,800
Where he selecter for iFrame, we can still find the iFrame element, but if I tried to access content.

34
00:02:27,290 --> 00:02:29,720
Window and then get any property off of their.

35
00:02:30,580 --> 00:02:32,650
Again, I end up with a nasty error message.

36
00:02:33,850 --> 00:02:38,230
So we made this scenario right here false, which means we do not get any direct access.

37
00:02:39,150 --> 00:02:43,830
Now, take a look at the other case inside of you, if that sandbox property, instead of having an

38
00:02:43,830 --> 00:02:47,850
empty string, says allow same origin, then we do get direct access.

39
00:02:48,100 --> 00:02:50,360
So let's take a look at that scenario really quickly as well.

40
00:02:51,660 --> 00:02:57,120
Back inside my editor, I'll find Sandbox and I'm going to add in, allow same origin.

41
00:02:58,880 --> 00:03:02,420
So we have enabled direct access between the parent and the child.

42
00:03:03,560 --> 00:03:09,920
Look back over, do it, refresh again, go to test HTML and reference parent thought anything this

43
00:03:09,920 --> 00:03:10,940
time I get undefined.

44
00:03:10,940 --> 00:03:12,680
I do not get any kind of error message.

45
00:03:14,150 --> 00:03:20,480
That's it, if we want to allow direct access, we either cannot have a sandbox property or the sandbox

46
00:03:20,480 --> 00:03:23,540
property must contain a string that says allow same origin.

47
00:03:23,900 --> 00:03:30,350
If we don't want to allow direct access, then we can add on a sandbox property that does not say allow

48
00:03:30,350 --> 00:03:31,070
same origin.

49
00:03:32,080 --> 00:03:33,790
OK, so now we understand this scenario.

50
00:03:33,970 --> 00:03:38,800
Quick pause, come back to the next video and we'll take a look at the other way in which we can disable

51
00:03:38,800 --> 00:03:39,730
direct access.