As we just saw, there might eventually be a couple of different challenges we run into as we start
to think about running a user's code.
I want to very quickly summarize in the different problems we really need.
Do you think about here first off, first big problem is that whenever we run a user's code, it might
throw some kind of error.
And as we just saw moments ago, absolutely might cause our program to crash or something very similar
to that.
I don't think we really need to go any further into that.
We saw an example that just a moment ago.
Second big problem, a user might give us some code to run, it will somehow mutate the DOM and once
again, if user starts changing the DOM, it might cause our program to crash.
This is 100 percent absolutely possible.
I can show you an example of it very easily.
Let's say a user tries to execute some code with something like document body in our HTML is empty string.
What's going to happen when we execute this code?
Well, we're just going to take a look at our current.
There's a body element.
Everything inside there, which is basically our entire application, is going to get wiped out.
So when I submit this, the entire application goes away.
Empty body element.
So any user who tries to run their code in that kind of same fashion is going to think that the entire
application just broke.
And technically it really just did.
Finally, and this is the one I want to give a little bit more detail on in this video, a user might
accidentally run code that is provided by some other user who's a little bit more malicious in nature.
Let me give you a very quick example of this by taking a look once again at code pen.
Let's go back inside my browser.
Going to go to code pennachio.
At Coppen, you are not limited to just running code that you have authored.
You can also take a look at code that other users have written as well.
So I'm going to go to challenges on the left hand side or see me trending.
And scroll down a little bit.
And I'm going to eventually find.
Some code that some other user has written, so I'm now executing this JavaScript code inside my browser,
a user who's created this pen right here.
You'll notice that there is a ton of code inside of here.
Let me show you what this person could have very easily done.
They could have very easily gone down to the bottom where maybe nobody is ever going to really look.
And down here they can start to write out some kind of nasty stuff.
For example, they might write out a request.
Let's say they do an Axios post or something like that to some kind of malicious server.
That they maintain and maybe inside the body of this post request, they try to send along.
The current cookie or this domain or fur coat pendant.
Now, if you are not familiar with cookies in general, cookies are used for authentication in many
different places.
So inside this document, Cookie might be some authentication details for me.
So if I came to this code pen and executed this code right here, I might inadvertently send my authentication
details off to this malicious server.
And that means that this user could then very easily kind of impersonate me on code pennachio.
Alternatively.
Rather than just trying to send up the cookie, because there are some other ways of kind of preventing
things like that, a user might try to add in something like document dot, query selector.
Input try to find all the input elements on the screen, this will technically only find the first input
element.
But just bear with me for just a moment.
They might then add in an event listener to it.
Take the event and then again, maybe make some kind of post request off to a malicious server.
And inside the body, the police request.
They might put in event target value.
And sorry, I meant to put in here for the ADD event listener watch for a change event, that's better.
So now whenever I type into a text input, this code would take the value I typed inside and then send
off to the malicious server.
So why is this relevant?
Well, if I ever go to the login page.
In theory, that same event listeners might still be active and listening for me, typing into text
inputs, so now I might go and type in my email right here and a password.
And with every key press, I would be also sending off my authentication details to that malicious server.
So once again, some other user could very easily impersonate me on code.
Pennachio, there's even more things that can go wrong very quickly.
A user might try to put in some code inside of here that would pop up some kind of window that maybe
looks like a login screen for Facebook or my bank account or things like that.
So without a doubt, being able to run arbitrary code on another user's browser, well, there's a lot
of things that can very easily go wrong very quick.
So we need to think about some way that we can really mitigate all these different problems.
There's one other problem I want to very quickly mention that I do not show on this list.
It's something that we're not going to really handle too much because it's a lot of extra work for not
a lot of payoff.
But I just want to mention that this might be some extra feature that you eventually put into our tool
at Coppen if I start up a new pen.
Inside this JavaScript panel, I'm going to also open up my console very quickly here.
So inside the JavaScript panel, I could write out a for loop.
And I'll do maybe a thousand iterations.
And for every iteration will do a console log of I if I were now to execute this well, I would get
a thousand console logs.
Now, what would happen if a user accidentally because remember, a user here is going to be writing
out documentation and kind of playing around with code inside of our app?
So it's entirely possible that people using our app might not be super savvy with writing code, so
they might accidentally put together some kind of infinite loop.
Let's say if I increase the bounds of this loop to about one million or so.
And you'll notice that it looks like my console is kind of stopping at three thousand six hundred seventy
four, so Cotan actually has a little tool running inside of it to massage the code that gets executed.
Goodwin does not exactly execute that.
Instead, whenever code pences A for loop, they're going to add in a little bit of extra code to detect
infinite loops or loops that potentially might be taking longer to execute than what is reasonable.
So in this case, Code Pen has modified this code before executing it.
They've added in just a little check inside of here to make sure that we are not getting stuck inside
of some kind of infinite loop.
So, again, this is another possible problem that could potentially cause our application to crash
in some way, kind of similar to number one up here.
So we're not going to handle this case.
I just want to mention that this is some other scenario that we might be a little bit concerned about.
All right.
So now that we've outlined a couple of big challenges, let's take a look at what we're going to do
as a general solution to all three of these different problems.