1
00:00:01,110 --> 00:00:05,190
As we just saw, there might eventually be a couple of different challenges we run into as we start

2
00:00:05,190 --> 00:00:06,780
to think about running a user's code.

3
00:00:07,200 --> 00:00:10,170
I want to very quickly summarize in the different problems we really need.

4
00:00:10,260 --> 00:00:15,810
Do you think about here first off, first big problem is that whenever we run a user's code, it might

5
00:00:15,810 --> 00:00:16,800
throw some kind of error.

6
00:00:16,810 --> 00:00:21,210
And as we just saw moments ago, absolutely might cause our program to crash or something very similar

7
00:00:21,210 --> 00:00:21,690
to that.

8
00:00:22,120 --> 00:00:24,080
I don't think we really need to go any further into that.

9
00:00:24,090 --> 00:00:25,680
We saw an example that just a moment ago.

10
00:00:26,790 --> 00:00:32,189
Second big problem, a user might give us some code to run, it will somehow mutate the DOM and once

11
00:00:32,189 --> 00:00:35,770
again, if user starts changing the DOM, it might cause our program to crash.

12
00:00:36,270 --> 00:00:38,580
This is 100 percent absolutely possible.

13
00:00:38,820 --> 00:00:40,500
I can show you an example of it very easily.

14
00:00:41,100 --> 00:00:47,940
Let's say a user tries to execute some code with something like document body in our HTML is empty string.

15
00:00:49,020 --> 00:00:50,820
What's going to happen when we execute this code?

16
00:00:51,030 --> 00:00:52,890
Well, we're just going to take a look at our current.

17
00:00:53,420 --> 00:00:54,630
There's a body element.

18
00:00:54,840 --> 00:00:58,800
Everything inside there, which is basically our entire application, is going to get wiped out.

19
00:00:59,520 --> 00:01:02,670
So when I submit this, the entire application goes away.

20
00:01:02,880 --> 00:01:04,140
Empty body element.

21
00:01:04,709 --> 00:01:09,720
So any user who tries to run their code in that kind of same fashion is going to think that the entire

22
00:01:09,720 --> 00:01:10,710
application just broke.

23
00:01:11,140 --> 00:01:12,870
And technically it really just did.

24
00:01:14,250 --> 00:01:18,510
Finally, and this is the one I want to give a little bit more detail on in this video, a user might

25
00:01:18,510 --> 00:01:24,060
accidentally run code that is provided by some other user who's a little bit more malicious in nature.

26
00:01:24,640 --> 00:01:28,410
Let me give you a very quick example of this by taking a look once again at code pen.

27
00:01:29,880 --> 00:01:31,040
Let's go back inside my browser.

28
00:01:31,170 --> 00:01:33,300
Going to go to code pennachio.

29
00:01:34,250 --> 00:01:38,220
At Coppen, you are not limited to just running code that you have authored.

30
00:01:38,540 --> 00:01:41,270
You can also take a look at code that other users have written as well.

31
00:01:41,900 --> 00:01:46,010
So I'm going to go to challenges on the left hand side or see me trending.

32
00:01:47,380 --> 00:01:48,520
And scroll down a little bit.

33
00:01:49,730 --> 00:01:51,140
And I'm going to eventually find.

34
00:01:53,230 --> 00:01:58,960
Some code that some other user has written, so I'm now executing this JavaScript code inside my browser,

35
00:01:59,740 --> 00:02:02,330
a user who's created this pen right here.

36
00:02:02,350 --> 00:02:04,640
You'll notice that there is a ton of code inside of here.

37
00:02:05,100 --> 00:02:07,300
Let me show you what this person could have very easily done.

38
00:02:07,570 --> 00:02:13,150
They could have very easily gone down to the bottom where maybe nobody is ever going to really look.

39
00:02:13,330 --> 00:02:16,150
And down here they can start to write out some kind of nasty stuff.

40
00:02:16,640 --> 00:02:19,120
For example, they might write out a request.

41
00:02:20,120 --> 00:02:25,100
Let's say they do an Axios post or something like that to some kind of malicious server.

42
00:02:26,180 --> 00:02:31,190
That they maintain and maybe inside the body of this post request, they try to send along.

43
00:02:33,160 --> 00:02:36,070
The current cookie or this domain or fur coat pendant.

44
00:02:36,880 --> 00:02:41,200
Now, if you are not familiar with cookies in general, cookies are used for authentication in many

45
00:02:41,200 --> 00:02:41,920
different places.

46
00:02:42,460 --> 00:02:46,610
So inside this document, Cookie might be some authentication details for me.

47
00:02:46,870 --> 00:02:52,480
So if I came to this code pen and executed this code right here, I might inadvertently send my authentication

48
00:02:52,480 --> 00:02:54,510
details off to this malicious server.

49
00:02:54,790 --> 00:02:59,920
And that means that this user could then very easily kind of impersonate me on code pennachio.

50
00:03:00,860 --> 00:03:01,580
Alternatively.

51
00:03:02,910 --> 00:03:06,420
Rather than just trying to send up the cookie, because there are some other ways of kind of preventing

52
00:03:06,420 --> 00:03:11,820
things like that, a user might try to add in something like document dot, query selector.

53
00:03:14,810 --> 00:03:19,130
Input try to find all the input elements on the screen, this will technically only find the first input

54
00:03:19,130 --> 00:03:19,460
element.

55
00:03:19,460 --> 00:03:21,360
But just bear with me for just a moment.

56
00:03:21,890 --> 00:03:24,200
They might then add in an event listener to it.

57
00:03:27,330 --> 00:03:33,660
Take the event and then again, maybe make some kind of post request off to a malicious server.

58
00:03:35,200 --> 00:03:36,760
And inside the body, the police request.

59
00:03:37,670 --> 00:03:40,910
They might put in event target value.

60
00:03:42,280 --> 00:03:46,600
And sorry, I meant to put in here for the ADD event listener watch for a change event, that's better.

61
00:03:47,160 --> 00:03:53,350
So now whenever I type into a text input, this code would take the value I typed inside and then send

62
00:03:53,350 --> 00:03:54,680
off to the malicious server.

63
00:03:55,240 --> 00:03:56,380
So why is this relevant?

64
00:03:56,530 --> 00:03:58,780
Well, if I ever go to the login page.

65
00:04:00,180 --> 00:04:05,490
In theory, that same event listeners might still be active and listening for me, typing into text

66
00:04:05,490 --> 00:04:09,330
inputs, so now I might go and type in my email right here and a password.

67
00:04:09,570 --> 00:04:15,330
And with every key press, I would be also sending off my authentication details to that malicious server.

68
00:04:15,360 --> 00:04:18,880
So once again, some other user could very easily impersonate me on code.

69
00:04:18,959 --> 00:04:22,470
Pennachio, there's even more things that can go wrong very quickly.

70
00:04:22,840 --> 00:04:26,670
A user might try to put in some code inside of here that would pop up some kind of window that maybe

71
00:04:26,670 --> 00:04:31,230
looks like a login screen for Facebook or my bank account or things like that.

72
00:04:31,770 --> 00:04:36,690
So without a doubt, being able to run arbitrary code on another user's browser, well, there's a lot

73
00:04:36,690 --> 00:04:39,290
of things that can very easily go wrong very quick.

74
00:04:40,020 --> 00:04:43,960
So we need to think about some way that we can really mitigate all these different problems.

75
00:04:44,610 --> 00:04:48,650
There's one other problem I want to very quickly mention that I do not show on this list.

76
00:04:49,170 --> 00:04:53,880
It's something that we're not going to really handle too much because it's a lot of extra work for not

77
00:04:53,880 --> 00:04:54,570
a lot of payoff.

78
00:04:54,570 --> 00:04:58,530
But I just want to mention that this might be some extra feature that you eventually put into our tool

79
00:04:59,010 --> 00:05:00,930
at Coppen if I start up a new pen.

80
00:05:02,360 --> 00:05:06,050
Inside this JavaScript panel, I'm going to also open up my console very quickly here.

81
00:05:07,350 --> 00:05:10,200
So inside the JavaScript panel, I could write out a for loop.

82
00:05:16,280 --> 00:05:18,290
And I'll do maybe a thousand iterations.

83
00:05:20,220 --> 00:05:25,020
And for every iteration will do a console log of I if I were now to execute this well, I would get

84
00:05:25,020 --> 00:05:26,230
a thousand console logs.

85
00:05:26,610 --> 00:05:31,170
Now, what would happen if a user accidentally because remember, a user here is going to be writing

86
00:05:31,170 --> 00:05:34,260
out documentation and kind of playing around with code inside of our app?

87
00:05:34,590 --> 00:05:39,030
So it's entirely possible that people using our app might not be super savvy with writing code, so

88
00:05:39,030 --> 00:05:42,000
they might accidentally put together some kind of infinite loop.

89
00:05:42,480 --> 00:05:47,280
Let's say if I increase the bounds of this loop to about one million or so.

90
00:05:49,690 --> 00:05:54,370
And you'll notice that it looks like my console is kind of stopping at three thousand six hundred seventy

91
00:05:54,370 --> 00:06:00,310
four, so Cotan actually has a little tool running inside of it to massage the code that gets executed.

92
00:06:00,730 --> 00:06:02,790
Goodwin does not exactly execute that.

93
00:06:02,800 --> 00:06:08,260
Instead, whenever code pences A for loop, they're going to add in a little bit of extra code to detect

94
00:06:08,260 --> 00:06:14,260
infinite loops or loops that potentially might be taking longer to execute than what is reasonable.

95
00:06:14,950 --> 00:06:18,280
So in this case, Code Pen has modified this code before executing it.

96
00:06:18,520 --> 00:06:22,540
They've added in just a little check inside of here to make sure that we are not getting stuck inside

97
00:06:22,660 --> 00:06:24,120
of some kind of infinite loop.

98
00:06:24,850 --> 00:06:29,500
So, again, this is another possible problem that could potentially cause our application to crash

99
00:06:29,500 --> 00:06:31,420
in some way, kind of similar to number one up here.

100
00:06:32,170 --> 00:06:33,660
So we're not going to handle this case.

101
00:06:33,670 --> 00:06:37,190
I just want to mention that this is some other scenario that we might be a little bit concerned about.

102
00:06:37,960 --> 00:06:38,320
All right.

103
00:06:38,320 --> 00:06:41,680
So now that we've outlined a couple of big challenges, let's take a look at what we're going to do

104
00:06:41,680 --> 00:06:45,100
as a general solution to all three of these different problems.