1
00:00:01,280 --> 00:00:03,410
So how is all this different stuff relevant at all?

2
00:00:03,590 --> 00:00:05,080
Well, here's what it really comes down to.

3
00:00:05,570 --> 00:00:08,060
Remember, we were concerned about these three different items.

4
00:00:08,420 --> 00:00:13,820
First, users code throwing errors, the fact that a user might mutate the dumb and finally, the fact

5
00:00:13,820 --> 00:00:18,050
that there might be some kind of security issue if a user runs code provided by another user.

6
00:00:18,620 --> 00:00:24,530
If we take the users code and we execute it in the context of an iFrame, it will completely solve all

7
00:00:24,530 --> 00:00:25,630
three of these issues.

8
00:00:26,360 --> 00:00:32,390
So the first two will be resolved if we just plain run the users code inside an iFrame, if we run their

9
00:00:32,390 --> 00:00:35,150
code inside and iFrame and something crashes, no problem.

10
00:00:35,360 --> 00:00:39,050
It is not being executed in the same context as our REACT application.

11
00:00:39,320 --> 00:00:41,330
So really no big problem there whatsoever.

12
00:00:42,220 --> 00:00:47,110
If the user decides to mutate the DOM in some fashion, they're going to mutate the DOM inside the iFrame,

13
00:00:47,290 --> 00:00:52,300
not our parent document, so the user can mess around with the DOM as much as they please, and it's

14
00:00:52,300 --> 00:00:54,060
not going to do anything bad to our application.

15
00:00:54,910 --> 00:00:59,950
And then finally, if we can figure out a way to run the user's code inside of an iFrame with direct

16
00:00:59,950 --> 00:01:05,470
communication disabled with a parent, we won't really have to worry about this scenario as well because

17
00:01:05,620 --> 00:01:11,410
some malicious user will not be able to, say, set up a event listener on input elements and try to

18
00:01:11,410 --> 00:01:12,630
harvest a user's password.

19
00:01:13,090 --> 00:01:18,910
We can also figure out some way to disallow getting access to, say, the cookie, which might have

20
00:01:18,910 --> 00:01:21,100
some authentication credentials inside of it as well.

21
00:01:22,300 --> 00:01:27,190
You can actually we can go back over to code pen and code sandbox and see that they are implementing

22
00:01:27,190 --> 00:01:31,420
an iFrame with all these same kind of scenarios or the same kind of consideration.

23
00:01:32,100 --> 00:01:36,670
So back inside my browser between the last video and this one, I reopened code really quickly.

24
00:01:36,980 --> 00:01:40,990
I'm going to take a look at that iframe once again and you'll notice.

25
00:01:42,490 --> 00:01:49,480
That although they do have a sandbox property here with the allow same origin property, they are loading

26
00:01:49,480 --> 00:01:52,770
up the content for the iFrame from a totally different domain.

27
00:01:53,230 --> 00:01:57,700
They're loading up the content for the iFrame from code pen or CDP and IO.

28
00:01:58,270 --> 00:02:04,240
So because they are loading up the content for this iFrame from a different domain than the parent document,

29
00:02:04,660 --> 00:02:07,020
the parent document is being loaded from code and audio.

30
00:02:07,360 --> 00:02:10,479
Direct communication is once again totally disallowed.

31
00:02:11,320 --> 00:02:13,330
Same thing can be seen over on Code Sandbox.

32
00:02:14,230 --> 00:02:16,780
Don't code sandbox at Code Sandbox dot.

33
00:02:16,960 --> 00:02:20,860
Oh that means I fetch the parent frame from code sandbox dot io.

34
00:02:21,550 --> 00:02:23,140
But if I look at the child frame.

35
00:02:24,390 --> 00:02:25,260
And inspect it.

36
00:02:26,300 --> 00:02:34,640
That has a SIRC right here of O.W. to seven kesby up to once again, different domain, different context,

37
00:02:34,640 --> 00:02:38,810
no direct access or communication between the parent and the child is allowed.

38
00:02:39,840 --> 00:02:44,640
This is pretty much what Code Sandbox is doing, what code man is doing, what Spittle is doing, what

39
00:02:44,640 --> 00:02:49,350
all these different online coding tools are doing, they are all loading up your code inside of an iFrame.

40
00:02:50,610 --> 00:02:55,080
Well, to be precise, they're actually loading up an HTML document inside an iFrame and then executing

41
00:02:55,080 --> 00:02:56,910
your JavaScript code inside there.

42
00:02:57,210 --> 00:03:02,610
And that's what is done to make sure that you don't accidentally mutate the DOM or have any malicious

43
00:03:02,610 --> 00:03:04,110
code or anything like that.

44
00:03:05,530 --> 00:03:10,750
All right, so now the last real consideration that we have here is, well, we understand how to create

45
00:03:10,750 --> 00:03:14,740
an iFrame, we understand more or less how to show an HTML document.

46
00:03:15,100 --> 00:03:18,190
How are we going to somehow get our JavaScript code inside there?

47
00:03:18,610 --> 00:03:20,680
That's the last real thing that we need to figure out.

48
00:03:21,280 --> 00:03:23,920
Let's take a pause right here and consider that in just a moment.