1
00:00:01,580 --> 00:00:05,720
And this video, we're going to take a look at one technique we can use to solve both these problems

2
00:00:05,720 --> 00:00:06,410
at the same time.

3
00:00:06,420 --> 00:00:11,480
So both the fact that we might eventually end up with very large attributes on that source, doc, and

4
00:00:11,480 --> 00:00:15,800
also the fact that we might eventually run into some trouble around parsing JavaScript code inside the

5
00:00:15,800 --> 00:00:16,090
script.

6
00:00:16,940 --> 00:00:19,870
So we're going to go over a very little side topic very quickly.

7
00:00:20,330 --> 00:00:21,230
You might recall that.

8
00:00:21,650 --> 00:00:26,150
Well, I'm sure you'll recall, because the last 12 videos or so that we've gone through have been all

9
00:00:26,150 --> 00:00:31,730
about restricting communication between a child iFrame and the parent hosting document.

10
00:00:32,119 --> 00:00:38,060
So we we went through all that trouble to make sure that we could restrict or turn off direct access

11
00:00:38,300 --> 00:00:40,270
between the child and the parent.

12
00:00:40,970 --> 00:00:45,530
In this video, we're going to take a look at one possible way that we can slightly bend those rules.

13
00:00:46,100 --> 00:00:51,140
It turns out that we can still, even though we have turned off that direct access, we can still communicate

14
00:00:51,140 --> 00:00:54,350
between these two different contexts in a very indirect way.

15
00:00:54,900 --> 00:00:58,400
So let me show you an example of this inside my console.

16
00:00:58,430 --> 00:00:59,960
I can make sure I've got top selected.

17
00:00:59,960 --> 00:01:03,440
So I'm currently executing code inside of my top level context.

18
00:01:04,800 --> 00:01:10,650
I'm going to write in here, window dot, add event listener, I'm going to listen for an event of type

19
00:01:10,650 --> 00:01:11,340
message.

20
00:01:13,280 --> 00:01:18,440
As a second argument, I'm going to put in and callback function, I'm going to receive some event and

21
00:01:18,440 --> 00:01:20,950
then I'll cancel that event.

22
00:01:21,740 --> 00:01:27,170
And then finally, as a third argument to add event listener, I'm going to put in simply false like

23
00:01:27,170 --> 00:01:27,440
so.

24
00:01:28,600 --> 00:01:33,560
So we are setting up a event listener on the window of our top level document right now.

25
00:01:33,580 --> 00:01:34,900
This is the parent document.

26
00:01:35,530 --> 00:01:39,310
It's going to run that I get back undefined, but the listener has been created.

27
00:01:40,120 --> 00:01:44,860
Then after that, I'm going to write in a little bit of code into our text area and then submit it.

28
00:01:45,310 --> 00:01:49,920
Remember, when we write in code inside of here and click submit, that code will be bundled, transpired

29
00:01:49,930 --> 00:01:52,870
and then executed in the context of the iFrame.

30
00:01:53,710 --> 00:01:59,350
So inside of here, I'm going to add in window or something, just parent, which you will recall is

31
00:01:59,350 --> 00:02:04,480
a reference to the parent frame if we run that from inside of this iframe sorry.

32
00:02:05,930 --> 00:02:10,430
Parent post message I'm going to post hello there.

33
00:02:11,650 --> 00:02:17,110
And then as a second argument, I'm going to put in just a star by itself inside of a string.

34
00:02:19,720 --> 00:02:23,950
Now, when we click on Submit, once again, we're going to transpire, bundle and then execute the

35
00:02:23,950 --> 00:02:25,070
result inside the iFrame.

36
00:02:25,360 --> 00:02:26,820
Let's try it out and see what happens.

37
00:02:28,150 --> 00:02:33,310
All right, so we get a council log, this council log is coming from the event listener that we set

38
00:02:33,310 --> 00:02:34,800
up inside of our parent frame.

39
00:02:35,290 --> 00:02:40,600
So this is how we can do some very light communication between a child and a parent and in the opposite

40
00:02:40,600 --> 00:02:41,590
direction as well.

41
00:02:41,980 --> 00:02:49,150
We can post messages, as they are called, so we can post a message from a parent to a child or from

42
00:02:49,150 --> 00:02:50,110
a child to a parent.

43
00:02:50,410 --> 00:02:56,890
And this example, we have posted a message from our child up to the parent on either side.

44
00:02:56,890 --> 00:03:01,210
We can set up event listeners to listen for these messages and then receive them and process them in

45
00:03:01,210 --> 00:03:01,720
some way.

46
00:03:02,230 --> 00:03:06,040
So once again, this is how we can still do some light communication between these different frames,

47
00:03:06,250 --> 00:03:09,310
even after we have disabled direct access between the two.

48
00:03:10,020 --> 00:03:16,060
This is thought of as still being secure in nature because it's a lot harder for some code running inside

49
00:03:16,060 --> 00:03:22,300
the iFrame to try to reach out to the parent and try to access direct values such as set up event listeners.

50
00:03:22,300 --> 00:03:27,970
Not technically possible, also cannot read values very easily, such as document cookie or try to get

51
00:03:27,970 --> 00:03:30,040
access to local storage and stuff like that.

52
00:03:30,670 --> 00:03:35,620
So this is thought of as again, being kind of a secure way of doing communication between these different

53
00:03:35,620 --> 00:03:39,370
frames, even after we have disabled direct communication.

54
00:03:40,520 --> 00:03:44,570
It might be kind of curious, one other thing, as long as we're talking about security, we've got

55
00:03:44,570 --> 00:03:50,300
a star right here, that star is specifying the valid domains that can receive this message.

56
00:03:50,690 --> 00:03:54,670
So right now, a star means any domain can receive this message and process this event.

57
00:03:55,010 --> 00:03:56,960
But if I put in something like.

58
00:03:58,330 --> 00:04:02,410
Google Dotcom, the hosting frame or this iFrame?

59
00:04:02,590 --> 00:04:08,470
So in other words, the parent of this iFrame is localhost three thousand that does not match up with

60
00:04:08,470 --> 00:04:09,200
Google dot com.

61
00:04:09,400 --> 00:04:15,490
So if I submit this, we'll see that we get a nasty error message here because this message was interpreted

62
00:04:15,640 --> 00:04:17,209
by a parent of Google dot com.

63
00:04:17,230 --> 00:04:19,570
But right now the parent is at localist three thousand.

64
00:04:19,970 --> 00:04:23,260
That's how you can get some further amount of security if you really care about it.

65
00:04:24,390 --> 00:04:27,270
All right, last thing I want to do really quickly is take a look at the console log.

66
00:04:28,270 --> 00:04:33,100
So this log is coming from our parent, it's coming from the event listener we set up right there inside

67
00:04:33,100 --> 00:04:33,680
this event.

68
00:04:33,700 --> 00:04:39,160
You'll notice that there is a data property and data contains the actual message that we posted from

69
00:04:39,160 --> 00:04:40,240
inside of the iFrame.

70
00:04:40,390 --> 00:04:41,500
So there's the yellow string.

71
00:04:43,130 --> 00:04:47,900
All right, so this again, this is how we can do some very simple communication, so how does this

72
00:04:47,900 --> 00:04:48,500
really help us?

73
00:04:48,980 --> 00:04:50,000
Well, it's going to be pretty simple.

74
00:04:50,000 --> 00:04:52,790
All we really have to do here is create the iFrame.

75
00:04:53,120 --> 00:04:56,080
We're then going to listen for events coming from the parent.

76
00:04:56,480 --> 00:04:59,450
We're going to watch for events saying that some new code has been created.

77
00:04:59,840 --> 00:05:04,130
Whenever some new code has been bundled, we're going to receive it inside the iFrame and then just

78
00:05:04,130 --> 00:05:05,290
go ahead and execute it.

79
00:05:05,600 --> 00:05:06,440
And that's pretty much it.

80
00:05:07,830 --> 00:05:12,000
So this is going to prevent this entire problem of having an attribute that is too long because we're

81
00:05:12,000 --> 00:05:13,930
not going to communicate using attributes anymore.

82
00:05:14,220 --> 00:05:18,390
We're going to instead communicate all this code as a plain string as intended.

83
00:05:18,780 --> 00:05:23,790
Actually, that right there, we're also going to make sure or this is also going to help this entire

84
00:05:23,790 --> 00:05:30,120
problem of having an escaped script tax, because now this code is going to be shared as a string as

85
00:05:30,120 --> 00:05:33,360
opposed to a actual HTML snippet.

86
00:05:34,300 --> 00:05:38,620
All right, so let's take a pause right here and start to implement this eventing stuff in the next

87
00:05:38,620 --> 00:05:38,950
video.