1
00:00:00,610 --> 00:00:05,350
Well, my friends, at this point in time, we have pretty much solved big challenge number two and

2
00:00:05,370 --> 00:00:06,610
big challenge number three.

3
00:00:07,060 --> 00:00:10,720
So we have allowed a user to write out some really advanced JavaScript syntax.

4
00:00:10,900 --> 00:00:14,790
So Async Awada, just stuff like that, and we are properly transmitting it.

5
00:00:15,100 --> 00:00:20,380
We are also processing import statements for other JavaScript files and we are getting these directly

6
00:00:20,380 --> 00:00:21,130
off of NPM.

7
00:00:21,580 --> 00:00:24,820
Users can also import stuff like CSFs very easily.

8
00:00:25,340 --> 00:00:29,980
So now we go all the way back up to the top of our list and we're going to start to talk about code

9
00:00:29,980 --> 00:00:31,810
execution inside the browser.

10
00:00:32,380 --> 00:00:36,330
We have to figure out how to take the output of that bundle and execute it safely.

11
00:00:36,390 --> 00:00:38,350
And remember, the key word here is safely.

12
00:00:38,530 --> 00:00:42,620
And I want to first begin this entire challenge by understanding what that really is talking about.

13
00:00:43,300 --> 00:00:47,500
So back inside my index file, inside my editor, here's our app component.

14
00:00:48,010 --> 00:00:52,930
I'm going to go down to our unclick function to remember we run our Bandler right there.

15
00:00:53,590 --> 00:00:56,230
We then eventually update our code piece of state.

16
00:00:56,680 --> 00:01:01,000
The text right there is what contains our transpired and bundled code.

17
00:01:01,690 --> 00:01:07,330
One very easy way that we can execute arbitrary JavaScript that is contained inside of a string is by

18
00:01:07,330 --> 00:01:10,310
using the eval function, which is built into the browser.

19
00:01:11,140 --> 00:01:14,230
This function has a lot of history to it.

20
00:01:14,230 --> 00:01:20,620
It is used to just execute JavaScript that is stored inside of a string and so arguably is almost a

21
00:01:20,620 --> 00:01:22,390
perfect use case for what we are trying to do.

22
00:01:23,030 --> 00:01:26,890
So I'm going to take the JavaScript that we have right there inside that string that is our output bundle

23
00:01:27,400 --> 00:01:28,590
used it into eval.

24
00:01:30,260 --> 00:01:34,880
I'm going to save this, go backwards to the browser, you'll notice right away that we start to get

25
00:01:34,880 --> 00:01:37,860
a warning message right here saying that e-mail can be harmful.

26
00:01:38,270 --> 00:01:40,820
And trust me, we're going to go into exactly why that is.

27
00:01:41,000 --> 00:01:43,550
But right now, we're not going to read about the warning message too much.

28
00:01:45,350 --> 00:01:53,360
Then inside of our text area, I'm going to put in a console log, either submit it, so we are now

29
00:01:53,360 --> 00:01:58,610
building that bundle and then executing that code right there inside the browser through the use of

30
00:01:58,610 --> 00:01:59,720
the evil function.

31
00:02:00,650 --> 00:02:02,600
We can start to do some more complicated stuff.

32
00:02:02,750 --> 00:02:06,950
So let's say we want to import, say, Axios from Axios.

33
00:02:07,970 --> 00:02:09,680
I'll do a console log of Axios.

34
00:02:12,320 --> 00:02:17,690
So there is our bundle, there's our security code that is the axios object right there, want to do

35
00:02:17,690 --> 00:02:18,590
something really fun?

36
00:02:18,920 --> 00:02:21,770
Let's do window Axios is Axios.

37
00:02:22,150 --> 00:02:28,580
I submit that now I can make use of Axios directly from my console so I could write out axios not get

38
00:02:28,580 --> 00:02:32,210
and maybe get some kind of URL or whatever else I'm going to get there if I do that.

39
00:02:32,210 --> 00:02:33,160
But you get the idea.

40
00:02:34,560 --> 00:02:40,080
So that doubt, it looks like evil can definitely run some code, but remember how we are going to eventually

41
00:02:40,080 --> 00:02:44,850
be using all this stuff we are developing, eventually we're going to allow any user to write in any

42
00:02:44,850 --> 00:02:47,750
kind of code inside this text area or eventually the code editor.

43
00:02:48,010 --> 00:02:50,970
We still have to put together and then allow them to execute it.

44
00:02:51,510 --> 00:02:57,750
Well, the first most obvious thing that might occur is a user might do something like this.

45
00:02:58,620 --> 00:03:03,390
They might make a very simple typo or something like console, dot, blah, blah, blah, blah, instead

46
00:03:03,390 --> 00:03:03,870
of log.

47
00:03:04,560 --> 00:03:09,050
This code right here can definitely be transpired and bundled without any issue whatsoever.

48
00:03:10,050 --> 00:03:10,900
So I'm going to run that.

49
00:03:11,870 --> 00:03:16,130
However, when we start to execute the code, well, we start to get an error because that is definitely

50
00:03:16,130 --> 00:03:17,030
not a function.

51
00:03:17,030 --> 00:03:19,580
So we end up with this very classic error message of console dot.

52
00:03:19,790 --> 00:03:22,500
Something is not a function, therefore we cannot invoke it.

53
00:03:22,970 --> 00:03:26,870
So the first thing we need to think about when it comes to that evil function is that it is entirely

54
00:03:26,870 --> 00:03:31,070
possible that a user is going to write out some code and try to execute code that is just plain going

55
00:03:31,070 --> 00:03:32,010
to throw in error.

56
00:03:32,360 --> 00:03:35,230
We definitely don't want that to crash our entire application.

57
00:03:35,870 --> 00:03:38,360
There is, of course, a very simple workaround to this.

58
00:03:38,810 --> 00:03:43,520
We could always wrap this eval right here inside of a tri patch statement.

59
00:03:48,960 --> 00:03:53,550
So now this is going to attempt to execute the users bundled code, but if anything goes wrong, no

60
00:03:53,550 --> 00:03:58,310
problem, are going to catch that air and we'll see the air appear inside this statement.

61
00:03:58,800 --> 00:04:03,750
We might even decide to maybe alert the user to that air and prompt them with an air message and say,

62
00:04:03,870 --> 00:04:06,160
hey, something just went wrong with the code you tried to execute.

63
00:04:06,540 --> 00:04:08,910
Now, in general, I don't really like using alert at all.

64
00:04:08,940 --> 00:04:10,650
This is just a very quick example.

65
00:04:11,470 --> 00:04:12,340
I can say this.

66
00:04:13,310 --> 00:04:17,540
Let's go back over now if I try to do a console, dot something, something.

67
00:04:18,560 --> 00:04:22,190
And submit, I end up with just a very plain and simple error message.

68
00:04:22,520 --> 00:04:26,810
This would be our time to tell the user, hey, something went wrong as we tried to execute your code.

69
00:04:27,630 --> 00:04:29,830
However, life isn't always quite so easy.

70
00:04:30,620 --> 00:04:37,340
I'm going to wrap this console, dot something, something with a set time out function.

71
00:04:40,710 --> 00:04:46,560
And I'm going to delay the execution of it by about one hundred milliseconds, so pretty much no delay

72
00:04:46,560 --> 00:04:47,180
whatsoever.

73
00:04:48,660 --> 00:04:52,740
So as soon as that inner function runs, we're definitely gonna result in some kind of air being thrown.

74
00:04:53,100 --> 00:04:54,620
Let's now cement this and see what happens.

75
00:04:55,610 --> 00:04:56,690
Hey, wait a minute.

76
00:04:57,380 --> 00:05:04,400
Well, there's the problem whenever we do a try catch around some block of code, that code is executed

77
00:05:04,400 --> 00:05:08,300
and in that instant that it is executed, we watch for an error.

78
00:05:09,020 --> 00:05:14,530
As soon as that code is executed, we then exit out of the try catch block and life continues as usual.

79
00:05:14,930 --> 00:05:20,300
We just add it in a little bit of asynchronous code when that inner function actually gets executed

80
00:05:20,300 --> 00:05:21,860
through the use of that set time out.

81
00:05:22,340 --> 00:05:24,500
We are no longer inside to try catch block.

82
00:05:24,870 --> 00:05:29,030
So there's no trick catch around that inner function inside the set time out.

83
00:05:29,530 --> 00:05:33,890
So if the user ever write some kind of asynchronous code inside their application and it throws an error,

84
00:05:34,130 --> 00:05:36,680
well, once again, everything crashes.

85
00:05:37,370 --> 00:05:42,470
So it looks like handling the execution of a user's code might be a little bit more tricky than we originally

86
00:05:42,470 --> 00:05:43,010
imagined.

87
00:05:43,430 --> 00:05:49,010
In addition, we haven't even spoken yet about exactly why Eval can be harmful from a security standpoint

88
00:05:49,010 --> 00:05:49,550
as well.

89
00:05:50,160 --> 00:05:55,100
Without a doubt, there's definitely going to be definitely one of our really big challenges to figure

90
00:05:55,100 --> 00:05:55,370
out.

91
00:05:55,850 --> 00:05:59,300
So we're going to eventually take a look at several different strategies so we can use for doing code

92
00:05:59,300 --> 00:06:02,690
execution the browser and then eventually decide what is best for us.

93
00:06:03,270 --> 00:06:06,440
So let's take a pause here and start going down this path in just a moment.