Well, my friends, at this point in time, we have pretty much solved big challenge number two and
big challenge number three.
So we have allowed a user to write out some really advanced JavaScript syntax.
So Async Awada, just stuff like that, and we are properly transmitting it.
We are also processing import statements for other JavaScript files and we are getting these directly
off of NPM.
Users can also import stuff like CSFs very easily.
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
execution inside the browser.
We have to figure out how to take the output of that bundle and execute it safely.
And remember, the key word here is safely.
And I want to first begin this entire challenge by understanding what that really is talking about.
So back inside my index file, inside my editor, here's our app component.
I'm going to go down to our unclick function to remember we run our Bandler right there.
We then eventually update our code piece of state.
The text right there is what contains our transpired and bundled code.
One very easy way that we can execute arbitrary JavaScript that is contained inside of a string is by
using the eval function, which is built into the browser.
This function has a lot of history to it.
It is used to just execute JavaScript that is stored inside of a string and so arguably is almost a
perfect use case for what we are trying to do.
So I'm going to take the JavaScript that we have right there inside that string that is our output bundle
used it into eval.
I'm going to save this, go backwards to the browser, you'll notice right away that we start to get
a warning message right here saying that e-mail can be harmful.
And trust me, we're going to go into exactly why that is.
But right now, we're not going to read about the warning message too much.
Then inside of our text area, I'm going to put in a console log, either submit it, so we are now
building that bundle and then executing that code right there inside the browser through the use of
the evil function.
We can start to do some more complicated stuff.
So let's say we want to import, say, Axios from Axios.
I'll do a console log of Axios.
So there is our bundle, there's our security code that is the axios object right there, want to do
something really fun?
Let's do window Axios is Axios.
I submit that now I can make use of Axios directly from my console so I could write out axios not get
and maybe get some kind of URL or whatever else I'm going to get there if I do that.
But you get the idea.
So that doubt, it looks like evil can definitely run some code, but remember how we are going to eventually
be using all this stuff we are developing, eventually we're going to allow any user to write in any
kind of code inside this text area or eventually the code editor.
We still have to put together and then allow them to execute it.
Well, the first most obvious thing that might occur is a user might do something like this.
They might make a very simple typo or something like console, dot, blah, blah, blah, blah, instead
of log.
This code right here can definitely be transpired and bundled without any issue whatsoever.
So I'm going to run that.
However, when we start to execute the code, well, we start to get an error because that is definitely
not a function.
So we end up with this very classic error message of console dot.
Something is not a function, therefore we cannot invoke it.
So the first thing we need to think about when it comes to that evil function is that it is entirely
possible that a user is going to write out some code and try to execute code that is just plain going
to throw in error.
We definitely don't want that to crash our entire application.
There is, of course, a very simple workaround to this.
We could always wrap this eval right here inside of a tri patch statement.
So now this is going to attempt to execute the users bundled code, but if anything goes wrong, no
problem, are going to catch that air and we'll see the air appear inside this statement.
We might even decide to maybe alert the user to that air and prompt them with an air message and say,
hey, something just went wrong with the code you tried to execute.
Now, in general, I don't really like using alert at all.
This is just a very quick example.
I can say this.
Let's go back over now if I try to do a console, dot something, something.
And submit, I end up with just a very plain and simple error message.
This would be our time to tell the user, hey, something went wrong as we tried to execute your code.
However, life isn't always quite so easy.
I'm going to wrap this console, dot something, something with a set time out function.
And I'm going to delay the execution of it by about one hundred milliseconds, so pretty much no delay
whatsoever.
So as soon as that inner function runs, we're definitely gonna result in some kind of air being thrown.
Let's now cement this and see what happens.
Hey, wait a minute.
Well, there's the problem whenever we do a try catch around some block of code, that code is executed
and in that instant that it is executed, we watch for an error.
As soon as that code is executed, we then exit out of the try catch block and life continues as usual.
We just add it in a little bit of asynchronous code when that inner function actually gets executed
through the use of that set time out.
We are no longer inside to try catch block.
So there's no trick catch around that inner function inside the set time out.
So if the user ever write some kind of asynchronous code inside their application and it throws an error,
well, once again, everything crashes.
So it looks like handling the execution of a user's code might be a little bit more tricky than we originally
imagined.
In addition, we haven't even spoken yet about exactly why Eval can be harmful from a security standpoint
as well.
Without a doubt, there's definitely going to be definitely one of our really big challenges to figure
out.
So we're going to eventually take a look at several different strategies so we can use for doing code
execution the browser and then eventually decide what is best for us.
So let's take a pause here and start going down this path in just a moment.